@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body{
    font-family:"Poppins", sans-serif;
}
.nav-link{
    font-weight: 600;
    color:#000;
}
.navbar-toggler:focus{
    box-shadow: none;

}


.video-layout-row {
            height: 55vh; /* Makes the row take up 55% of the viewport height */
            min-height: 450px; /* Ensures a decent minimum height */
        }

        /* 2. Base styling for all video items */
        .video-item {
            position: relative;
            width: 100%;
            height: 100%; /* Important: makes the item fill its parent container */
            border-radius: 8px;
            overflow: hidden; /* Hides parts of the image that go beyond the border-radius */
            background-color: #343a40;
        }

        /* 3. Ensure the image covers the entire container without stretching */
        .video-item img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* This is the magic property! */
            transition: transform 0.3s ease;
        }

        .video-item:hover img {
            transform: scale(1.05);
        }

        /* 4. Styling for the text overlay and tags (from previous example) */
        .video-tag {
            position: absolute;
            top: 1rem;
            left: 1rem;
            background-color: #c00;
            color: white;
            padding: 0.25rem 0.6rem;
            font-size: 0.8rem;
            font-weight: bold;
            border-radius: 4px;
            z-index: 10;
        }

        .video-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            color: white;
            padding: 1.5rem 1rem;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
        }

        .video-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.25rem;
        }

        .featured-video .video-title {
            font-size: 1.6rem;
        }

        .video-date {
            font-size: 0.85rem;
            color: #e0e0e0;
            margin: 0;
        }

        /* 5. Responsive adjustments for smaller screens (tablets and below) */
        @media (max-width: 991.98px) {
            .video-layout-row {
                height: auto; /* Let the content define the height on smaller screens */
            }
            .right-column {
                margin-top: 1rem; /* Add some space between rows on mobile */
            }
            .video-item {
                min-height: 250px; /* Give a sensible default height */
                margin-bottom: 1rem;
            }
        }

        .section-title {
            font-size: 1.75rem;
            font-weight: 600;
            margin-bottom: 2rem;
            display: inline-block; /* Allows the border to fit the text width */
            padding-bottom: 0.5rem;
            /* The purple underline */
            border-bottom: 3px solid #6f42c1; 
            margin-top: 4rem;
        }

        /* Styling for each individual news item */
        .news-item img {
            width: 130px; /* Fixed width for the image */
            height: 90px;  /* Fixed height for the image */
            object-fit: cover; /* Ensures the image covers the area without distortion */
            border-radius: 8px; /* Rounded corners for the image */
        }
        
        /* The category tag above the title */
        .category-tag {
            display: inline-block;
            padding: 0.2rem 0.6rem;
            font-size: 0.8rem;
            font-weight: 600;
            color: #fff; /* White text for all tags */
            border-radius: 5px;
            margin-bottom: 0.5rem;
        }

        /* News title styling */
        .news-title {
            text-decoration: none; /* Removes the underline from the link */
            color: #212529; /* Dark color for the title */
            font-weight: 600;
            font-size: 1rem;
            display: block; /* Makes the link take up the full width */
            transition: color 0.2s ease-in-out;
        }

        .news-title:hover {
            color: #6f42c1; /* Change color on hover */
        }

        /* Date text styling */
        .news-date {
            font-size: 0.85rem;
            color: #6c757d; /* Muted gray color */
        }

        /* Custom background colors for tags */
        .tag-siltie { background-color: #6f42c1; }
        .tag-central-ethiopia { background-color: #fd7e14; }
        .tag-ethiopia { background-color: #0d6efd; }
        .tag-africa { background-color: #198754; }
        .tag-world { background-color: #0dcaf0; }
        .tag-business { background-color: #20c997; }
        .tag-sport { background-color: #d63384; }

              .programmes-section {
            background-color: white; /* Light grey background */
        }

        .section-title {
            font-family: 'Times New Roman', Times, serif;
            font-weight: 600;
        }

        /* Custom styling for the Slick slider arrows */
        .slick-arrow {
            background-color: white !important;
            border-radius: 50% !important;
            width: 45px !important;
            height: 45px !important;
            z-index: 10;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }

        /* Position the arrows */
        .slick-prev { left: -20px !important; }
        .slick-next { right: -20px !important; }

        .slick-arrow::before {
            font-family: 'bootstrap-icons' !important; /* Use Bootstrap Icons */
            font-size: 24px !important;
            color: #333 !important; /* Arrow color */
            line-height: 1.7 !important; /* Center the icon */
        }
        
        /* Set the icon for each arrow */
        .slick-prev::before { content: "\f284"; } /* Bootstrap chevron-left icon */
        .slick-next::before { content: "\f285"; } /* Bootstrap chevron-right icon */

        /* Style for each individual programme card */
        .programme-item {
            /* Add some margin between items */
            margin: 0 10px;
            height: 150px;
            position: relative;
            border-radius: 8px;
            overflow: hidden; /* Clips the image and overlay to the rounded corners */
            cursor: pointer;
            transition: transform 0.2s ease-in-out;
        }

        .programme-item:hover {
            transform: translateY(-5px); /* Add a subtle hover effect */
        }

        .programme-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Dark overlay to make the text readable */
        .programme-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .programme-title {
            color: white;
            font-weight: bold;
            font-size: 1.5rem;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
        }
:root {
            --bright-orange: #ff6600;
        }

        .footer-enhanced {
            background-color: #1c1c1c; /* A slightly softer black */
            color: rgba(255, 255, 255, 0.7);
            font-family: sans-serif;
        }

        .footer-enhanced h5 {
            color: #ffffff;
            font-weight: 700;
            margin-bottom: 1.5rem;
            text-transform: uppercase;
        }

        .footer-enhanced p {
            line-height: 1.7;
        }

        /* Styling for the links in the footer */
        .footer-links a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            display: block;
            margin-bottom: 0.75rem;
            transition: color 0.3s ease-in-out;
        }

        .footer-links a:hover {
            color: var(--bright-orange);
        }
        
        /* Styling for the recent posts section */
        .recent-post a {
            color: #ffffff;
            text-decoration: none;
            font-weight: 600;
            display: block;
            transition: color 0.3s ease-in-out;
        }

        .recent-post a:hover {
            color: var(--bright-orange);
        }

        .recent-post small {
            font-size: 0.75rem;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.5);
        }

        /* Modern, circular social media icons */
        .social-icons a {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            background-color: #333;
            color: #fff;
            border-radius: 50%;
            margin-right: 10px;
            margin-bottom: 10px;
            text-decoration: none;
            transition: background-color 0.3s ease-in-out, transform 0.2s ease;
        }

        .social-icons a:hover {
            background-color: var(--bright-orange);
            transform: translateY(-2px);
        }

        /* Styling for the subscribe form */
        .form-control-dark {
            background-color: #333;
            border-color: #555;
            color: #fff;
        }
        .form-control-dark::placeholder {
            color: #aaa;
        }
        .form-control-dark:focus {
            background-color: #333;
            border-color: var(--bright-orange);
            color: #fff;
            box-shadow: 0 0 0 0.25rem rgba(255, 102, 0, 0.25);
        }

        .btn-subscribe {
            background-color: var(--bright-orange);
            border-color: var(--bright-orange);
            color: #fff;
            font-weight: bold;
            transition: background-color 0.3s, border-color 0.3s;
        }
        
        .btn-subscribe:hover {
            background-color: #e65c00;
            border-color: #e65c00;
            color: #fff;
        }

        .privacy-link {
            color: var(--bright-orange);
            text-decoration: none;
        }

        .footer-bottom {
            background-color: #000;
            color: rgba(255, 255, 255, 0.5);
        }
 :root {
            --primary-accent-color: #0056b3; /* A deep, professional blue */
        }

        body {
            background-color: #f9fafb; /* A soft, off-white background */
            font-family: 'Poppins', sans-serif;
            color: #333;
        }

        /* --- Page Header --- */
        .page-header h1 {
            font-family: 'Merriweather', serif;
            font-weight: 700;
        }

        /* --- Left Column: News Card Styling --- */
        .news-card {
            background-color: #ffffff;
            border: none;
            border-radius: 12px;
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            overflow: hidden; /* Important for the image zoom effect */
        }
        .news-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .news-card-img-container {
            height: 100%;
        }

        .news-card-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
        .news-card:hover .news-card-img {
            transform: scale(1.05); /* Subtle zoom on hover */
        }

        .category-tag {
            background-color: var(--primary-accent-color);
            color: #fff;
            padding: 4px 12px;
            border-radius: 50px;
            font-size: 0.75rem;
            font-weight: 500;
            text-transform: uppercase;
        }

        .news-title {
            font-family: 'Merriweather', serif;
            font-size: 1.3rem;
            margin-top: 0.5rem;
        }
        .news-title a {
            color: #212529;
            text-decoration: none;
            background-image: linear-gradient(var(--primary-accent-color), var(--primary-accent-color));
            background-size: 0% 2px;
            background-repeat: no-repeat;
            background-position: left bottom;
            transition: background-size 0.3s ease;
        }
        .news-title a:hover {
            background-size: 100% 2px;
        }

        .news-meta {
            font-size: 0.8rem;
            color: #888;
        }
        .news-meta i {
            margin-right: 5px;
        }

        .news-description {
            font-size: 0.95rem;
            color: #555;
            line-height: 1.6;
        }
        
        /* --- Right Column: Sticky Sidebar Styling --- */
        .sticky-sidebar {
            position: -webkit-sticky;
            position: sticky;
            top: 2rem; /* Add margin from the top */
        }

        .popular-news-widget {
            background-color: #ffffff;
            border-radius: 12px;
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07);
        }
        .popular-news-widget h4{
            font-family: 'Merriweather', serif;
        }

        .popular-news-list {
            list-style-type: none;
            padding-left: 0;
            counter-reset: popular-counter;
        }
        .popular-news-list li {
            counter-increment: popular-counter;
            display: flex;
            align-items: flex-start;
            padding-bottom: 1rem;
            margin-bottom: 1rem;
            border-bottom: 1px solid #eee;
        }
        .popular-news-list li:last-child {
            border-bottom: none;
            margin-bottom: 0;
        }

        .popular-news-list li::before {
            content: "0" counter(popular-counter);
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-accent-color);
            opacity: 0.5;
            margin-right: 1.25rem;
            transform: translateY(-3px);
        }

        .popular-news-list a {
            font-weight: 500;
            color: #333;
            text-decoration: none;
            transition: color 0.2s;
        }
        .popular-news-list a:hover {
            color: var(--primary-accent-color);
        }

         .page-title, .section-title, .card-title {
             font-family: 'Oswald', sans-serif;
        }

        .page-title {
            font-size: 4.5rem;
            font-weight: 700;
            text-transform: uppercase;
            text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
        }
        
        .section-title {
            font-weight: 700;
            font-size: 1.75rem;
            text-transform: uppercase;
            color: #495057;
        }

        /* --- Small Banner --- */
        .small-banner {
            height: 300px;
            background: url('https://images.unsplash.com/photo-1517649763962-0c623066013b?q=80&w=2070&auto=format&fit=crop') center center/cover no-repeat;
            color: white;
        }

        /* --- Main Article Card --- */
        .article-card-horizontal .article-img {
            width: 100%;
            height: 100%;
            min-height: 200px; /* Ensure a minimum height */
            object-fit: cover;
        }
        
        .article-card-horizontal .card-title a {
            color: #212529;
            text-decoration: none;
            transition: color 0.2s ease;
        }
        
        .article-card-horizontal .card-title a:hover {
            color: #0d6efd;
            text-decoration: underline;
        }

        /* --- STICKY SIDEBAR --- */
        .sidebar-sticky {
            /* This tells Bootstrap's sticky-top where to stop */
            top: 2rem; 
            z-index: -1;
        }

        .small-banner {
  position: relative; /* Parent must be relative */
  height: 300px;
  overflow: hidden; /* Hide anything that goes outside the rounded corners */
}

/* The background image: fills the entire container */
.banner-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1; /* Layer 1 */
}

/* The dark overlay: sits on top of the image */
.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
  z-index: 2; /* Layer 2 */
}

/* The text container: sits on top of everything */
.banner-text {
  position: relative; /* or position: absolute */
  z-index: 3; /* Layer 3 */
  text-align: center;
}

.page-title {
    font-size: 4.5rem;
    font-weight: 700;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
}

    .login-container {
        min-height: 100vh; /* Ensure it takes full viewport height */
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px; /* Add some padding for smaller screens */
    }

    .login-card {
        width: 100%;
        max-width: 400px; /* Increased max-width for a slightly larger card */
        border: none; /* Remove default Bootstrap card border */
        border-radius: 15px; /* Softer rounded corners */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* A more pronounced, soft shadow */
        padding: 30px; /* Increased padding inside the card */
        text-align: center; /* Center align content within the card */
    }

    .login-card .card-title {
        font-size: 2.2rem; /* Larger, more welcoming title */
        font-weight: 700; /* Bolder text */
        color: #343a40; /* Darker text for good contrast */
        margin-bottom: 30px; /* More space below the title */
    }

    .btn-google {
        background-color: #e65c00; /* Google's iconic red */
        color: #fff; /* White text for contrast */
        border: none;
        border-radius: 8px; /* Slightly rounded corners for the button */
        padding: 12px 25px; /* More padding for a larger click area */
        font-size: 1.1rem; /* Larger font size for button text */
        font-weight: 600;
        display: flex; /* Use flexbox for icon and text alignment */
        align-items: center; /* Vertically align items */
        justify-content: center; /* Horizontally center content */
        gap: 10px; /* Space between icon and text */
        width: 100%; /* Make button span full width of its container */
        transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for the button */
    }

    .btn-google:hover {
        background-color: #c23321; /* Darker red on hover */
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* Slightly larger shadow on hover */
        color: #fff; /* Ensure text remains white on hover */
    }

    /* You would typically load Google's own icon or use a font-awesome equivalent */
    /* For demonstration, we'll create a simple 'G' icon with CSS */
    .btn-google::before {
        content: 'G'; /* Simple 'G' as an icon placeholder */
        font-family: 'Roboto', sans-serif; /* Use Roboto for the G */
        font-weight: 700;
        font-size: 1.3em;
        line-height: 1;
        margin-right: 8px;
        color: #fff;
        display: inline-block;
        /* For a more accurate Google G, you'd embed an SVG or use a Google Fonts icon */
    }

    .error-message {
        background-color: #f8d7da; /* Light red background */
        color: #721c24; /* Dark red text */
        border: 1px solid #f5c6cb;
        border-radius: 8px;
        padding: 15px 20px;
        margin-bottom: 25px; /* Space below the error message */
        text-align: left; /* Align error text to left */
        font-size: 0.95rem;
    }

    /* Custom CSS for a more refined look */
    .about-section {
        padding: 30px 0; /* More vertical padding */
        background-color: #f8f9fa; /* Light background for contrast */
        color: #343a40; /* Darker text for readability */
    }
    .about-section h3 {
        font-size: 3rem; /* Larger and more prominent heading */
        margin-bottom: 10px; /* Space below heading */
        color: #e65c00; /* Primary brand color for the heading */
        position: relative;
        padding-bottom: 15px; /* Space for an underline effect */
    }

    .about-content {
        max-width: 900px; /* Slightly wider content area */
        margin-inline: auto;
        font-size: 1.15rem; /* Larger body text for better readability */
        line-height: 1.8; /* Increased line height for comfort */
        text-align: justify; /* Justify text for a cleaner look */
    }
    .about-content p {
        margin-bottom: 25px; /* More space between paragraphs */
    }
    /* Adding a subtle shadow for a card-like effect if desired */
    .about-card {
      
        padding: 40px;
        border-radius: 10px;
     
    }

    .navbar .nav-item .btn-outline-danger.btn-live-active {
    background-color: #e65c00 !important; /* The border color of btn-outline-danger */
    color: #fff !important; /* White text */
    border-color: #e65c00 !important; /* Keep the border color consistent */
}

/* New style for the active "Login" button */
.navbar .nav-item .btn-outline-primary.btn-login-active {
    background-color: #0d6efd !important; /* Bootstrap's primary blue */
    color: #fff !important; /* White text */
    border-color: #0d6efd !important; /* Keep the border color consistent */
}