/* ==========================================
   ROOT VARIABLES
========================================== */

:root {

    /* Brand Colors */
    --primary: #eb2525;
    --primary-hover: #F59E0B;
    --secondary: #F59E0B;

    /* Status Colors */
    --success: #16A34A;
    --warning: #F59E0B;
    --danger: #DC2626;

    /* Background */
    --bg: #F8FAFC;
    --surface: #FFFFFF;
    --surface-alt: #F1F5F9;

    /* Text */
    --text: #0F172A;
    --text-light: #475569;
    --text-muted: #94A3B8;

    --white:#FFFFFF;
    --black:#111827;


    /* Gray Scale */

    --gray-50:#F8FAFC;
    --gray-100:#F1F5F9;
    --gray-200:#E2E8F0;
    --gray-300:#CBD5E1;
    --gray-400:#94A3B8;
    --gray-500:#64748B;
    --gray-600:#475569;
    --gray-700:#334155;
    --gray-800:#1E293B;
    --gray-900:#0F172A;


    /* Border */

    --border:#E2E8F0;


    /* Typography */

    --font-family:"Inter",Arial,sans-serif;


    --fs-xs:.75rem;
    --fs-sm:.875rem;
    --fs-md:.9rem;
    --fs-mds:.95rem;
    --fs-lg:1.125rem;
    --fs-xl:1.5rem;
    --fs-2xl:2rem;
    --fs-3xl:3rem;
    --fs-4xl:4rem;


    --fw-light:300;
    --fw-normal:400;
    --fw-medium:500;
    --fw-semibold:600;
    --fw-bold:700;


    /* Spacing */

    --space-1:.25rem;
    --space-2:.5rem;
    --space-3:.75rem;
    --space-4:1rem;
    --space-5:1.5rem;
    --space-6:2rem;
    --space-7:3rem;
    --space-8:4rem;


    /* Radius */

    --radius-sm:6px;
    --radius-md:10px;
    --radius-lg:16px;
    --radius-xl:24px;
    --radius-full:999px;


    /* Shadows */

    --shadow-sm:
    0 2px 8px rgba(15,23,42,.05);

    --shadow-md:
    0 8px 20px rgba(15,23,42,.08);

    --shadow-lg:
    0 15px 35px rgba(15,23,42,.12);

    --shadow-xl:
    0 20px 45px rgba(15,23,42,.15);


    /* Layout */

    --container-width:1200px;


    /* Animation */

    --transition:.3s ease;

}



/* ==========================================
   RESET
========================================== */


*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    font-family:var(--font-family);
    font-size:var(--fs-mds);
    color:var(--text);
    background:var(--bg);
    line-height:1.6;

}


img{

    max-width:100%;

    height:auto;

    display:block;

}


a{

    text-decoration:none;

    color:inherit;

    transition:var(--transition);

}


ul{

    list-style:none;

}


button,
input,
textarea{

    font-family:inherit;

}



/* ==========================================
   TYPOGRAPHY
========================================== */


h1,
h2,
h3,
h4,
h5,
h6{

    color:var(--black);

    font-weight:var(--fw-bold);

    line-height:1.3;

}


h1{

    font-size:clamp(2rem,5vw,3rem);

}


h2{

    font-size:clamp(1.5rem,4vw,2rem);

}


h3{

    font-size:clamp(1.1rem,2vw,1.4rem);

}


p{

    color:var(--text-light);

    margin-bottom:var(--space-4);

}



/* ==========================================
   GLOBAL LAYOUT
========================================== */


.container{

    width:min(
        calc(100% - 2rem),
        var(--container-width)
    );

    margin:auto;

}



.section{

    padding:5rem 0;

}



.flex{

    display:flex;

}


.grid{

    display:grid;

}



.center{

    display:flex;

    justify-content:center;

    align-items:center;

}



/* ==========================================
   BUTTONS
========================================== */


.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;


    padding:.85rem 1.6rem;


    border:none;

    border-radius:var(--radius-md);


    cursor:pointer;

    font-weight:var(--fw-semibold);


    transition:var(--transition);

}



.btn-primary{

    background:var(--primary);

    color:var(--white);

}



.btn-primary:hover{

    background:var(--primary-hover);

}



.btn-outline{

    border:2px solid var(--primary);

    color:var(--primary);

    background:transparent;

}



.btn-outline:hover{

    background:var(--primary);

    color:white;

}



/* ==========================================
   CARDS
========================================== */


.card{

    background:var(--surface);

    border-radius:var(--radius-lg);

    padding:2rem;

    box-shadow:var(--shadow-sm);

}



/* ==========================================
   UTILITIES
========================================== */


.text-center{

    text-align:center;

}


.hidden{

    display:none!important;

}


.mt-1{

    margin-top:1rem;

}

.mt-2{

    margin-top:2rem;

}


.mt-3{

    margin-top:3rem;

}



.mb-1{

    margin-bottom:1rem;

}


.mb-2{

    margin-bottom:2rem;

}


.mb-3{

    margin-bottom:3rem;

}

/*
Header, Navbar, Dropdown Menu, Mega Menu, Mobile Toggle styles.
*/

 
/* ==========================================
   TOP HEADER / BREAKING NEWS
========================================== */


.top-header{
    position:sticky;
    top:0;
    z-index:1200;
    height:42px;
    background:var(--gray-900);
    color:var(--white);
    overflow:hidden;
    font-size:var(--fs-sm);
}



.top-header-content{

    height:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.breaking-news{

    display:flex;

    align-items:center;

    flex:1;

    overflow:hidden;

}



.breaking-label{

    height:42px;

    display:flex;

    align-items:center;

    gap:8px;

    padding:0 15px;

    background:var(--danger);

    color:white;

    font-weight:700;

    white-space:nowrap;

}



.breaking-slider{

    height:42px;

    overflow:hidden;

    flex:1;

}



.breaking-track{

    display:flex;

    flex-direction:column;

    animation:newsTicker 16s infinite;

}



.breaking-track a{

    height:42px;

    display:flex;

    align-items:center;

    padding-left:15px;

    color:white;

}



.breaking-track a:hover{

    color:var(--secondary);

}



@keyframes newsTicker{

    0%,
    20%{

        transform:translateY(0);

    }


    25%,
    45%{

        transform:translateY(-42px);

    }


    50%,
    70%{

        transform:translateY(-84px);

    }


    75%,
    95%{

        transform:translateY(-126px);

    }


    100%{

        transform:translateY(0);

    }

}



.top-right{

    display:flex;

    align-items:center;

    gap:15px;

    margin-left:20px;

}



.top-right a{

    color:white;

    font-size:1rem;

}


.top-right a:hover{

    color:var(--secondary);

}





/* ==========================================
   MAIN HEADER
========================================== */


.header{
    position:sticky;
    top:42px;
    width:100%;
    background:var(--surface);
    z-index:1100;
}



.header.scrolled{

    box-shadow:var(--shadow-md);

    border-color:var(--border);

}



.navbar{

    height:80px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



/* ==========================================
   LOGO
========================================== */


.logo{

    display:flex;

    align-items:center;

}



.logo img{

    height:50px;

    width:auto;

}



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


.nav-menu{

    flex:1;

    display:flex;

    justify-content:center;

}



.nav-list{

    display:flex;

    align-items:center;

    gap:2rem;

}



.nav-list > li{

    position:relative;

}



.nav-list > li > a{

    height:80px;

    display:flex;

    align-items:center;

    gap:.4rem;


    color:var(--text);

    font-weight:var(--fw-medium);

}



.nav-list > li > a:hover,
.nav-list > li > a.active{

    color:var(--primary);

}



.nav-list i{

    font-size:.7rem;

}





/* ==========================================
   HEADER RIGHT
========================================== */


.header-right{

    display:flex;

    align-items:center;

    gap:1rem;

}



.search-btn{

    width:42px;

    height:42px;

    border:none;

    background:transparent;

    border-radius:50%;

    cursor:pointer;

    color:var(--text);

    transition:var(--transition);

}



.search-btn:hover{

    background:var(--surface-alt);

    color:var(--primary);

}





/* ==========================================
   DROPDOWN MENU
========================================== */


.dropdown-menu{

    position:absolute;

    top:110%;

    left:0;


    min-width:240px;


    background:var(--surface);


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


    border-radius:var(--radius-lg);


    box-shadow:var(--shadow-lg);


    padding:.5rem 0;


    opacity:0;

    visibility:hidden;


    transform:translateY(15px);


    transition:var(--transition);


}



.dropdown:hover .dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}



.dropdown-menu a{

    display:block;

    padding:14px 10px;

    color:var(--text);

}



.dropdown-menu a:hover{

    background:var(--gray-100);

    color:var(--primary);

    padding-left:28px;

}





/* ==========================================
   MEGA MENU
========================================== */


.mega-menu-item{

    position:static;

}



.mega-menu{
    position:absolute;
    top:100%;
    left:50%;
    width:min(1100px,95vw);
    transform:translateX(-50%) translateY(20px);
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-xl);
    padding:2.5rem;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:2rem;
    opacity:0;
    visibility:hidden;
    transition:var(--transition);
}



.mega-menu-item:hover .mega-menu{

    opacity:1;

    visibility:visible;


    transform:translateX(-50%) translateY(0);

}



.mega-column h4{

    color:var(--primary);

    margin-bottom:1rem;

    font-size:1.1rem;

}



.mega-column a{

    display:block;

    padding:.5rem 0;

    color:var(--text-light);

}



.mega-column a:hover{

    color:var(--primary);

    padding-left:10px;

}





/* ==========================================
   MOBILE MENU BUTTON
========================================== */


.menu-toggle{
    display:none;
    width:45px;
    height:45px;
    border:none;
    background:transparent;
    cursor:pointer;
    font-size:1.3rem;
    color:var(--text);
    position:relative;
    z-index:1001;

}
/*
Main News Layout + Responsive Hero Slider + Multiple Slider Support CSS + Comments Widget + Go-To-Top button.
*/



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


.main-slide{

    padding:40px 0;
    margin-bottom: 40px;

}



.main-slide .container{

    display:grid;

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

    gap:20px;

    align-items:start;

}



/* ==========================================
   SIDE NEWS CARDS
========================================== */
.content-left .news-image{
    position:relative;
    overflow:hidden;
}

.content-left .news-image img{
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
    transition:.4s ease;
}

.content-left > div:hover .news-image img{
    transform:scale(1.05);
}

.content-left .category{
    position:absolute;
    top:12px;
    left:12px;
    background:var(--primary);
    color:white;
    padding:5px 12px;
    border-radius:var(--radius-full);
    font-size:.75rem;
    font-weight:600;
    z-index:2;
}

.content-left .time{
    display:block;
    padding:0 15px 15px;
    color:var(--text-muted);
    font-size:.75rem;
}


.content-left,
.content-right{
    display:flex;
    flex-direction:column;
    gap:20px;
}



.content-left > div,
.content-right > div{
    background:var(--surface);
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    transition:var(--transition);

}



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

    transform:translateY(-4px);

    box-shadow:var(--shadow-md);

}



.content-left img,
.content-right img{
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
}



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

    padding:15px 15px 8px;
    font-size:1.05rem;
    line-height:1.4;

}



.content-left h3 a:hover,
.content-right h3 a:hover{

    color:var(--primary);
}
.content-left h4,
.content-right h4{

    padding:15px 15px 8px;
    font-size:.95rem;
    line-height:1.4;

}



.content-left h4 a:hover,
.content-right h4 a:hover{

    color:var(--primary);
}



.content-left p,
.content-right p{
    padding:0 15px 15px;
    margin:0;
    font-size:.95rem;
    color:var(--text-light);

}
.content-right .news-image{
    position:relative;
    overflow:hidden;
}


.content-right .news-image img{

    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
    transition:.4s ease;

}


.content-right > div:hover .news-image img{

    transform:scale(1.05);

}


.content-right .category{

    position:absolute;
    top:12px;
    left:12px;
    background:var(--primary);
    color:white;
    padding:5px 12px;
    border-radius:var(--radius-full);
    font-size:.75rem;
    font-weight:600;
    z-index:2;

}


.content-right .time{

    display:block;
    padding:0 15px 15px;
    color:var(--text-muted);
    font-size:.75rem;

}




/* ==========================================
   HERO SLIDER AREA
========================================== */


.content-middle{
    min-width:0;
}
.hero-slider{
    position:relative;
    width:100%;
    overflow:hidden;
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-lg);
}
.slides{
    position:relative;
    width:100%;
    height:clamp(300px,45vw,360px);
}
.slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transition:opacity .7s ease;
}
.slide.active{
    opacity:1;
    visibility:visible;
    z-index:2;
}
.slide img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* ======= Image Overlay =============== */
.slide-overlay{
    position:absolute;
    inset:auto 0 0 0;
    height:55%;
    background: linear-gradient( transparent, rgba(0,0,0,.35), rgba(0,0,0,.9));
    z-index:3;
}

/* ======== Slider Text ================ */
.slide-caption{
    position:absolute;
    left:30px;
    right:30px;
    bottom:35px;
    z-index:4;
    color:white;
}
.slide-caption h2{
    color:white;
    font-size:clamp(1.3rem,3vw,2.2rem);
    line-height:1.3;
    margin-bottom:10px;
}
.slide-caption h3{
    color: white;
}

.slide-caption p{
    color:#f8fafc;
    margin:0;
    font-size:clamp(.9rem,2vw,1.05rem);
}

/* ======= Slider Controls ==================== */
.slider-prev,
.slider-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:45px;
    height:45px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.2);
    color:white;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    backdrop-filter:blur(5px);
    z-index:10;
    transition:var(--transition);
}
.slider-prev{
    left:15px;
}
.slider-next{
    right:15px;
}
.slider-prev:hover,
.slider-next:hover{
   
    background:var(--primary);
}

/* ======== Slider Dots ====================== */
.slider-dots{
    position:absolute;
    bottom:15px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:10px;
    z-index:20;
}
.slider-dots span{
    width:11px;
    height:11px;
    border-radius:50%;
    background:rgba(255,255,255,.6);
    cursor:pointer;
    transition:var(--transition);
}
.slider-dots span.active{
    background:var(--primary);
    transform:scale(1.2);
}
/* ==========================================
   MIDDLE NEWS CARDS
========================================== */

.middle_news{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin-top:20px;
}


.middle_news > div{

    background:var(--surface);

    border-radius:var(--radius-lg);

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

    position:relative;

}


.middle_news > div:hover{

    transform:translateY(-5px);

    box-shadow:var(--shadow-md);

}


/* Images */

.middle_news img{

    width:100%;

    aspect-ratio:16/10;

    object-fit:cover;

    display:block;

    transition:.4s ease;

}


.middle_news > div:hover img{

    transform:scale(1.05);

}


/* Image wrapper effect */

.middle_news .news-image{

    overflow:hidden;

}


/* Titles */

.middle_news h4{

    padding:15px 15px 8px;

    margin:0;

    font-size:1rem;

    line-height:1.45;

    color:var(--text);

}


.middle_news h4 a{

    color:inherit;

}


.middle_news h4 a:hover{

    color:var(--primary);

}


/* Description */

.middle_news p{

    padding:0 15px 15px;

    margin:0;

    font-size:.9rem;

    color:var(--text-light);

    line-height:1.5;

}


/* Time/date */

.middle_news .time{

    display:block;

    padding:0 15px 15px;

    font-size:.75rem;

    color:var(--text-muted);

}


/* Category badge */

.middle_news .category{

    position:absolute;

    top:12px;

    left:12px;

    background:var(--primary);

    color:white;

    padding:5px 12px;

    border-radius:var(--radius-full);

    font-size:.75rem;

    font-weight:600;

}

/*==============================
HOME INTRO
==============================*/

.home-intro{
    padding:70px 0;
    background:#fff;
}

.intro-content{
    max-width:900px;
    margin:auto;
    text-align:center;
}

.intro-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#f3f6fb;
    color:var(--primary);
    padding:8px 18px;
    border-radius:40px;
    font-size:14px;
    font-weight:600;
    margin-bottom:20px;
}

.intro-content h2{
    font-size:38px;
    font-weight:700;
    line-height:1.3;
    color:#111;
    margin-bottom:20px;
}

.intro-content p{
    font-size:17px;
    line-height:1.9;
    color:#666;
    max-width:800px;
    margin:0 auto;
}

.intro-features{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:20px;
    margin-top:35px;
}


.intro-features div{
    display:flex;
    align-items:center;
    gap:10px;
    background:#fff;
    padding:14px 22px;
    border-radius:10px;
    box-shadow:0 5px 18px rgba(0,0,0,.08);
    transition:.3s;
}

.intro-features div:hover{
    transform:translateY(-5px);
}

.intro-features i{
    color:var(--danger);
    font-size:20px;
}

.intro-features span{
    font-weight:600;
    color:#222;
}






/* ==========================================
   SPORTS 
========================================== */
.sports{

    margin-bottom: 40px;
}

.all_sports .news-image{
    position:relative;
    overflow:hidden;
}

.all_sports .news-image img{
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
    transition:.4s ease;
}

.all_sports > div:hover .news-image img{
    transform:scale(1.05);
}

.all_sports .category{
    position:absolute;
    top:12px;
    left:12px;
    background:var(--primary);
    color:white;
    padding:5px 12px;
    border-radius:var(--radius-full);
    font-size:.75rem;
    font-weight:600;
    z-index:2;
}


.sec-header{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 10px;

}
.header-title{
    border-left: solid 6px red;
    padding-left: 10px;
}
.all_sports{
    display:flex;
    gap:20px;
    overflow:hidden;
    scroll-behavior:smooth;
}
.all_sports > div{
    flex:0 0 calc(25% - 15px);
}

.sports-controls{
    display:flex;
    gap:10px;
}
.sports-controls button{
    width:35px;
    height:35px;
    border:none;
    border-radius:50%;
    background:var(--primary);
    color:white;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
}
.sports-controls button:hover{
    background:var(--primary-hover);
}



.all_sports > div{
    transition:.3s;
}

.all_sports > div:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-md);
}


.all_sports img{
    width:100%;
    aspect-ratio:16/10;
    margin-bottom: 10px;
    border-radius:12px 12px 0 0;
    object-fit:cover;
}

.all_sports div p, h4, h3{
    padding-left: 10px;
    padding-right: 10px;
}

.all_sports h4 a:hover{
    
    color:var(--primary);
}


/* ==========================================
   LIVE COMMENTS WIDGET
========================================== */
.comment-box.hidden {
    display: none !important;
}


.comment-widget{
    position:fixed;
    right:25px;
    bottom:25px;
    z-index:9999;

}



.comment-box{
    width:380px;
    height:500px;
    display:flex;
    flex-direction:column;
    background:white;
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-xl);
    overflow:hidden;

}
.comment-header{
    height:65px;
    padding:0 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:var(--primary);
    color:white;
}
.comment-title{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:600;
}
.online-dot{
    width:10px;
    height:10px;
    background:#22c55e;
    border-radius:50%;
}
.comment-close{
    border:none;
    background:none;
    color:white;
    cursor:pointer;

}

.comments-list{
    flex:1;
    padding:20px;
    overflow-y:auto;
    background:var(--bg);
    display:flex;
    flex-direction:column;
    gap:15px;

}
.comment{
    display:flex;
    gap:12px;
    padding:12px;
    background:white;
    border-radius:var(--radius-sm);
    border-left:4px solid var(--primary);

}

.comment:nth-child(even){
    border-color:var(--secondary);
}
.avatar{
    display: none;
    width:45px;
    height:45px;
    border-radius:50%;
    object-fit:cover;
}

.comment-user{
    font-weight:bold;
    color:var(--text);
    font-size: .9rem;
    font-style: italic;
    text-transform: capitalize;
}

.comment-text{
    font-size:.9rem;
}



.comment-meta{
    display:flex !important;
    justify-content:space-between;
    gap: 20px;
    margin-top:8px;
    font-size:.75rem;
    color:var(--text-muted);
}
.comment-meta button{
    cursor: pointer;
    background:none;
    border: none;
}
.comment-meta button:hover{
    color: var(--secondary);
}


.comment-input{
    width:100%;
    padding:12px;
    display:flex;
    align-items:center;
    gap:8px;
    background:white;
    border-top:1px solid var(--border);
}



.comment-input input{
    min-width:0;
    height:42px;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    padding:0 12px;
    outline:none;
    font-size:14px;

}
#commentName{
    width:100px;
    flex-shrink:0;
}
#commentText{
    flex:1;
    width:auto;
}



.comment-input button{
    flex-shrink:0;
    width:42px;
    height:42px;
    border:none;
    background:var(--primary);
    color:white;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;

}



.comment-button{
    margin-left:auto;
    width:60px;
    height:60px;
    border:none;
    border-radius:50%;
    background:var(--primary);
    color:white;
    font-size:24px;
    cursor:pointer;
    box-shadow:var(--shadow-lg);

}

.comment-counter{
    padding-right: 15px;
    padding-left: 15px;
    text-align: right;
}

/* ==========================================
   VIDEO SECTION
========================================== */


.video-section{

    padding:40px 0;

}



.all-videos{

    display:flex;

    gap:20px;

    overflow:hidden;

    scroll-behavior:smooth;

}



.video-card{

    flex:0 0 calc(25% - 15px);

    background:white;

    border-radius:var(--radius-lg);

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:.3s;

}



.video-card:hover{

    transform:translateY(-5px);

    box-shadow:var(--shadow-md);

}



.video-image{

    position:relative;

}



.video-image img{

    width:100%;

    aspect-ratio:16/10;

    object-fit:cover;

}



.play-btn{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);


    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:white;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

}



.play-btn:hover{

    background:var(--primary-hover);

}



.video-time{

    position:absolute;

    right:10px;

    bottom:10px;

    background:rgba(0,0,0,.75);

    color:white;

    padding:4px 8px;

    border-radius:5px;

    font-size:.8rem;

}



.video-card h4{

    padding:15px 15px 5px;

}



.video-card h4 a:hover{

    color:var(--primary);

}



.video-card p{

    padding:0 15px;

    font-size:.9rem;

}



/* VIDEO RESPONSIVE */


@media(max-width:992px){

    .video-card{

        flex:0 0 calc(50% - 10px);

    }

}



@media(max-width:576px){

    .video-card{

        flex:0 0 100%;

    }

}


/* ==========================================
   VIDEO POPUP
========================================== */


.video-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.85);

    display:none;

    align-items:center;

    justify-content:center;

    z-index:99999;

}



.video-modal.active{

    display:flex;

}



.video-popup{

    width:min(900px,95%);

    position:relative;

}



.video-popup video{

    width:100%;

    border-radius:15px;

}



.video-close{

    position:absolute;

    right:-10px;

    top:-45px;

    width:40px;

    height:40px;

    border:none;

    border-radius:50%;

    background:white;

    color:black;

    cursor:pointer;

    font-size:20px;

}




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


.footer{

    background:#0F172A;
    color:white;
    margin-top:60px;
}



.footer-container{

    display:grid;
    grid-template-columns:
    1.5fr
    1fr
    1fr
    1fr;
    gap:40px;
    padding:60px 0;

}



.footer-logo img{
    height:55px;
    width:auto;
    margin-bottom:20px;
    background-color: var(--bg);
    border-radius: 50%;
}



.footer-brand p{

    color:#CBD5E1;

    line-height:1.8;

    max-width:350px;

}



.footer-col h3{

    color:white;

    font-size:1.2rem;

    margin-bottom:20px;

    position:relative;

}



.footer-col h3::after{

    content:"";

    display:block;

    width:40px;

    height:3px;

    background:var(--primary);

    margin-top:8px;

}



.footer-col ul{

    padding:0;

}



.footer-col li{

    margin-bottom:12px;

    color:#CBD5E1;

}



.footer-col a{

    color:#CBD5E1;

}



.footer-col a:hover{

    color:white;

    padding-left:5px;

}



/* SOCIAL */

.footer-social{

    display:flex;

    gap:12px;

    margin-top:20px;

}



.footer-social a{

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#1E293B;

    color:white;

    transition:.3s;

}



.footer-social a:hover{

    background:var(--primary);

    transform:translateY(-4px);

}



/* CONTACT */

.footer-contact li{

    display:flex;

    gap:12px;

    align-items:center;

}



.footer-contact i{

    color:var(--primary);

}



/* FOOTER BOTTOM */

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.1);

    padding:20px 0;

    text-align:center;

}



.footer-bottom p{

    margin:0;

    color:#94A3B8;

    font-size:.9rem;

}










/* ==========================================
   GO TO TOP BUTTON
========================================== */


.go-top{

    position:fixed;


    right:25px;

    bottom:100px;


    width:55px;

    height:55px;


    display:flex;

    justify-content:center;

    align-items:center;


    border:none;


    border-radius:50%;


    background:var(--primary);


    color:white;


    font-size:20px;


    cursor:pointer;


    opacity:0;

    visibility:hidden;


    transform:translateY(20px);


    transition:var(--transition);


    z-index:9998;

}

/* ==========================================
   SINGLE NEWS PREVIEW
========================================== */


.preview .container{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 330px;
    gap:30px;
    align-items:start;
}


/*LEFT ARTICLE */
.single-news{
     font-size:.9rem;


}
.single-news p{
    font-size:.9rem;
}


.single-news h3{
    font-size:clamp(1.6rem,3vw,2.4rem);
    margin-bottom:15px;

}

.time{
    color:var(--text-muted);
    font-size:.8rem;
    margin-top: -10px;

}
.single-news .share{
    display: flex !important;
    justify-content: space-between;
}
.content-left .time{
    color:var(--text-muted);
    font-size:.8rem;
    margin-top: -10px;

}
.content-right .time{
    color:var(--text-muted);
    font-size:.8rem;
    margin-top: -10px;

}

.single-news .time{
    color:var(--text-muted);
    font-size:.9rem;
}

.single-news > div img{
    width:100%;
    margin:25px 0;
    border-radius:var(--radius-lg);
    object-fit:cover;

}



.news_content p{
    font-size:.9rem;
    line-height:1.6;
    margin-bottom:18px;

}



/* ==========================================
   RIGHT SIDEBAR
========================================== */
.single-right{
    position:sticky;
    top:100px;
    height:max-content;

}
.single-right .news-image{
    position:relative;
    overflow:hidden;
}

.single-right .news-image img{
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
    transition:.4s ease;
}

.single-right > div:hover .news-image img{
    transform:scale(1.05);
}

.single-right .category{
    position:absolute;
    top:12px;
    left:12px;
    background:var(--primary);
    color:white;
    padding:5px 12px;
    border-radius:var(--radius-full);
    font-size:.75rem;
    font-weight:600;
    z-index:2;
}





.single-right > h3{
    margin-bottom:15px;
    border-left:5px solid var(--primary);
    padding-left:10px;
}
.single-right > div{
    background:white;
    border-radius:var(--radius-lg);
    overflow:hidden;
    margin-bottom:20px;
}

.single-right img{
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
}

.single-right h3,
.single-right h4{
    padding:15px 15px 5px;
    font-size:1rem;
}

.single-right p{
    padding:0 15px 15px;
    margin:0;
    font-size:.9rem;
}



.go-top.show{

    opacity:1;

    visibility:visible;


    transform:translateY(0);

}



.go-top:hover{

    background:var(--primary-hover);

    transform:translateY(-5px);

}


/* ==========================================
   COOKIE NOTICE
========================================== */


.cookie-banner{

    position:fixed;

    left:20px;

    right:20px;

    bottom:20px;

    background:#ffffff;

    border-radius:16px;

    padding:20px;

    box-shadow:0 15px 40px rgba(0,0,0,.15);

    z-index:10000;

    display:none;

}


.cookie-content{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

}


.cookie-content p{

    margin:0;

    color:var(--text-light);

    font-size:.95rem;

    line-height:1.6;

}


.cookie-content button{

    flex-shrink:0;

    border:none;

    background:var(--primary);

    color:white;

    padding:12px 30px;

    border-radius:var(--radius-md);

    cursor:pointer;

    font-weight:600;

    transition:.3s;

}


.cookie-content button:hover{

    background:var(--primary-hover);

}

.icon-share{
    display: flex;
    gap: 10px;
}

.icon-share a{
    background-color: var(--black);
    padding: 3px 7px;
    color: var(--bg);
    border-radius: 50%;
    cursor: pointer;
}
.icon-share a:hover{
    background-color: var(--primary);
}