@media (min-width: 1300px) {
    .header-navigation__menu a {
        font-size: 14px;
        text-decoration: none;
    }
}

@media (min-width: 1600px) {
    .header-navigation__menu a {
        font-size: 18px;
        text-decoration: none;
    }
}

@media (max-width: 1500px) {
    .intro-block .card {
        max-width: 40vw !important;
    }
}

/* For screens smaller than 1300px */
@media (max-width: 992px) {
    .contact-item .bookmark-link span {
        left: 0;
    }
    .desktop-navbar {
        display: none;
    }

    .header-navigation, .mobile-navbar {
        display: block;
    }

    .header-navigation__menu-icon {
        display: block;
        position: absolute;
        right: 5%;
        top: 20px;
    }

    .two-column{
        column-count: 1;
    }

    .header-navigation__menu.open {
        display: flex;
    }

    .header-navigation__menu-icon span {
        transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
    }

    .header-navigation__menu-icon.open span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .header-navigation__menu-icon.open span:nth-child(2) {
        opacity: 0;
    }

    .header-navigation__menu-icon.open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .header-navigation__menu {
        display: none;
    }

    .header-navigation__menu.open {
        margin: 0 1rem;
        display: block;
    }

    .header-navigation__menu-icon {
        display: block;
    }

    .header-navigation__menu-icon span {
        background-color: $white; /* Replace $white with the appropriate color value */
    }

    .header-navigation__menu.open {
        display: block;
    }

    .header-navigation__menu.open {
        margin: 0!important;
    }

    .header-navigation__menu.open{
        padding-left: 1rem;
    }

    .nav-link {
        margin-bottom: 1rem;
        padding: 0;
    }

    .nav.logo {
    }

    .sticky {
        animation: none;
    }

    .dropdown-item {
        padding: 0 !important;
        font-weight: bold;
    }

    .collapse {
        transform: translateY(-20px);
    }

    .contact-item .bookmark-link:before {
        z-index: 1;
        top: 50%;
        left: 0;
        width: 0;
        height: 0;
    }

    .contact-item .bookmark-link {
        color: #000;
    }
}

@media (max-width: 992px) {
    .checkbox-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 1rem 0;
    }

    .intro-block .card {
        max-width: 100vw !important;
        position: static;
        transform: translateX(0);
    }
    #countries-chart {
        width: 100%;
        height: 50vh;
        border: 1px solid rgba(0, 0, 0, 0.8);
    }

    .footer{
        /*position: fixed;*/
        /*bottom: 0;*/
    }

    .footer .footer-logo{
        width: 200px;
    }

    .foldable-text {
        column-count: 1;
    }

    .more-details{
        margin-bottom: .75rem;
    }

    .flag-block{
        display: none;
    }

    .mobile-flag{
        display: block !important;
    }

    .mobile-item{
        display: block;
    }

    .desktop-item{
        display: none;
    }

    .map-radar-timeline-container #filterMenu{
        right: 10px;
        transform: translateY(-60%);
        font-size: 20pt;
    }
}

@media (max-width: 767px) {
    .nav-menu {
        flex-direction: column;
    }

    .nav-item {
        position: static;
    }

    .dropdown-menu {
        position: static;
        display: none;
        background-color: transparent;
        padding: 0;
    }

    .nav-item:hover .dropdown-menu {
        display: block;
    }

    .dropdown-item:hover {
        background-color: transparent;
    }

    .nav.logo {
        max-height: 60px;
    }


}


/* Add this CSS to your existing styles to adjust the layout for smaller screens */
@media screen and (max-width: 600px) {
    /* Adjust font sizes for mobile */
    .amcharts-axis-label {
        font-size: 12px;
    }

    .amcharts-graph-column .amcharts-graph-label {
        font-size: 10px;
    }

    .amcharts-value-axis .amcharts-value-axis-label {
        font-size: 12px;
    }

    /* Hide the zoom button on mobile */
    .amcharts-zoom-out {
        display: none;
    }

    /* Adjust padding for better spacing on mobile */
    .amcharts-RadarChart {
        padding: 10px;
    }

    /* Adjust the slider size for mobile */
    .amcharts-slider {
        height: 10px;
    }

    /* Hide scrollbar on mobile */
    .amcharts-RadarChart .amcharts-Scrollbar-0 {
        /*display: none;*/
    }

    #radar_timeline {
        width: 100vw;
        min-height: 60vh
        /*height: 100vh;*/
    }
}

/* Add a media query for mobile screens */
@media (max-width: 767px) {
    .dropdown-menu.show {
        display: block; /* Show the filter on mobile screens */
        width: 100vw; /* Make the filter full-screen width on mobile */
        padding: 0;
        margin: 0;
        border-radius: 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ffffff; /* Change this to the desired background color */
        overflow-y: scroll;
        overflow-x: hidden;
    }


    .filter-dropdown-menu {
        display: none; /* Hide the filter dropdown menu on larger screens */
    }

    .dropdown.show .fa-filter {
        display: inline-block; /* Show the filter icon when the dropdown is open on mobile */
    }

    .checkbox-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr); /* Adjust the number of columns as needed */
        gap: 10px; /* Adjust the gap between checkboxes */
    }
}