/* --- HOME HERO --- */
.hero {
    background-position: center;
    /*background-color: rgb(4, 28, 52);*/
    background-image: url("../images/bg-hero.png");
    background-size: cover;
    background-repeat: no-repeat;
    color: var(--white);
    height: 465px;
}

.hero_ctn {
    grid-template-rows: 1fr 2fr;
    height: 100%;
    display: grid;
}

.hero_ctn h1 {
    font-size: 25px;
}

.header_top,
.header_bottom {
    width: 100%;
    height: 80px;
}
.header_bottom {
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
}

/* --- Menu --- */
.list_top,
.list_bottom {
    list-style: none;
    align-items: flex-start;
    gap: 25px;
}

.list_bottom li.filp {
    position: relative;
}

.list_bottom li.filp:hover>.sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-transform: translate(0) !important;
    transform: translate(0) !important;
}

.list_bottom ul.sub-menu {
    position: absolute;
    top: 100%;
    z-index: 9999;
    background: #fff;
    -webkit-transition: opacity .1s linear,transform .1s linear;
    transition: opacity .1s linear,transform .1s linear;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0;
    min-width: 225px;
    padding: 5px 0;
    border-radius: 5px;
    visibility: hidden;
}
.list_bottom ul.sub-menu li {
    padding: 8px 10px;
    list-style: none;
}
.list_bottom ul.sub-menu li a {
    font-weight: 500;
    font-size: .85em;
    color: #868686;
}

.list_top--link a,
.list_bottom--link a {
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    color: #ffffffb2;
    text-decoration: none;
    transition: 0.3s;
}
.list_top--link a:hover,
.list_bottom--link a:hover {
    color: #fff;
    text-decoration: underline;
}

/* --- Select Countries --- */
.form_countries {
    display: grid;
    place-content: center;
    place-items: center;
    gap: 20px;
}

.select_ctn {
    width: 400px;
    height: 60px;
}

.select_ctn--select,
.select_ctn--submit {
    height: 100%;
    border: none;
}

.select_ctn--select {
    position: relative;
    z-index: 25;
    font-size: 14px;
    font-weight: 500;
    color: var(--colorPrimary);
    line-height: 19.07px;
    width: 100%;
    padding: 0 30px;
    outline: none;
    border-radius: 10px;
    box-shadow: 0px 1px 5px 0px #0000000d;
}

.select_ctn--submit {
    background-color: var(--buttonColor);
    font-family: var(--fontPrincipal);
    font-weight: 400;
    font-size: 18px;
    color: var(--white);
    line-height: 24.51px;
    cursor: pointer;
    transition: 0.3s;
}
.select_ctn--submit:hover {
    background-color: #5c7cf9;
}
.form_countries--note {
    font-size: 14px;
    font-weight: 600;
    line-height: 18.9px;
    text-align: center;
}


/* GLOBAL DATA STYLES */
.general-data {
    position: relative;
    margin: -30px auto 140px;
    display: grid;
    place-items: center;
}
.data_ctn {
    position: absolute;
    z-index: 20;
    background-color: var(--white);
    width: 90%;
    height: 210px;
    margin: 0 auto;
    border-radius: 5px;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.05);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    place-items: center;
}

.data_info {
    text-align: start;
    width: 100%;
    padding: 20px 0;
    border-right: 1px solid #f0f0f0;
    display: grid;
    place-items: center;
    gap: 5px;
}
.data_info:last-child {
    border-right: none;
}

.data_info--title {
    font-size: 18px;
    font-weight: 400;
    line-height: 24.51px;
}

.data_info--total {
    font-size: 32px;
    font-weight: 600;
    line-height: 46.3px;
}

.data_info--total .total_txt {
    font-size: 14px;
    font-weight: 400;
    color: #b2b2b2;
    line-height: 17.09px;
    display: inline;
}

.data_info--avg {
    font-size: 14px;
    font-weight: 400;
    line-height: 17.09px;
    gap: 3px;
}
.data_info--avg .green {
    background-color: #c3f6df;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: grid;
    content: "";
    place-items: center;
}

.data_info--avg .avg_txt {
    font-weight: 400;
    color: #b2b2b2;
    display: inline;
}

.data_ctn.world {
    background-color: #fcfcfc;
}
.data_ctn.world .data_info--avg,
.data_ctn.world .data_info--total .total_txt {
    display: none;
}


/* --- WORLD NAV --- */
.our_data--button {
    background-color: var(--buttonColor);
    font-family: var(--fontPrincipal);
    font-size: 14px;
    color: var(--white);
    align-items: center;
    width: 200px;
    padding: 10px 0;
    margin: 20px auto;
    border: none;
    border-radius: 5px;
    flex-direction: column;
    justify-content: space-evenly;
}
.our_data--button svg {
    height: 20px;
    fill: var(--white);
}
.our_data--button:hover {
    background-color: #5c7cf9;
}


.world_nav_wrap {
    margin-bottom: 20px;
    border-bottom: 1px solid #efefef;
}
.world_nav_bar {
    list-style: none;
    gap: 10px;
}
.world_nav_bar li.filp {
    position: relative;
}
.world_nav_bar li.filp:hover>.sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-transform: translate(0) !important;
    transform: translate(0) !important;
}
.world_nav {
    text-align: center;
}

.world_nav--link {
    background-color: #FAFAFA;
    margin: 15px 0;
    border-bottom: 2px solid transparent;
    border-radius: 5px;
    box-shadow: 10px 5px 5px #EEE;
}
.world_nav--link a {
    font-size: 14px;
    font-weight: 500;
    color: #1c1c1cab;
    text-decoration: none;
    transition: 0.3s;
    height: 100%;
    padding: 10px;
    border-radius: 5px;
    display: block;
}
.world_nav--link ul.sub-menu {
    position: absolute;
    top: 100%;
    z-index: 9999;
    background: #FAFAFA;
    -webkit-transition: opacity .1s linear,transform .1s linear;
    transition: opacity .1s linear,transform .1s linear;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0;
    min-width: 700px;
    padding: 5px 0;
    border: 2px solid #F3F3F3;
    border-radius: 5px;
    box-shadow: 10px 5px 5px #EEE;
    flex-wrap: wrap;
    visibility: hidden;
}
.world_nav--link ul.sub-menu li {
    padding: 8px 10px;
    list-style: none;
}
.world_nav--link ul.sub-menu li a {
    font-weight: 500;
    font-size: 12px;
    color: #1c1c1cab;
    width: 116px;
}
.world_nav--link ul.sub-menu li a:hover {
    background-color: var(--buttonColor);
    color: var(--white);
}

.world_nav--link a.active,
.world_nav--link a:hover {background-color: var(--buttonColor);}
.world_nav--link a.active,
.world_nav--link a:hover {color: var(--white);}

@media (max-width: 1024px) {
    .world_nav {
        /*Transition time is increased to accomodate the height */
        max-height: 0px;
        overflow: hidden;
    }
    .world_nav .world_nav_bar {
        transition: max-height 0.3s linear;
        flex-direction: column;
    }
    .world_nav.display-world {max-height: 1500px;}

    .our_data--button {display: flex;}

    .data_ctn {
        gap: 20px;
        height: max-content;
        grid-template-columns: 1fr;
    }

    .general-data {
        position: relative;
        margin: 180px auto;
        margin-bottom: 346px;
        display: grid;
        /* place-items: center; */
        align-items: center;
        justify-content: center;
    }

    .data_info * {margin: 10px 0;}
    .data_info--avg .green svg{margin:0;}
    .data_info:last-child {
        grid-column: 1/-1;
        border-right: none;
    }
    .data_info--total {
        font-size: 31px;
        line-height: 40.3px;
    }
}

@media (max-width: 768px) {
    .hero_ctn {
        height: 100%;
        grid-template-rows: 0.5fr 2fr;
        align-items: center;
    }
    .hero_ctn h1 {color: #fff;}

    .header {
        position: fixed;
        top: 0;
        left: -100%;
        z-index: 500;
        background: #466af5;
        transition: 0.8s;
        width: 200px;
        height: 100%;
        overflow: auto;
    }
    .header_top,
    .header_bottom {
        width: 90%;
        height: auto;
        margin: 0 auto;
        border-bottom: none;
        flex-direction: column;
        align-items: flex-start;
    }
    .header.active {left: 0;}
    .header .header_top--logo {display: none;}
    .header_mobile--bars,
    .header_mobile--xmark {
        width: 24px;
        height: 24px;
        fill: var(--white);
    }
    .header_mobile--xmark {margin-top: 10px;}

    .list_top,
    .list_bottom {
        list-style: none;
        margin: 20px 0;
        gap: 20px;
        flex-direction: column;
    }
    .list_top--link a,
    .list_bottom--link a {
        font-size: 12px;
        line-height: normal;
    }

    /* SELECT COUNTRIES */
    .select_ctn {width: 100%;}
    .select_ctn--select,
    .select_ctn--submit {width: 100%;}
    .select_ctn--submit {font-size: 14px;}

    .form_countries--note br {display: none;}

    .data_info {text-align: center;}
}