/* =========================================================
   VISIT CHAMOLI
   STATS SECTION
   =========================================================

   IMPORTANT:
   This component is completely independent.

   No:
   - vc-map
   - vc-local
   - vc-stories
   - generic .stats
   - generic .container
   - background image
   - JavaScript
   - SVG

   Font Awesome icons only.
========================================================= */


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

#vc-stats-section.vc-stats-section {

    position: relative;

    display: block;

    width: 100%;

    margin: 0;

    padding: 0;

    background-color: #102f43;

    background-image: none;

    border: 0;

    outline: 0;

    overflow: hidden;

    clear: both;

    isolation: isolate;

    box-sizing: border-box;

    z-index: 1;
}


/* =========================================================
   REMOVE PSEUDO ELEMENTS
========================================================= */

#vc-stats-section.vc-stats-section::before,
#vc-stats-section.vc-stats-section::after {

    content: none;

    display: none;

}


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

#vc-stats-section
.vc-stats-container {

    position: relative;

    display: grid;

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

    align-items: stretch;

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

    min-height: 92px;

    margin: 0 auto;

    padding: 10px 0;

    background: transparent;

    border: 0;

    outline: 0;

    box-sizing: border-box;
}


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

#vc-stats-section
.vc-stats-item {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 0;

    min-height: 70px;

    margin: 0;

    padding: 8px 20px;

    background: transparent;

    border: 0;

    outline: 0;

    box-sizing: border-box;

    transition:
        transform .25s ease;
}


/* =========================================================
   DIVIDER
========================================================= */

#vc-stats-section
.vc-stats-item:not(:last-child)::after {

    content: "";

    position: absolute;

    top: 10px;

    right: 0;

    width: 1px;

    height: calc(100% - 20px);

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

}


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

#vc-stats-section
.vc-stats-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 50px;

    width: 50px;

    height: 52px;

    margin: 0 12px 0 0;

    padding: 0;

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

    background: transparent;

    border: 0;

    outline: 0;

    font-size: 30px;

    line-height: 1;

    box-sizing: border-box;

    transition:
        color .25s ease,
        transform .25s ease;
}


/* =========================================================
   CONTENT
========================================================= */

#vc-stats-section
.vc-stats-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    min-width: 0;

    margin: 0;

    padding: 0;

    background: transparent;

    border: 0;

    outline: 0;

    box-sizing: border-box;
}


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

#vc-stats-section
.vc-stats-number {

    display: block;

    margin: 0;

    padding: 0;

    color: #ffffff;

    font-family: inherit;

    font-size: 21px;

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -.4px;

    white-space: nowrap;

    background: transparent;

    border: 0;

    box-sizing: border-box;
}


/* =========================================================
   LABEL
========================================================= */

#vc-stats-section
.vc-stats-label {

    display: block;

    max-width: 125px;

    margin: 5px 0 0;

    padding: 0;

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

    font-family: inherit;

    font-size: 9px;

    font-weight: 500;

    line-height: 1.25;

    letter-spacing: .1px;

    white-space: normal;

    background: transparent;

    border: 0;

    box-sizing: border-box;
}


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

#vc-stats-section
.vc-stats-item:hover
.vc-stats-icon {

    color: #f5b82e;

    transform: translateY(-3px);

}


#vc-stats-section
.vc-stats-item:hover {

    transform: translateY(-1px);

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1150px) {

    #vc-stats-section
    .vc-stats-container {

        width:
            calc(100% - 50px);

    }


    #vc-stats-section
    .vc-stats-item {

        padding:
            8px 12px;

    }


    #vc-stats-section
    .vc-stats-icon {

        flex-basis: 42px;

        width: 42px;

        height: 46px;

        margin-right: 8px;

        font-size: 25px;

    }


    #vc-stats-section
    .vc-stats-number {

        font-size: 18px;

    }


    #vc-stats-section
    .vc-stats-label {

        font-size: 8px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    #vc-stats-section
    .vc-stats-container {

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

        padding:
            8px 0;

    }


    #vc-stats-section
    .vc-stats-item {

        min-height: 72px;

    }


    /* Remove divider from positions 3 and 6 */
    #vc-stats-section
    .vc-stats-item:nth-child(3)::after,
    #vc-stats-section
    .vc-stats-item:nth-child(6)::after {

        display: none;

    }


    /* Horizontal divider for first row */
    #vc-stats-section
    .vc-stats-item:nth-child(-n+3)::before {

        content: "";

        position: absolute;

        left: 12px;

        right: 12px;

        bottom: 0;

        height: 1px;

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

    }

}


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

@media (max-width: 600px) {

    #vc-stats-section
    .vc-stats-container {

        width:
            calc(100% - 24px);

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

        padding:
            8px 0;

    }


    #vc-stats-section
    .vc-stats-item {

        min-height: 68px;

        justify-content: flex-start;

        padding:
            7px 10px;

    }


    /* Vertical divider */
    #vc-stats-section
    .vc-stats-item:nth-child(odd)::after {

        display: block;

    }


    #vc-stats-section
    .vc-stats-item:nth-child(even)::after {

        display: none;

    }


    /* Horizontal divider */
    #vc-stats-section
    .vc-stats-item:nth-child(-n+4)::before {

        content: "";

        position: absolute;

        left: 8px;

        right: 8px;

        bottom: 0;

        height: 1px;

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

    }


    #vc-stats-section
    .vc-stats-item:nth-child(5)::before,
    #vc-stats-section
    .vc-stats-item:nth-child(6)::before {

        display: none;

    }


    #vc-stats-section
    .vc-stats-icon {

        flex-basis: 36px;

        width: 36px;

        height: 40px;

        margin-right: 7px;

        font-size: 22px;

    }


    #vc-stats-section
    .vc-stats-number {

        font-size: 16px;

    }


    #vc-stats-section
    .vc-stats-label {

        max-width: 105px;

        margin-top: 4px;

        font-size: 7.5px;

    }

}


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

@media (max-width: 400px) {

    #vc-stats-section
    .vc-stats-container {

        width:
            calc(100% - 14px);

    }


    #vc-stats-section
    .vc-stats-item {

        padding:
            6px 7px;

    }


    #vc-stats-section
    .vc-stats-icon {

        flex-basis: 31px;

        width: 31px;

        margin-right: 5px;

        font-size: 19px;

    }


    #vc-stats-section
    .vc-stats-number {

        font-size: 14px;

    }


    #vc-stats-section
    .vc-stats-label {

        font-size: 6.5px;

    }

}