@import url("https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500;600;700;800&family=Poiret+One&display=swap");
/** {
    font-family: 'Dubai', sans-serif !important;
}*/
* {
    font-family: "Jost", sans-serif;
}
.scroll-text {
    height: 8.5em;
    overflow: hidden;
}

.color-change {
    border-radius: 5px;
    font-size: 12px;
    padding: 3px 10px;
    cursor: pointer;
    color: #fff;
    background-color: #00A6FF;
    font-family: 'Arial Rounded MT';
    font-weight: bold;
    border: 1px solid #fff;
    box-shadow: 2px 2px 5px #AFE9FF;
    transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
}

    .color-change:hover {
        color: #006398;
        border: 1px solid #006398;
        box-shadow: 2px 2px 20px #AFE9FF;
    }

button.color-change {
    -webkit-appearance: none;
    -moz-appearance: none;
}

.blindnessviolet {
    background-color: #5b6fa4 !important;
    width: 0.5px !important;
    padding: 0.1px !important;
    cursor: pointer !important;
}

.blindnessblue {
    background-color: #0064ff !important;
    width: 0.5px;
    padding: 0.1px;
    cursor: pointer;
}

.blindnessmerron {
    background-color: #5D2C0B !important;
    width: 0.5px;
    padding: 0.1px;
    cursor: pointer;
}

.blindnessskyblue {
    background-color: #45BAB5 !important;
    width: 0.5px;
    padding: 0.1px;
    cursor: pointer;
}

/*navbar start*/
.menu ul li {
    height: 43px !important;
 /*   background-color: rgb(11, 60, 93);*/
    /*border-right: 1px solid white;*/
}

    .menu ul li ul {
        display: none;
    }

    .menu ul li:hover ul {
        display: block;
        width: 250px;
    }

    .menu ul li ul li {
        width: 330px;
    }

        .menu ul li ul li a {
            background-color: white !important;
            border-top: 1px solid white;
           color:black;
        }

            .menu ul li ul li a:hover {
                background-color: dimgrey !important;
                border-top: 1px solid white;
                color: white;
            }

    .menu ul li a {
        padding: 10px 20px !important;
        height: 43px !important;
        background-color: rgb(11, 60, 93);
        font-size: 16px;
        font-family: "Jost", sans-serif;
        font-weight:300;
    }

        .menu ul li a:hover {
            color: #ffffff;
            font-weight: 500;
            font-size: 13px;
            color: #E9CF51;
        }

    .menu ul li:hover {
        color: #E9CF51;
    }


    /*.menu ul li:not(:last-child) {
        border-right: 1px solid #fff;
    }*/
@media screen and (max-width: 768px) {
    .toggleMenu {
        display: block !important;
    }
    /*navbar end*/

    .english_cont.menu {
        display: block;
    }

        .english_cont.menu ul {
            width: 100%;
        }

            .english_cont.menu ul li {
                width: 100%;
            }
}

.nav {
    padding-left: 8%;
}


h2,h3,h4,h5 {
    font-family: "Jost", sans-serif;
}

/*navbar end*/
.breaking_news {
    float: left;
    width: 100%;
    font-family: arial;
    font-size: 14px;
    margin-bottom: 50px;
    background: #002147;
    /* box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4), 0 5px 10px rgba(0,0,0,0.5);*/
}

.border_hl {
    width: 936px;
    padding: 1px;
    background-color: #D6002A;
    background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAANYAKv///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=='), url('data:image/gif;base64,R0lGODlhAQABAPAAANYAKv///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=='), url('data:image/gif;base64,R0lGODlhAQABAPAAAP///////yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==');
    background-repeat: no-repeat;
    background-size: 0 2px, 0 100%, 0% 2px;
    background-position: top center, top center, bottom center;
    -webkit-animation: drawBorderFromCenter 4s infinite;
}

.label {
    float: left;
    padding: 15px 15px;
    background: #CD201F;
    color: #FFF;
    font-weight: bold;
    text-transform: uppercase;
}

/* Ripple magic */
.ripple {
    position: relative;
    overflow: hidden;
}

    .ripple:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(255, 255, 255, .5);
        opacity: 0;
        border-radius: 100%;
        transform: scale(1, 1) translate(-50%);
        transform-origin: 50% 50%;
    }

@keyframes ripple {
    0% {
        transform: scale(0, 0);
        opacity: 1;
    }

    20% {
        transform: scale(25, 25);
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scale(40, 40);
    }
}

/*.ripple::after {
    animation: ripple 1.5s ease-out infinite;
}*/
.bgcolor {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    height: 15vh;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}



.all_map {
    cursor: pointer;
    stroke: black;
    stroke-width: 10;
}

    .all_map:hover {
        background-color: aqua;
    }


path {
    stroke-width: 3px !important;
}

.chart {
    width: 100%;
    height: 550px;
}

@keyframes flash {
    0%,100% {
        opacity: 1;
        color: white; /* Initial color */
    }

    25% {
        opacity: 1;
        color: antiquewhite;
    }

    50% {
        opacity: 1;
        color: ghostwhite;
    }

    75% {
        opacity: 0;
        color: cyan /* Color change during animation */
    }

    100%,0% {
        opacity: 0;
        color: paleturquoise;
    }
}

.all {
    box-sizing: border-box;
    border: 2px solid #000;
    /*border:dotted;*/
}


svg {
    margin-left: 300rem !important;
    margin-top: -300rem !important;
}

.map {
    scale: 0.12;
    margin-left: -180%;
}

@media only screen and (min-width: 850px) {
    .map {
        max-height: 803px;
    }
}

@media only screen and (max-width: 850px) {
    svg {
        margin-left: 153rem !important;
        margin-top: -516rem !important;
        scale: 0.700 !important;
    }

    .map {
        max-height: auto;
    }

    .all {
        max-height: 718px;
    }
}

.number {
    color: blue;
}


@keyframes autoColorChange {
    0% {
        color: red;
    }

    25% {
        color: blue;
    }

    50% {
        color: green;
    }

    75% {
        color: orange;
    }

    100% {
        color: red;
    }
}

.auto-color-change {
    animation: autoColorChange 5s infinite;
}



.number {
    font-size: 4rem;
    color: black;
    font-weight: 700;
}




@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

.rainbow {
    position: relative;
    z-index: 0;
    overflow: hidden;
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    font-weight: bold;
}

.custom-col {
    height: 230px; /* Set the desired height */
    width: 300px; /* Set the desired width */
}

.rainbow::before {
    content: '';
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    /*background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);*/
    /* background-image:
        linear-gradient(#9100ff, #6700ef),
        linear-gradient(#54e8ff, #17a2b8), 
        linear-gradient(#004bd9, #004eff), 
        linear-gradient(#ff0099, #ff0099);*/
    animation: rotate 4s linear infinite;
    background-image: linear-gradient(#9000fd, #bb87ff), linear-gradient(#00deff, #95ebf9), linear-gradient(#0057fd, #7ba3fd), linear-gradient(#f70497, #ff95d5);
}

.rainbow::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: white;
    border-radius: 5px;
}


/* Apply the tada animation with infinite iteration on hover */
.custom-animation:hover {
    visibility: visible;
    animation: tada 1s infinite; /* Adjust the duration and other properties as needed */
}

.custom-animation1:hover {
    visibility: visible;
    animation: flip 1s infinite; /* Adjust the duration and other properties as needed */
}

.custom-animation2:hover {
    visibility: visible;
    animation: heartBeat 1s infinite; /* Adjust the duration and other properties as needed */
}

@keyframes blinker_custom {
    from {
        color: blue;
    }

    to {
        color: deeppink;
    }
}


.custom-swal-content {
    text-align: center;
}

.custom-dialog-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.your-custom-class {
    max-width: 100%;
    height: auto;
}

.swal2-close {
    background-color: #f80000;
    color: white;
    margin: 0;
}

    .swal2-close:hover {
        background-color: #f80000;
        color: white;
        margin: 0;
        opacity: 0.5 !important;
    }

    .swal2-close:focus {
        box-shadow: none;
    }

div:where(.swal2-container) button:where(.swal2-close) {
    background-color: transparent;
    outline: none;
}

.custom-dialog-video {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

.custom-video {
    width: 45%;
    min-width: 200px;
}

@media (max-width:768px) {
    div:where(.swal2-container).swal2-center > .swal2-popup {
        width: 80% !important;
    }
}