/* =========================================================
   RESPONSIVE CSS
========================================================= */

/* =========================================================
   TABLET & MOBILE
========================================================= */
@media (max-width:991px){

    /* NAV WRAPPER */
    .nav-wrapper{
        position: relative;
        min-height: 50px;
    }

    /* TOGGLE */
    .nav-toggle{
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* MOBILE MENU */
    .nav-menu{
        position: fixed;
        top: 0;
        left: -100%;
        width: 290px;
        height: 100vh;
        overflow-y: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 20px 14px;
        background: #220028;
        transition: .35s ease;
        z-index: 9999;
    }

    .nav-menu.show{
        left: 0;
    }

    .nav-menu li{
        width: 100%;
    }

    .nav-menu li a{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* MAIN MENU */
    .nav-menu > li > a{
        padding: 12px 14px;
        color: #fff !important;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        transition: .25s ease;
    }

    .nav-menu > li > a:hover{
        background: rgba(255,255,255,.08);
    }

    .nav-menu > li.active > a{
        background: #fff;
        color: #220028 !important;
    }

    /* SUB MENU */
    .sub-menu,
    .side-sub-menu{
        position: static;
        width: 100%;
        min-width: 100%;
        margin-top: 6px;
        padding: 8px;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        border: none;
        border-radius: 10px;
        box-shadow: none;
    }

    .sub-menu{
        background: rgba(255,255,255,.05);
    }

    .side-sub-menu{
        background: rgba(255,255,255,.04);
    }

    /* SHOW */
    .has-dropdown.active > .sub-menu,
    .side-category.active > .side-sub-menu{
        display: block;
    }

    /* ARROWS */
    .has-dropdown.active > a .nav-arrow{
        transform: rotate(180deg);
    }

    .side-category.active > a .side-arrow{
        transform: rotate(90deg);
    }

    /* SUB LINKS */
    .sub-menu li a,
    .side-sub-menu li a{
        padding: 10px 12px;
        color: #fff !important;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 500;
    }

    .sub-menu li a:hover,
    .side-sub-menu li a:hover{
        background: rgba(255,255,255,.08);
    }

    .sub-menu li.active > a,
    .side-sub-menu li.active > a{
        background: #fff;
        color: #220028 !important;
    }

    /* SOCIAL */
    .mobile-social{
        display: block;
        margin-top: 18px;
    }

    .desktop-social{
        display: none;
    }

    /* NEWS */
    .news-header{
        font-size: 22px;
        padding: 14px 18px;
    }

    .latest-thumb{
        width: 95px;
        height: 75px;
    }

    .deafult-heading{
        font-size: 16px;
    }
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width:767px){
    /* HEADER */
    .header-top{
        padding: 10px 0 !important;
    }

    .header-top .row{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .web-date{
        display: none;
    }

    /* LEFT */
    .header-top .col-md-4.col-6:first-child{
        flex: 0 0 50%;
        max-width: 50%;
        order: 1;
    }

    /* RIGHT */
    .header-top .col-md-4.col-6:last-child{
        flex: 0 0 50%;
        max-width: 50%;
        order: 2;
    }

    .header-right{
        justify-content: flex-end;
    }

    /* LOGO */
    .header-top .col-md-4.col-12{
        flex: 0 0 100%;
        max-width: 100%;
        order: 3;
    }

    .header-middle{
        margin-top: 12px;
        text-align: center;
    }

    .main-logo{
        max-width: 170px;
        max-height: 58px;
        width: auto;
        height: auto;
    }

    /* MOBILE SOCIAL */
    .mobile-social .social-icons{
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    .mobile-social .social-icons a{
        width: 36px;
        height: 36px;
        border-radius: 10px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #000 !important;
        background: #fff;
    }

    /* SEARCH */
    .search-form{
        max-width: 95%;
        padding: 15px;
    }

    .search-form form{
        flex-direction: column;
    }

    .search-form button{
        width: 100%;
    }

    /* NOTICE */
    .notice-board{
        padding: 20px 0;
    }
    .notice-wrapper{
        padding: 12px;
        border-radius: 16px;
    }
    .notice-close-btn{
        width: 36px;
        height: 36px;
        font-size: 16px;
        top: 12px;
        right: 12px;
    }
    .notice-top{
        justify-content: center;
        text-align: center;
    }
    .notice-title{
        font-size: 18px;
    }
    .notice-short,
    .notice-full{
        font-size: 12px;
        line-height: 1.3;
    }
    .notice-btn{
        width: 100%;
    }
    .notice-date{
        gap: 6px;
    }
    .notice-date .date-box{
        font-size: 12px;
        padding: 8px 12px;
    }

    /* NEWS */
    .news-section{
        padding: 20px 0;
    }
    .lead-heading{
        font-size: 18px;
    }
    .sub-heading,
    .deafult-heading{
        font-size: 15px;
        line-height: 1.35;
    }

    .news-item{
        gap: 12px;
        padding: 14px;
    }

    .latest-thumb{
        width: 85px;
        height: 65px;
        min-width: 85px;
        border-radius: 10px;
    }

    .news-header{
        font-size: 20px;
    }

    .news-content{
        padding: 12px;
    }

    .news-content p{
        margin: 0;
        font-size: 12px;
    }
}
@media(max-width:991px){

    .lead-heading{
        font-size: 20px;
    }

    .news-header{
        font-size: 20px;
    }

    .latest-thumb{
        width: 85px;
        height: 65px;
    }
}

@media(max-width:575px){

    .news-section{
        padding: 10px 0;
    }

    .lead-heading{
        font-size: 18px;
    }

    .sub-heading,
    .deafult-heading{
        font-size: 15px;
    }

    .news-header{
        font-size: 18px;
        padding: 12px 14px;
    }

    .news-item{
        padding: 10px;
        gap: 10px;
    }

    .latest-thumb{
        width: 78px;
        height: 58px;
        border-radius: 10px;
    }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width:480px){
    .notice-title{
        font-size: 18px;
    }
    .notice-badge{
        font-size: 12px;
        padding: 8px 14px;
    }
    .notice-status{
        font-size: 11px;
    }
}

/* =========================================================
   DESKTOP
========================================================= */
@media (min-width:992px){
    .nav-toggle{
        display: none !important;
    }
    .nav-menu{
        position: static;
        display: flex !important;
        flex-direction: row;
        align-items: center;
        width: auto;
        height: auto;
        overflow: visible;
        padding: 0;
        background: transparent;
        left: 0 !important;
    }
}

/* ==========================
PRICE SENSITIVE SECTION
========================== */
@media(max-width:767px){
    .price-sensitive-section{
        padding:15px 10px;
    }
    .price-news-thumb{
        height:90px;
    }
}


/* ========================= FOOTER ========================= */
/* ==========================
   TABLET (≤ 991px)
========================== */
@media (max-width:991.98px){

    .newsletter-form{
        margin-top:15px;
        display:flex;
        width: 100%;
    }

    .newsletter-form input{
        width: 67%;
    }

    .newsletter-form button{
        padding: 0 5px;
        width: 28%;
    }
    .footer-main{
        padding:30px 0;
    }

    .footer-brand{
        text-align:center;
        margin-bottom:15px;
    }

    .social-links{
        justify-content:center;
    }

    .app-box{
        margin-top:15px;
    }

    .footer-bottom{
        text-align:center;
    }
}


/* ==========================
   MOBILE (≤ 767px)
========================== */
@media (max-width:767.98px){
    .newsletter-form{
        display:flex;
        width: 100%;
    }

    .newsletter-form input{
        width: 67%;
    }

    .newsletter-form button{
        padding: 0 5px;
        width: 28%;
    }

    .col-title{
        text-align: center;
    }
    /* Footer */
    .footer-main{
        padding:25px 0;
    }
    .footer-brand{
        text-align:center;
        margin-bottom:20px;
    }
    .footer-brand img{
        max-width:180px;
    }
    .social-links{
        justify-content:center;
    }
    .footer-main h4{
        font-size:18px;
        margin-top:10px;
        margin-bottom:15px;
    }
    .footer-main h4::after{
        left:50%;
        transform:translateX(-50%);
    }
    .footer-main ul{
        text-align:center;
    }
    .footer-main ul li{
        margin-bottom:10px;
    }
    .footer-main ul li a{
        font-size:15px;
    }

    /* App Box */
    .app-box{
        padding:25px 20px;
        margin-top:10px;
    }
    .app-box h5{
        font-size:20px;
    }
    .app-box p{
        font-size:13px;
    }
    .app-box img{
        max-width:160px;
    }

    /* Bottom */
    .footer-bottom{
        text-align:center;
        font-size:14px;
    }
}


/* ==========================
   SMALL MOBILE (≤ 575px)
========================== */
@media (max-width:575.98px){
    /* Newsletter */
    .newsletter-info h2{
        font-size:18px;
    }
    .newsletter-info p{
        font-size:12px;
    }
    .newsletter-form input,
    .newsletter-form button{
        height:46px;
        font-size:14px;
    }

    .col-title{
        text-align: center;
    }
    /* Footer */
    .footer-main h4{
        font-size:17px;
    }
    .footer-main ul li a{
        font-size:14px;
    }

    /* App Box */
    .app-box{
        border-radius:12px;
        padding:20px 15px;
    }
    .app-box h5{
        font-size:18px;
    }
    .app-box img{
        max-width:140px;
    }
}