/* ==========================================================
   RESPONSIVE CSS
   Empikahoona Layout
========================================================== */


/* ==========================================================
   LARGE DEVICES
   1200px and below
========================================================== */

@media (max-width:1200px){

    :root{
        --fs-3xl:2.5rem;
        --fs-2xl:1.8rem;
    }


    /* HEADER */

    .nav-list{
        gap:1.2rem;
    }


    .nav-list > li > a{
        font-size:.95rem;
    }


    .mega-menu{
        width:900px;
    }



    /* MAIN NEWS */

    .main-slide .container{

        grid-template-columns:
        240px
        minmax(0,1fr)
        240px;

        gap:15px;

    }


    .content-left h3,
    .content-right h3{

        font-size:1rem;

    }


}



/* ==========================================================
   TABLETS
   992px and below
========================================================== */

@media(max-width:992px){
    body{
        font-size:16px;
    }
    .container{
        width:92%;
    }



    /* =========================
       MOBILE NAVIGATION
    ========================= */


.nav-menu{
    position:fixed;
    top:0;
    right:-100%;
    width:320px;
    height:100vh;
    background:white;
    padding:90px 25px 30px;
    display:block;
    box-shadow:var(--shadow-xl);
    transition:.4s ease;
    overflow-y:auto;
    z-index:1000;

}



    .nav-menu.active{

        right:0;

    }



    .nav-list{

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        gap:0;

    }



    .nav-list > li{

        width:100%;

        border-bottom:1px solid var(--border);

    }



    .nav-list > li > a{

        height:auto;

        padding:18px 0;

        width:100%;

        justify-content:space-between;

    }




    .header-right .btn,
    .search-btn{

        display:none;

    }




    .menu-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

    }




    /* DROPDOWN */

    .dropdown-menu{

        position:static;

        display:none;

        opacity:1;

        visibility:visible;

        transform:none;

        width:100%;

        box-shadow:none;

        border:none;

        padding-left:20px;

    }



    .dropdown.active .dropdown-menu{

        display:block;

    }




    /* MEGA MENU */


    .mega-menu{

        position:static;

        width:100%;

        display:none;

        grid-template-columns:1fr;

        padding:1rem;

        transform:none;

        box-shadow:none;

        border:none;

    }



    .mega-menu-item.active .mega-menu{

        display:grid;

    }





    /* =========================
       NEWS SECTION
    ========================= */


    .main-slide .container{

        grid-template-columns:1fr;

        gap:25px;

    }



    .content-left,
    .content-right{

        display:grid;

        grid-template-columns:repeat(2,1fr);

        gap:20px;

    }



    .content-left img,
    .content-right img{

        width:100%;

        height:auto;

        aspect-ratio:16/9;

        object-fit:cover;

    }




    /* HERO */

    .hero-slider{

        width:100%;

    }



    .slides{

        height:450px;

    }

    /* ==========================================================
        SPORTS
    ========================================================== */

    .all_sports > div{
        flex:0 0 calc(50% - 10px);
    }

/* SINGLE NEWS */

.preview .container{

    grid-template-columns:1fr;

}


.single-right{

    position:static;

}


    

    /* ==========================================
   FOOTER RESPONSIVE
========================================== */
    .footer-container{
        grid-template-columns:
        repeat(2,1fr);

    }


}





/* ==========================================================
   MOBILE LANDSCAPE
   768px and below
========================================================== */


@media(max-width:768px){

    :root{
        --fs-3xl:2rem;
        --fs-2xl:1.6rem;
        --fs-xl:1.35rem;

    }



    body{

        font-size:16px;
    }
    .top-header{
        display:block;
        height:42px;
    }
    .top-header-content{
        display:flex;
        align-items:center;
        justify-content:space-between;
    }

    .breaking-news{
        flex:1;
        min-width:0;
    }

    .breaking-label{
        padding:0 10px;
        font-size:12px;
    }

    .breaking-slider,
    .breaking-track a{
        height:42px;
        font-size:13px;
    }

        /* Hide only social icons on phones */
    .top-right{
        display:none;
    }

    .section{
        padding:3rem 0;
    }




    .section{

        padding:3rem 0;

    }





    /* NEWS CARDS */


    .content-left,
    .content-right{

        grid-template-columns:1fr;

    }



    .content-left h3,
    .content-right h3{

        font-size:1.15rem;

        line-height:1.45;

    }



    .content-left p,
    .content-right p{

        font-size:1rem;

        line-height:1.6;

    }





    /* HERO TEXT */


    .slide-caption{

        left:20px;

        right:20px;

        bottom:25px;

    }



    .slide-caption h2{

        font-size:1.55rem;

        line-height:1.35;

    }



    .slide-caption p{

        font-size:1rem;

    }





    /* HERO HEIGHT */


    .slides{

        height:400px;

    }



    .slider-prev,
    .slider-next{

        width:40px;

        height:40px;

    }





    .btn{

        width:100%;

    }

        .home-intro{
        padding:50px 0;
    }

    .intro-content h2{
        font-size:28px;
    }

    .intro-content p{
        font-size:16px;
    }

    .intro-features{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap:15px;
    }

    .intro-features div{
        width:100%;
        justify-content:center;
    }

        .middle_news{

        grid-template-columns:1fr;

    }

}





/* ==========================================================
   MOBILE
   576px and below
========================================================== */


@media(max-width:576px){


    body{

        font-size:16px;

    }



    .container{

        width:94%;

    }




    /* HEADER */


    .nav-menu{

        width:100%;

    }



    .logo img{

        height:42px;

    }



    .navbar{

        height:70px;

    }





    /* NEWS */


    .main-slide{

        padding:25px 0;

    }



    .content-left,
    .content-right{

        gap:15px;

    }




    .content-left > div,
    .content-right > div{

        border-radius:12px;

    }




    .content-left h3,
    .content-right h3{

        padding:12px;

        font-size:1.1rem;

    }



    .content-left p,
    .content-right p{

        padding:0 12px 15px;

        font-size:.95rem;

    }






    /* HERO */


    .slides{

        height:320px;

    }



    .slide-caption{

        left:15px;

        right:15px;

        bottom:20px;

    }




    .slide-caption h2{

        font-size:1.25rem;

    }




    .slide-caption p{

        font-size:.9rem;

    }




    .slider-dots span{

        width:9px;

        height:9px;

    }

    /*comment*/

    .comment-box{

        width:calc(100vw - 30px);

        height:80vh;

    }



    .comment-input{

        flex-wrap:wrap;

    }



    #commentName{

        width:100%;

    }



    #commentText{

        width:calc(100% - 50px);

    }



    .comment-input button{
        width:42px;
        height:42px;
    }

    /* ==========================================================
    SPORTS
    ========================================================== */    
    .all_sports > div{
        flex:0 0 100%;
    }

    /* ==========================================
   FOOTER RESPONSIVE
========================================== */

    .footer-container{
        grid-template-columns:1fr;
        padding:40px 0;
    }
    .footer-brand p{
        max-width:100%;
    }



    /* GO TOP */


    .go-top{
        width:50px;
        height:50px;
        right:15px;
        bottom:90px;
    }

    /* ==========================================================
    COOKIE-BANNER
    ========================================================== */

    .cookie-banner{
        left:15px;
        right:15px;
        bottom:15px;
        padding:15px;
    }

    .cookie-content{
        flex-direction:column;
        align-items:stretch;
        text-align:center;

    }

    .cookie-content button{
        width:100%;
    }




}





/* ==========================================================
   SMALL PHONES
   375px and below
========================================================== */


@media(max-width:375px){


    :root{

        --fs-3xl:1.8rem;

        --fs-2xl:1.45rem;

        --fs-xl:1.2rem;

    }




    .content-left h3,
    .content-right h3{

        font-size:1rem;

    }



    .slide-caption h2{

        font-size:1.1rem;

    }



    .slide-caption p{

        display:none;

    }




    .slides{

        height:280px;

    }


}