@font-face {
    font-family: 'Roboto';
    src: url(../fonts/Roboto.ttf);
}
body{
    font-family: 'Roboto';
}
.locked{
    overflow-y: auto;
}
.white-bg{
    background: #fafafa;
}
.your-location {
    color: #fff;
    margin: 0 10px 0 5px;
    font-weight: 600;
}

.main-menu .location-block svg {
    width: 14px;
    height: auto;
}

.change-location:hover {
    color: #409AC7;
}

.main-menu .main-menu__logo .logo {
    max-width: 60px;
}

.main-menu {
    padding: 5px 0;
    border-radius: 0;
}

.page-content {
    margin: 0;
    padding: 0;
}

.sidebar-nav__wrapper {
    display: none;
}

.main-menu__list {
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.sub-menu {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    list-style-type: none;
    padding: 10px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    transform-origin: center top 0;
    opacity: 0;
    visibility: hidden;
    transform: rotateX(90deg);
    transition: all .3s ease-in-out;
    z-index: 4;
}

.main-menu__list .dropdown:hover .sub-menu {
    visibility: visible;
    opacity: 1;
    transform: rotateX(0);
}

.main-menu__list li a {
    padding: 9px 15px;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 16px;
    line-height: 21px;
}
.home .main-menu:not(.fixed) .main-menu__list li a{
    color: #fff;
}
.main-menu .location-block{
    padding: 4px 10px;
    background: #409AC7;
    border-radius: 6px;
    color: #000;
}
.main-menu .location-block:hover{
    background: #45474F;
}
.main-menu .location-block svg path{
    fill: #fff;
}
.main-menu .location-block span+ svg path{
    fill: none;
    stroke: #fff
}
.main-menu__list li:hover>a {
    color: #409AC7;
}

.main-menu__list li i {
    margin-left: 10px;
}

.main-menu__list .current>a {
    color: #409AC7;
}

.main-menu__list .dropdown {
    position: static;
}

.main-menu__list .dropdown:hover>a i {
    transform: rotate3d(1, 0, 0, 180deg);
}
.main-menu .main-menu__nav{
    display: block;
}
.main-menu .main-menu__right {
    justify-content: end;
}

.main-menu__list li .sub-menu a {
    color: #000;
    padding: 5px 14px;
}
.home .main-menu:not(.fixed) .main-menu__list li .sub-menu a{
    color: #000;
}
.home .main-menu:not(.fixed) .main-menu__list li .sub-menu a:hover{
    color: #fff;
}
.sub-menu span.heading {
    padding: 5px 20px;
    font-weight: 600;
    height: 55px;
    color: #409AC7;
    font-size: 16px;
}


.main-menu__list li:hover .sub-menu a {
    background: transparent;
}

.main-menu__list li .sub-menu a:hover {
    color: #fff;
    background: #409AC7;
}
header{
    position: fixed;
    top: 0;
    width: 100%;
    background: transparent;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    z-index: 99;
}
.home .main-menu{
    background: transparent;
}
.main-menu.fixed{
    background: #fff;
}
.home .main-menu:not(.fixed) .sidebar-nav__toggler{
    color: #fff;
}
.home .main-menu:not(.fixed) .main-menu__right .icon-btn svg path {
    fill: #fff;
}
/* MAIN CSS */
.scroll-top{
    z-index: 4;
}
.highcharts-axis-title{
    display: none;
}
.breadcrumb-section{
    margin-top: 71px;
    background: #fafafa;
}
.breadcrumb-section+.banner{
    margin-top: 0;
}
.breadcrumb{
    margin: 0;
    padding: 10px 0;
}
.breadcrumb-item.active{
    color: #409AC7;
    font-weight: 600;
}
.banner {
    position: relative;
    background-image: url(../media/banner.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    padding-top: 120px;
}
.banner::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(0, 0, 0,.6);
}
@keyframes rain {
    0% {
        background-position: 0% 0%;
    }

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

.banner .rain,
.banner .storm {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    right: 0;
    background-image: url(../media/rain-background.png);
    animation: rain 1s linear infinite;
    z-index: 1;
}

@keyframes lightining {

    0% {
        opacity: 0;
    }

    20% {
        opacity: 0;
    }

    21% {
        opacity: 1;
    }

    25% {
        opacity: 0;
    }

    30% {
        opacity: 0;
    }

    31% {
        opacity: 1;
    }

    35% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.banner .storm::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../media/lightining.png);
    top: -100px;
    transform: rotate(180deg);
    animation: lightining 4s linear infinite;
    opacity: 1;
    left: 0;
    right: 0;
    width: 100%;
    top: 0;
}
.banner .clouds {
    opacity: 0.4;
    pointer-events: none;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    z-index: 1;
}
.banner .clouds-1,.banner .clouds-2,.banner .clouds-3 {
    background-repeat: repeat-x;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 500px;
}
.banner .clouds-1 {
    background-image: url(../media/clouds_2.png);
    animation: clouds-loop-1 20s infinite linear;
}
@keyframes clouds-loop-1 {
    100% {
        background-position: -1000px 0;
    }
}
.banner .clouds-2 {
    background-image: url(../media/clouds_1.png);
    animation: clouds-loop-2 15s infinite linear;
}
@keyframes clouds-loop-2 {
    100% {
        background-position: -1000px 0;
    }
}
.clouds-3 {
    background-image: url(../media/clouds_3.png);
    animation: clouds-loop-3 17s infinite linear;
}
@keyframes clouds-loop-3 {
    100% {
        background-position: -1579px 0;
    }
}
.forecast-box .img-block img {
    width: 80px;
}

.forecast-box .img-block span {
    display: block;
    margin-top: 5px;
}

.forecast-box .img-block {
    text-align: center;
}

.current-forecast {
    position: relative;
    z-index: 2;
}

.current-forecast .forecast-box {
    backdrop-filter: blur(30px);
    box-shadow: #1a1a1a4a 1px 2px 20px;
    color: #fff;
    border-radius: 30px;
    padding: 15px;
}
.current-forecast .current-precipitation img,
.current-forecast .current-rain img{
    width: 16px;
    height: 16px;
}
.current-forecast .current-precipitation{
    padding-right: 15px;
}
.current-forecast .current-rain{
    padding-left: 15px;
}
.forecast-box .current-location {
    font-size: 16px;
    font-weight: 600;
}
.forecast-box .current-location h1{
    font-size: 16px;
}
.forecast-box .top,
.forecast-box .center,
.forecast-box .bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.forecast-box .top,
.forecast-box .center {
    margin-bottom: 30px;
}

.forecast-box .date {
    background: #45474F;
    padding: 3px 14px;
    border-radius: 20px;
}

.forecast-box .current-temp {
    font-size: 50px;
    text-align: center;
    font-weight: 600;
    line-height: normal;
    letter-spacing: unset;
    margin-bottom: 10px;
}
.forecast-box .box-location{
    font-size: 18px;
    font-weight: 600;
}
.forecast-box .current-temp span {
    font-size: 14px;
    display: block;
    font-weight: 300;
}

.forecast-box .bottom {
    text-align: center;
}

.grid-forecast {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 20px;
    row-gap: 20px;
}
.grid-forecast .forecast-box {
    background: #fff;
    color: #000;
    backdrop-filter: unset;
    text-align: center;
    padding: 15px;
    border-radius: 30px;
    box-shadow: #1a1a1a4a 1px 2px 20px;
}

.forecast-box .box-precipitation img,
.forecast-box .box-rain img {
    width: 16px;
}

.grid-forecast .forecast-box .img-block {
    margin: 15px 0;
}

.forecast-box .box-precipitation,
.forecast-box .box-rain,
.forecast-box .box-temp {
    margin-bottom: 5px;
}

.banner-title {
    color: #fff;
    margin-bottom: 30px;
    font-size: 32px;
    font-weight: 600;
    position: relative;
    z-index: 2;
}

.filter {
    position: relative;
    z-index: 2;
    margin-bottom: 30px;
    overflow: auto;
}

.filter-items {
    display: flex;
    align-items: center;
    width: max-content;
}

.filter-link {
    background: #fff;
    padding: 5px 20px;
    border-radius: 20px;
    margin-right: 15px;
    box-shadow: #1a1a1a4a 1px 2px 20px;
    transition: all .3s ease-in-out;
}

.filter-link:hover,
.filter-link.active {
    background: #409AC7;
    color: #fff;
}
.main-content .filter{
    padding: 5px 0;
}
.main-content .filter-link{
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}
.main-content .current-forecast{
    position: relative;
    margin-bottom: 30px;
    background-image: url(../media/banner.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    border-radius: 12px;
}
.main-content .current-forecast .forecast-box{
    border-radius: 12px;
}
.main-content .current-forecast::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(0, 0, 0, .4);
}
.forecast-box .bottom > div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.main-content .forecast-box .center{
    justify-content: space-around;
}
.main-content h3{
    font-size: 28px;
}
.city-sec .grid-forecast{
    grid-template-columns: repeat(5,1fr);
    column-gap: 30px;
    row-gap: 30px;
}
.city-sec .grid-forecast-4{
    grid-template-columns: repeat(4,1fr);
}
.city-sec:not(.story-sec) .grid-forecast .forecast-box{
    box-shadow: 10px 9px 70px 0 rgba(146,146,146,.40);
    background: #409AC7;
    color: #fff;
}
.city-sec.story-sec .grid-forecast .forecast-box{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.list-forecast{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    column-gap: 20px;
    row-gap: 20px;
    padding-left: 3px;
    padding-right: 3px;
    padding-bottom: 20px;
}
.list-forecast.all{
    height: auto;
}
.list-forecast .forecast-box{
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background: #EFF3F9;
    border-radius: 12px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.list-forecast .forecast-box .img-block img{
    width: 45px;
    margin-right: 10px;
}
.list-forecast .forecast-box .box-location{
    font-weight: 400;
}
.show-more{
    display: block;
    width: fit-content;
    margin: 0 auto;
    margin-top: 20px;
    padding: 5px 20px;
    border-radius: 5px;
    background: #409AC7;
    color: #fff;
    cursor: pointer;
    transition: all .3s ease-in-out;
}
.show-more:hover{
    background: #45474F;
}
.show-more.hide .show-text,
.show-more .hide-text{
    display: block;
}
.show-more .show-text,
.show-more.hide .hide-text{
    display: none;
}
.blog-card{
    padding: 10px;
}
.blog-card .h5{
    font-size: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
    height: 43px;
}
.blog-card figure{
    margin-bottom: 10px;
}
.blog-card .date{
    margin-bottom: 5px;
}
.blog-card .date img{
    width: 14px;
}
.pagination{
    justify-content: center;
    margin-top: 25px;
}
.pagination .page-link{
    color: #45474F;
}
.pagination .page-link.active,.pagination .page-link:hover{
    background: #409AC7;
    color: #fff;
}
.main-menu .search-field {
    width: 500px;
}
.blog-category{
    position: sticky;
    top: 70px;
    padding: 10px 0;
    background: #fff;
    z-index: 10;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}
.blog-category ul{
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}
.blog-category ul a{
    margin-right: 20px;
}
.blog-category ul a.active{
    font-weight: 600;
    color: #409AC7;
}
.chart-box{
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.175);
}
.chart-box .chart-item{
    width: 100%;
    height: 200px;
}
.chart-box #chartUV{
    height: auto;
}
.remove-menu{
    display: none;
}
.chart-box .chart-item:not(#chartUV) .highcharts-axis{
    display: none;
}
.chart-box .chart-item .highcharts-credits,
.chart-box .chart-item:not(#chartUV) .highcharts-axis-labels{
    display: none;
}
.chart-box .chart-label{
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 10px 10px 0 10px;
}
.chart-box .chart-label img{
    width: 24px;
    height: 24px;
}
.chart-box .chart-label .label-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.fixed-sidebar{
    position: sticky;
    top: 80px;
}
.day-forecast{
    margin-top: 25px;
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    border: 1px solid rgba(0, 0, 0, 0.175);
    margin-bottom: 25px;
}
.day-forecast .forecast-item{
    background: #EFF3F9;
    color: #000;
    padding: 10px;
    border-radius: 6px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.day-forecast .forecast-item .heading{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.day-forecast .forecast-item .heading span{
    color: #000;
}
.day-forecast .forecast-item .heading>div{
    display: flex;
    align-items: center;
}
.day-forecast .forecast-item .middle img{
    width: 30px;
    height: 30px;
}
.day-forecast .forecast-item .right img{
    width: 15px;
}
.day-forecast .forecast-item .left .temp{
    display: flex;
    align-items: center;
}
.day-forecast .forecast-item .left .fa-chevron-down{
    margin-right: 10px;
    transition: all .3s ease-in-out;
}
.day-forecast .forecast-item.open .left .fa-chevron-down{
    transform: rotate3d(1, 0, 0, 180deg);
}
.day-forecast .forecast-item .left .temp-max{
    margin-right: 10px;
    color: #dc3545;
}
.day-forecast .forecast-item .left .temp-min{
    color: #0dcaf0;
}
.day-forecast .forecast-item .left .time{
    margin-right: 15px;
}
.day-forecast .forecast-item .right>div:not(:last-child){
    margin-right: 10px;
}
.day-forecast .forecast-item .icon img{
    width: 30px;
    height: 30px;
    margin-right: 15px;
}
.day-forecast .forecast-item .icon i{
    width: 30px;
    height: 30px;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}
.day-forecast .forecast-item .body .item{
    display: flex;
    align-items: center;
}
.day-forecast .forecast-item .body .info span {
    display: block;
}
.day-forecast .forecast-item .body .info span.main{
    font-weight: 600;
}
.day-forecast .forecast-item .body{
    margin-top: 20px;
    display: none;
}
.day-forecast .forecast-item:first-child .body{
    display: block;
}
.day-forecast .list-forecast{
    overflow: auto;
    grid-template-columns: repeat(1,1fr);
    padding-right: 15px;
    padding-bottom: 15px;
}
.day-forecast .forecast-item .body-items{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    column-gap: 20px;
    row-gap: 20px;
}
.card{
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 25px;
}
.air-quality_content{
    display: flex;
    align-items: center;
}
.air-quality .content-title{
    margin-right: 20px;
}
.air-quality .content-title span{
    width: 100px;
    height: 100px;
    border-radius: 52%;
    display: flex
;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #fff;
    text-align: center;
    padding: 13px;

}
.air-quality .content-title span.good{
    background: #ABD162;
}
.air-quality .content-title span.moderate{
    background: #F7D460;
}
.air-quality .content-title span.bad{
    background: #FC9956;
}
.air-quality .content-title span.unhealthy{
    background: #F6676B;
}
.air-quality .content-title span.very-unhealthy{
    background: #A37DB8;
}
.air-quality .content-title span.hazadous{
    background: #A07684;
}
.air-quality .content-desc strong.good{
    color: #ABD162;
}
.air-quality .content-desc strong.moderate{
    color: #F7D460;
}
.air-quality .content-desc strong.bad{
    color: #FC9956;
}
.air-quality .content-desc strong.unhealthy{
    color: #F6676B;
}
.air-quality .content-desc strong.very-unhealthy{
    color: #A37DB8;
}
.air-quality .content-desc strong.hazadous{
    color: #A07684;
}
.air-quality .content-desc strong{
    display: block;
    margin-bottom: 10px;
    font-size: 18px;
}
.air-quality_list{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    row-gap: 15px;
    margin-top: 15px;
}
.air-quality_list .title{
    font-weight: 600;
    font-size: 16px;
}
.air-quality_detail table{
    margin-bottom: 0;
}
.air-quality_detail table td{
    vertical-align: middle;
}
.air-quality_detail table th{
    font-size: 18px;
    vertical-align: middle;
}
.air-quality_detail table td:first-child{
    width: 70%;
}
.air-quality_detail table td:last-child{
    width: 30%;
    text-align: right;
}
.air-quality_detail table td:first-child .text{
    width: 20%;
}
.air-quality_detail table td:first-child .desc{
    width: 70%;
}
.air-quality_detail table td:first-child .text strong{
    position: relative;
    font-size: 18px;
    display: block;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.air-quality_detail table .good td:first-child .text strong{
    color: #ABD162;
}
.air-quality_detail table .moderate td:first-child .text strong{
    color: #F7D460;
}
.air-quality_detail table .bad td:first-child .text strong{
    color: #FC9956;
}
.air-quality_detail table .unhealthy td:first-child .text strong{
    color: #F6676B;
}
.air-quality_detail table .very-unhealthy td:first-child .text strong{
    color: #A37DB8;
}
.air-quality_detail table .hazadous td:first-child .text strong{
    color: #A07684;
}
.air-quality_detail table td:first-child .text strong::after{
    content:'';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
}
.air-quality_detail table .good td:first-child .text strong::after{
    background: #ABD162;
}
.air-quality_detail table .moderate td:first-child .text strong::after{
    background: #F7D460;
}
.air-quality_detail table .bad td:first-child .text strong::after{
    background: #FC9956;
}
.air-quality_detail table .unhealthy td:first-child .text strong::after{
    background: #F6676B;
}
.air-quality_detail table .very-unhealthy td:first-child .text strong::after{
    background: #A37DB8;
}
.air-quality_detail table .hazadous td:first-child .text strong::after{
    background: #A07684;
}
.air-quality_detail table td:last-child .para{
    font-size: 19px;
    font-weight: 600;
}
.air-quality_detail table .good td:last-child .para{
    color: #ABD162;
}
.air-quality_detail table .moderate td:last-child .para{
    color: #F7D460;
}
.air-quality_detail table .bad td:last-child .para{
    color: #FC9956;
}
.air-quality_detail table .unhealthy td:last-child .para{
    color: #F6676B;
}
.air-quality_detail table .very-unhealthy td:last-child .para{
    color: #A37DB8;
}
.air-quality_detail table .hazadous td:last-child .para{
    color: #A07684;
}
.quality-detail .thangdo{
    display: grid;
    grid-template-columns: repeat(6,1fr);
    text-align: center;
}
.quality-detail .thangdo .icon{
    padding: 5px;
    color: #fff;
    margin-bottom: 10px;
}
.quality-detail .thangdo .good .icon{
    background: #ABD162;
}
.quality-detail .thangdo .moderate .icon{
    background: #F7D460;
}
.quality-detail .thangdo .bad .icon{
    background: #FC9956;
}
.quality-detail .thangdo .unhealthy .icon{
    background: #F6676B;
}
.quality-detail .thangdo .very-unhealthy .icon{
    background: #A37DB8;
}
.quality-detail .thangdo .hazadous .icon{
    background: #A07684;
}
.quality-detail .thangdo .item .desc {
    padding: 0 5px;
    font-weight: 600;
}
.uv-card_content{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.uv-card_content .uv-item{
    flex: 1;
    text-align: center;
}
.uv-card_content .uv-item .uv-icon{
    padding: 4px 0;
    font-size: 16px;
}
.uv-card_content .uv-item .uv-para{
    font-weight: 600;
}
.uv-card_content .uv-item.low .uv-icon{
    color: #198754;
}
.uv-detail .uv-card_content .uv-item.low .uv-icon{
    color: #fff;
}
.uv-detail .uv-card_content .uv-item.low{
    background: #198754;
}
.uv-detail .uv-card_content .uv-item.low+.uv-desc{
    color: #198754;
}
.uv-card_content .uv-item.moderate .uv-icon{
    color: #ffc107;
}
.uv-detail .uv-card_content .uv-item.moderate .uv-icon{
    color: #fff;
}
.uv-detail .uv-card_content .uv-item.moderate{
    background: #ffc107;
}
.uv-detail .uv-card_content .uv-item.moderate+.uv-desc{
    color: #ffc107;
}
.uv-card_content .uv-item.high .uv-icon{
    color: #fd7e14;
}
.uv-detail .uv-card_content .uv-item.high .uv-icon{
    color: #fff;
}
.uv-detail .uv-card_content .uv-item.high{
    background: #fd7e14;
}
.uv-detail .uv-card_content .uv-item.high+.uv-desc{
    color: #fd7e14;
}
.uv-card_content .uv-item.very-high .uv-icon{
    color: #dc3545;
}
.uv-detail .uv-card_content .uv-item.very-high .uv-icon{
    color: #fff;
}
.uv-detail .uv-card_content .uv-item.very-high{
    background: #dc3545;
}
.uv-detail .uv-card_content .uv-item.very-high+.uv-desc{
    color: #dc3545;
}
.uv-card_content .uv-item.extreme .uv-icon{
    color: #a92e7f;
}
.uv-detail .uv-card_content .uv-item.extreme .uv-icon{
    color: #fff;
}
.uv-detail .uv-card_content .uv-item.extreme{
    background: #a92e7f;
}
.uv-detail .uv-card_content .uv-item.extreme+.uv-desc{
    color: #a92e7f;
}
.highcharts-plot-band-label {
    margin-right: 20px;
}
.uv-detail .uv-card_content{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    column-gap: 20px;
}
.uv-detail .uv-card_content .uv-item{
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 15px;
    padding: 10px;
    border-radius: 12px;
    color: #fff;
}
.uv-detail .uv-card_content .uv-text{
    display: flex;
    align-items: center;
}
.uv-detail .uv-card_content .uv-icon{
    padding: 0;
    font-size: 40px;
    line-height: normal;
    border-right: 1px solid #fff;
}
.uv-detail .uv-card_content .uv-para{
    margin-left: 15px;
    font-weight: 600;
    font-size: 40px;line-height: normal;
}
.uv-detail .uv-card_content .uv-desc{
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border-left: 1px solid rgb(204, 204, 204);
}
.uv-detail .chart-box{
    margin-bottom: 25px;
}
.daily-uv_list .list-item {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    column-gap: 10px;
    font-weight: 600;
    margin-bottom: 15px;
}
.daily-uv_list .list-item .item-temp{
    display: flex;
    align-items: center;
    margin-right: 10px;
}
.daily-uv_list .list-item .item-temp img{
    width: 20px;
    height: 20px;
}
.daily-uv_list .list-item .item-para{
    display: flex;
    align-items: center;
}
.daily-uv_list .list-item .item-para .bar{
    position: relative;
    width: 160px;
    height: 8px;
    border-radius: 20px;
    margin-right: 10px;
    background: linear-gradient(90deg,#198754 0,#ffc107 19.52%,#fd7e14 42.63%,#dc3545 72.51%,#a92e7f 100%);
}
.daily-uv_list .list-item .item-para .bar .ball{
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 12px;
    width: 12px;
    border-radius: 100%;
    background: #fff;
    box-shadow: 0 0 0 1px #ccc;
}
.uv-detail .thangdo-card .thangdo{
    display: grid;
    grid-template-columns: repeat(5,1fr);
}
.uv-detail .thangdo-card .thangdo .item{
    text-align: center;
}
.uv-detail .thangdo-card .thangdo .item .icon{
    padding: 5px;
    color: #fff;
    margin-bottom: 10px;
}
.uv-detail .thangdo-card .thangdo .item.low .icon{
    background: #198754;
}
.uv-detail .thangdo-card .thangdo .item.moderate .icon{
    background: #ffc107;
}
.uv-detail .thangdo-card .thangdo .item.high .icon{
    background: #fd7e14;
}
.uv-detail .thangdo-card .thangdo .item.very-high .icon{
    background: #dc3545;
}
.uv-detail .thangdo-card .thangdo .item.extreme .icon{
    background: #a92e7f;
}
.uv-detail .thangdo-card .thangdo .item .desc{
    padding: 0 5px;
    font-weight: 600;
}
.sunrise-sunset img{
    width: 100px;
}
.sunrise-sunset{
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    background-image: url(../media/ocean.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
.sunrise-sunset>div{
    position: relative;
    z-index: 2;
}
.sunrise-sunset::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, .4);
    z-index: 1;
}
.sunrise-sunset .text{
    font-size: 18px;
    color: #fff;
}
.sunrise-sunset .text p{
    margin:  5px 0 0 0;
    font-size: 16px;
} 
.blog-detail .meta{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.blog-detail .meta>div{
    margin-right: 20px;
}
.blog-detail .meta .date{
    position: relative;
}
.blog-detail .meta .date::after{
    content: '.';
    display: block;
    position: absolute;
    bottom: 0;
    right: -13px;
    color: #000;
    font-size: 28px;
    line-height: normal;
}
.blog-detail .toc{
    background: #fff;
    padding: 15px;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    margin-bottom: 20px;
    width: fit-content;
}
.blog-detail .toc h4{
    margin-bottom: 15px;
}
.blog-detail .toc ul{
    padding: 0;
    margin: 0;
}
.blog-detail .toc ul li{
    list-style-type: decimal;
    list-style-position: inside;
    margin-bottom: 5px;
}
.blog-detail .toc ul li a{
    color: #409AC7;
    font-size: 16px;
}
.blog-detail .toc ul li a:hover,.blog-detail .toc ul li a:focus{
    text-decoration: underline;
}
.blog-detail .quote{
    padding: 15px;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    margin-bottom: 15px;
}
.blog-detail h4{
    margin-bottom: 15px;
    scroll-margin-top: 120px;
}
.blog-detail p{
    margin-bottom: 15px;
}
.blog-detail figure{
    margin-bottom: 15px;
}
.blog-detail figure img{
    width: 100%;
}
.blog-detail figcaption{
    padding-top: 5px;
    font-weight: 600;
    font-style: italic;
    text-align: center;
}
.blog-detail .detail-content{
    position: relative;
}
.blog-detail .fixed-toc{
    position: fixed;
    top: 6%;
    /* left: 100%; */
    /* margin-right: -65px; */
    width: fit-content;
    z-index: 9;
    display: none;
    right: 30px;
}
.blog-detail .fixed-toc .toc{
    position: absolute;
    bottom: 100%;
    right: 0;
    width: 500px;
    margin-bottom: 0;
    border-radius: 8px;
    border-bottom-right-radius: 0;
    display: none;
}
.blog-detail .fixed-toc.open .toc{
    display: block;
}
.blog-detail .fixed-toc .toc-toggler{
    display: block;
    background: #fff;
    margin-left: auto;
    width: fit-content;
    padding: 10px 15px;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    font-size: 18px;
    color: #fff;
    background: #409AC7;
    cursor: pointer;
    transition: all .3s ease-in-out;
}
.blog-detail .fixed-toc .toc-toggler i{
    transition: all .3s ease-in-out;
}
.blog-detail .fixed-toc.open .toc-toggler i{
    transform: rotate(45deg);
}
.blog-detail .fixed-toc.open .toc-toggler{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background: #ff4500;
}
.blog-detail .fixed-share{
    position: fixed;
    top: 76%;
    /* left: 100%; */
    /* margin-right: -70px; */
    right: 30px;
    background: #fff;
    border-radius: 8px;
    padding: 5px 5px 0 5px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    width: max-content;
    text-align: center;
    z-index: 9;
    display: none;
}
.blog-detail .fixed-share .title{
    font-weight: 600;
    margin-bottom: 10px;
}
.blog-detail .fixed-share ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.blog-detail .fixed-share ul a{
    width: 24px;
    height: 24px;
    color: #fff;
    border-radius: 50%;
    margin: 0 auto;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
.blog-detail .fixed-share ul a.twitter{
    background: #1DA1F2;
}
.blog-detail .fixed-share ul a.facebook{
    background: #4267B2;
}
.blog-detail .fixed-share ul a.link{
    background: #FFA500;
}
.blog-detail .tag-list{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.blog-detail .tag-list li{
    padding: 4px 10px;
    border-radius: 5px;
    background-color: #fff;
    margin-right: 10px;
    margin-bottom: 10px;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}
@media only screen and (max-width: 1199.98px){
    .main-menu__nav{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: transparent;
        padding: 15px;
        transition: all .3s ease-in-out;
        transform: translateX(100%);
        z-index: 9999;
    }
    .remove-menu{
        display: flex;
    }
    .main-menu_overlay{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        z-index: -1;
        display: block;
        background-color: #0C0C0D;
        opacity: 0.8;
        cursor: url(../media/close.png), auto;
    }
    .main-menu__nav.open {
        transform: translateX(0);
    }
    .main-menu__nav .container{
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
        height: 100%;
    }
    .main-menu__list{
        position: relative;
        flex-direction: column;
        align-items: start;
        justify-content: start;
        padding: 0;
        width: 320px;
        background: #fff;
        height: 100%;
        margin-left: auto;
        border-radius: 14px;
    }
    .main-menu__list li{
        width: 100%;
        border-bottom: 1px solid #dee2e6;
    }
    .main-menu__list li a{
        color: #45474F;
    }
    .main-menu__list li:nth-child(2){
        margin-top: 40px;
    }
    .main-menu__list li.remove-menu{
        border-bottom: 0;
        width: 30px;
        height: 30px;
        position: absolute;
        top: 0;
        right: 0;
    }
    .main-menu__list li.remove-menu span{
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        height: 100%;
    }
    .main-menu__list li.remove-menu span i{
        margin: 0;
    }
    .sub-menu span.heading{
        height: auto;
    }
    .sub-menu{
        position: static;
        grid-template-columns: 100%;
        height: 300px;
        overflow: auto;
        visibility: unset;
        opacity: unset;
        transform: rotateX(0) translateX(0);
        width: 100%;
        display: none;
    }
    .main-menu__list .dropdown:hover .sub-menu {
        visibility: unset;
        opacity: unset;
        transform: rotateX(0) translateX(0);
    }
    .main-menu__list li .sub-menu li{
        border-bottom: none;
    }
    .main-menu__list li .sub-menu li:hover a{
        background: transparent;
        color: #45474F;
    }
    .main-menu__list li .sub-menu li:hover a:hover{
        background: #409AC7;
        color: #fff;
    }
    .main-menu__list li a{
        justify-content: space-between;
    }
    .main-menu__list .dropdown:hover>a i{
        transform: none;
    }
    .main-menu__list .dropdown.dropdown-open>a i{
        transform: rotate3d(1, 0, 0, 180deg);
    }
    .main-menu__list .dropdown-open .sub-menu{
        display: grid;
    }
    .sidebar-nav__toggler{
        font-size: 20px;
    }
    .main-menu .main-menu__right .icon-btn svg{
        width: 20px;
        height: 20px;
    }
    .main-menu__logo{
        flex: auto;
    }
    .main-menu .main-menu__right{
        flex: auto;
    }
    .breadcrumb-section{
        margin-top: 70px;
    }
    .blog-category{
        top: 70px;
    }
}
@media only screen and (max-width: 991.98px){
    .current-forecast .col-lg-5 .forecast-box{
        margin-bottom: 30px;
    }
    .city-sec .grid-forecast{
        grid-template-columns: repeat(4,1fr);
    }
    .container{
        max-width: 100%;
    }
    .forecast-box .top{
        flex-wrap: wrap;
    }
    .blog-detail .fixed-share{
        margin-right: 0;
    }
    .blog-detail .fixed-toc{
        margin-right: 0;
    }
}
@media only screen and (max-width: 767.98px){
    .banner{
        padding-top:80px
    }
    .grid-forecast{
        grid-template-columns: repeat(2,1fr);
    }
    .city-sec .grid-forecast{
        grid-template-columns: repeat(3,1fr);
    }
    .list-forecast{
        grid-template-columns: repeat(2,1fr);
    }
    .main-content h3{
        font-size: 24px;
    }
    .blog-category ul{
        width: max-content;
    }
    .blog-category{
        overflow: auto;
    }
    .daily-uv_list .list-item{
        grid-template-columns: 1fr;
    }
    .daily-uv_list .list-item:not(:last-child){
        border-bottom: 1px solid rgba(0, 0, 0, 0.175);
        padding-bottom: 10px;
    }
    .air-quality_detail table th{
        font-size: 16px;
    }
}
@media only screen and (max-width: 575.98px){
    .city-sec .grid-forecast{
        grid-template-columns: repeat(2,1fr);
        column-gap: 20px;
        row-gap: 20px;
    }
    .daily-uv_list .list-item .item-para .bar{
        width: 140px;
    }
    .main-menu__nav.open{
        padding: 0;
    }
    .main-menu__list{
        margin: 0;
        border-radius: 0;
        width: 100%;
    }
    .chart-box .chart-label .label-item{
        font-size: 9px;
    }
    .chart-box .chart-label img {
        width: 18px;
        height: 18px;
    }
    .list-forecast{
        grid-template-columns: repeat(1,1fr);
    }
    .main-menu .main-menu__logo .logo{
        max-width: 40px;
    }
    .forecast-box .bottom{
        font-size: 9px;
    }
    .breadcrumb-section{
        margin-top: 50px;
    }
    .blog-category{
        top: 50px;
    }
    .day-forecast .forecast-item .middle img{
        width: 15px;
        height: 15px;
    }
    .day-forecast .forecast-item{
        font-size: 10px;
        text-align: center;
    }
    .day-forecast .forecast-item .left .time{
        margin-right: 5px;
    }
    .day-forecast .forecast-item .left .temp-max{
        margin-right: 5px;
    }
    .day-forecast .forecast-item .left .fa-chevron-down{
        margin-right: 5px;
    }
    .day-forecast .forecast-item .icon i,.day-forecast .forecast-item .icon img{
        margin: 0;
        width: 20px;
        height: 20px;
        font-size: 20px;
    }
    .day-forecast .forecast-item .body .item{
        flex-direction: column;
        justify-content: center;
    }
    .uv-detail .thangdo-card .thangdo {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 15px;
    }
    .quality-detail .thangdo{
        grid-template-columns: repeat(3,1fr);
        row-gap: 15px;
    }
    .uv-detail .uv-card_content{
        grid-template-columns: 1fr;
        row-gap: 15px;
    }
    .uv-detail .uv-card_content .uv-desc{
        border: none;
    }
    .air-quality_detail table th{
        font-size: 14px;
    }
    .air-quality_detail table td:first-child .text,
    .air-quality_detail table td:first-child .desc{
        width: 100%;
    }
    .air-quality_detail table td:first-child .text strong{
        margin-bottom: 5px;
        padding-bottom: 5px;
    }
    .air-quality_detail table td:first-child .text{
        margin-bottom: 15px;
    }
    .air-quality_detail table td:first-child .text span{
        font-weight: 600;
        font-size: 16px;
    }
    .blog-detail .fixed-toc .toc{
        width: 300px;
        height: 280px;
        overflow: auto;
    }
    /* .blog-detail .fixed-toc{
        top: 65%;
    } */
}
@media only screen and (max-width: 480px){
    .air-quality_content{
        flex-wrap: wrap;
    }
    .air-quality .content-title{
        margin: 0 auto;
        margin-bottom: 15px;
    }
}

.h1-title{
    font-size: clamp(30px, 4.048vw, 40px);
    font-weight: 600;
    font-style: normal;
    line-height: 120%;
    letter-spacing: -0.49px;
}

.blog-detail img{
    margin: 0px auto;
    display: block;
}

h1.h1-title{
    font-size: 28px;
    margin-bottom: 22px;
    font-weight: 600;
}


.detail-content h2{
    font-size: 26px;
    margin-bottom: 15px;
}

.detail-content h3{
    font-size: 24px;
    margin-bottom: 15px;
}

.detail-content p{
    margin-bottom: 15px;
    font-size: 16px;
}



.detail-content p, .detail-content span{
    color: #000000;
}

.detail-content ul li{
    margin-bottom: 10px;
}

.detail-content p span, .detail-content ul span{
    font-size: 16px;
    line-height: 28px;
}


.detail-content ul li span{
    display: block;
}

.detail-content a{
    color: #409AC7;
}


.blog-card figure img{
    object-fit: cover;
    width: 100%;
    height: 150px;
}

.grid-forecast .img-block span, .forecast-box .img-block span{
    Text-transform: capitalize;
}
.uv-card .uv-para{
    font-size: 11px;
}

.air-quality h1, .uv-detail h1{
    font-size: 24px;
    font-weight: bold;
}

.grid-forecast-index{
    grid-template-columns: repeat(3, 1fr);
}

.quality-detail .thangdo {
    grid-template-columns: repeat(1, 1fr);
}

.quality-detail .thangdo h4{
    font-size: 16px;
    margin-bottom: 15px;
}

.quality-detail .pollutant-scale{
    margin-bottom: 15px;
}

.quality-detail .thangdo small{
    display: block;
}

.quality-detail .scale-items{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}