a{text-decoration: none;}
:root {--navy: #ADD8E6; --teal-dark: #062737; --accent: #f0c419; --muted-text: #8b9aad;}
body {font-family: 'Arial Crisp Regular', Arial, sans-serif; color:#222; background:#fff;}


/* Top thin utility bar */
.top-utility {background:#e6eaeb;padding:8px 0;font-size:14px}
.top-utility a{margin-right: 20px; color: #606062; text-decoration: none;}
.top-utility a span{margin-right: 4px;}
.top-utility a:hover{color:#ADD8E6;}
.language select{background-color: transparent; color: #606062; border: 0; margin-right: 10px;}


/* Navbar */
.main-navbar {background:#191978; height: 70px;}
.main-navbar .nav-link {color:#cfe0ff; font-weight:500;}
.main-navbar .nav-link:hover {color:#fff}
.main-navbar .logo-img {
  height: 100%;     /* navbar height ke barabar */
  max-height: 70px; /* ensure overflow na ho */
  width: auto;      /* aspect ratio maintain */
  object-fit: contain;
}
.watchLiveBtn a{background-color: #d13125 !important; padding: 8px 16px; border-radius: 0; box-shadow: 0px 0px 10px 0px #333;}
.watchLiveBtn a:hover{background-color: #9f0503!important; color: #fff!important;}

.text-muted {
  color: #606062!important;
}

.darkGray {
  color: #606062!important;
}

.darkGray p {
  color: #606062!important;
}

/* Yellow border Start */
/* Navbar link underline effect */
.main-navbar .nav-link {
  position: relative;
  color: #fff;
  font-weight: 500;
  padding: 12px 16px;
  transition: color 0.3s ease;
}

.main-navbar .nav-link::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 0%;
  height: 3px;
  background-color: #efda4d;
  transition: all 0.3s ease;
}

.main-navbar .nav-link:hover {
  color: #efda4d;
}

.main-navbar .nav-link:hover::after {
  width: 100%; /* default desktop full width */
}

/* Responsive fix for underline width */
@media (max-width: 991px) {
  .main-navbar .nav-link::after {
    left: 15%;
    transform: translateX(-50%);
  }
  .main-navbar .nav-link:hover::after {
    width: 30%; /* tablet line width */
  }
}

@media (max-width: 575px) {
  .main-navbar .nav-link::after {
    left: 15%;
    transform: translateX(-50%);
  }
  .main-navbar .nav-link:hover::after {
    width: 20%; /* phone line width */
  }
}
/* Yellow border End */


/* Sidebar style */
#sidebar {width: 250px; position: fixed; top: 0; left: -250px; height: 100%; background: #f8fa55; color: #606062; transition: all 0.3s ease; overflow-y: auto; z-index: 1050;}
#sidebar.active {left: 0;}
#sidebar .close-btn {position: absolute; top: 10px; left: 18px; font-size: 25px; cursor: pointer; color: #606062;}
#sidebar .nav-link {color: #606062; width: 100%; display: block;}
#sidebar .nav-link:hover {background: #fff!important; color:#606062!important;}

#sidebar .dropdown-menu {
  background-color: #fff;
  border: none;
  width: 100%;
  margin-left: 0;
  border-radius: 0;
}

#sidebar .dropdown-item {
  color: #606062 !important;   /* black text */
  width: 100%;
}

#sidebar .dropdown-item:hover {
  background: #f1f1f1;  /* halka grey hover */
  color: #606062 !important;
}

.socialIcon a {
  color: #606062;
}

.see-card {
    position: relative;
}

.play-btn {
    position: absolute;
    bottom: 18px; /* bottom se distance */
    right: 10px;  /* right se distance */
    width: 40px;
    height: 40px;
    background-color: #007bff; /* blue circle */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
}

.play-btn:hover {
    background-color: #0056b3; /* hover effect */
}

.play-btn-2 {
    position: absolute;
    bottom: 10px; /* bottom se distance */
    right: 10px;  /* right se distance */
    width: 40px;
    height: 40px;
    background-color: #007bff; /* blue circle */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
}

.play-btn-2:hover {
    background-color: #0056b3; /* hover effect */
}




#content {transition: margin-left 0.3s ease;}
#content.active {margin-left: 250px;}
#sidebarToggle .navbar-toggler-icon {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");}
.btn-light-toggle{background:none; border:0; box-shadow: none;}


/* HERO */
.hero .big-card {height:320px; object-fit:cover; width:100%;}
.hero .small-card {height:150px; object-fit:cover; width:100%;}
.hero h4 {font-size:1.1rem; line-height:1.3; margin:6px 0;}
.news-badge {position:absolute; bottom:0; left:0; background:#efda4d; color:#606062; padding:4px 10px;font-weight:500; font-size:11px; border-radius:0px;}
.news-badge:hover, .news-badge.active, .news-badge:focus{background-color: #efda4d;}
.news-badge-2 {position:absolute; bottom:7px; left:0; background:#efda4d; color:#606062; padding:4px 10px;font-weight:500; font-size:11px; border-radius:0px;}
.news-badge-2:hover, .news-badge.active, .news-badge:focus{background-color: #efda4d;}


/* Video strip */
.video-strip {background:#1d3c83; padding:40px 0; color:#fff}
.video-card {overflow:hidden; background:#606062;}
.video-card img {width: 100%; height: 200px; object-fit: cover; display: block;}
.viewLinks a{color: #fff; text-transform: uppercase;}
.viewLinks a i{font-size: 14px;}
.video-badge {position: absolute; bottom: 0; left: 0; background: #222529; color: #fff; padding: 4px 10px; font-size: 11px; font-weight: 500; border-radius: 0px;}
.video-badge:hover, .video-badge.active, .video-badge:focus{background-color: #222529;}


/* Editor's Pick */
.editor-pick img {object-fit:cover; width:100%;}
.editor-pick .card-small {height:150px; object-fit:cover; width:100%;}
.editor-pick h3{font-weight: 500;}
.editor-badge {position:absolute; bottom:0; left:0; background:#efda4d; color:#606062; padding:3px 8px; font-size:11px; font-weight:500; border-radius:0px;}
.editor-badge:hover, .editor-badge.active, .editor-badge:focus{background-color: #efda4d;}    
.editor-badge-2 {position:absolute; bottom: 7px; left:0; background:#efda4d; color:#606062; padding:3px 8px; font-size:11px; font-weight:500; border-radius:0px;}
.editor-badge-2:hover, .editor-badge.active, .editor-badge:focus{background-color: #efda4d;}    
.img-fluid{height: 320px;}


/* See Section */
.see-section {background:#1d3c83; padding:50px 0; color:#fff}
.see-card {position:relative; overflow:hidden}
.see-card img {width:100%; height:350px; object-fit:cover; margin-bottom: 10px;}
.see-card p {font-size:14px; color:#fff}


/* Footer */
.site-footer {padding:34px 0; background:#f9fafb; color:#6b7280; font-size:14px;}
.site-footer .list-inline-item a{color: #606062;}
.footerIcon li{border-right: 1px solid #ddd; line-height: 0;}
.footerIcon li:last-child{border-right: 0;}
.site-footer .footerIcon a{font-size: 20px; margin-right: 15px;}
.site-footer a:hover{color: #ADD8E6;}

/* hide Google translate top bar */
.goog-te-banner-frame.skiptranslate,
.VIpgJd-ZVi9od-ORHb-OEVmcd {
  display: none !important;
  height: 0 !important;
  visibility: hidden !important;
}

/* also fix body margin added by the bar */
body {
  top: 0px !important;
}

/* Hover colors for each brand */
.footerIcon a:hover .fa-youtube {
  color: #FF0000; /* YouTube red */
}

.footerIcon a:hover .fa-facebook-f {
  color: #1877F2; /* Facebook blue */
}

.footerIcon a:hover .fa-x-twitter {
  color: #000000; /* X (Twitter) black */
}

.footerIcon a:hover .fa-tiktok {
  color: #010101; /* TikTok black */
}

.footerIcon a:hover .fa-instagram {
  color: #E1306C; /* Instagram pink */
}

.footerIcon a:hover .fa-linkedin-in {
  color: #0077B5; /* LinkedIn blue */
}

.footerIcon a:hover .fa-whatsapp {
  color: #25D366; /* WhatsApp green */
}



/* Responsive */
@media(max-width:991px) {
    .hero .big-card {height:260px}
    .hero .small-card {height:150px}
    .video-card img {height:160px}
    .see-card img {width:100%; height:350px; object-fit:cover;}
    .navbar-toggler{color: #fff; border-color: #fff; background-color: #fff;}
    .navbar-toggler span{color: #fff; border-color: #fff;}
    .navbar-toggler:focus{box-shadow: none;}
    .main-navbar .logo-img {
      height: 100%;     /* navbar height ke barabar */
      max-height: 55px; /* ensure overflow na ho */
      width: auto;      /* aspect ratio maintain */
      object-fit: contain;
    }
    .navbar-toggler-icon {
        width: 1.1em;
        height: 1.2em;
    }
    #mainNav {
        background-color: #f8fa55;
        padding: 1rem;
        position: absolute;   /* take it out of normal flow */
        top: 100%;            /* place it right below the navbar */
        left: 0;
        width: 100%;
        z-index: 1050;        /* higher than content */
    }
    
    #mainNav .nav-link {
     color: #606062 !important;
    }
}

@media(max-width:767px)
{
    .top-utility span{display: none;}
    .top-utility span.topBarIcon{display: block;}
    .watchLiveBtn{display: none;}
    .site-footer{text-align: center;}
    .main-navbar .logo-img {
      height: 100%;     /* navbar height ke barabar */
      max-height: 55px; /* ensure overflow na ho */
      width: auto;      /* aspect ratio maintain */
      object-fit: contain;
    }
    .navbar-toggler-icon {
        width: 1.1em;
        height: 1.2em;
    }
}



/* Breadcrumb */
.breadcrumb {
  margin-bottom: 15px;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.breadcrumb a {
  color: #ADD8E6;
  text-decoration: none;
}
.breadcrumb span {
  color: #555;
}
.breadcrumb i{font-size: 12px; font-weight: 300; margin: 0 5px; line-height: 0;}

/* Layout */
.content-area {
  display: flex;
  gap: 20px;
}
.main-content {
  flex: 3;
}
.sidebar {
  flex: 1;
}

/* Sidebar Top Stories */
.sidebar h5 {
  margin-bottom: 30px;
  font-size: 20px;
  font-weight: 500;
}
.top-stories {
  list-style: none;
  padding-left: 0;
}
.top-stories li {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}
.top-stories img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  margin-right: 10px;
  border-radius: 0;
}
.top-stories a {
  color: #333;
  text-decoration: none;
  font-weight: 500;
  font-size: 12px;
}

/* Comments Section */
.comments-section {
  margin-top: 40px;
}
.comment-form input,
.comment-form textarea {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 0;
}
.comment-form button {
  background: #0073aa;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 0;
  cursor: pointer;
}
.comment-form button:hover {
  background: #005f8d;
}

/* Comments List */
.comment-list {
  list-style: none;
  margin-top: 20px;
}
.comment-list li {
  background: #f9f9f9;
  padding: 15px;
  border-radius: 0;
  margin-bottom: 15px;
}
.comment-author {
  font-weight: bold;
  margin-bottom: 5px;
}
.comment-meta {
  font-size: 12px;
  color: #999;
  margin-bottom: 10px;
}
.comment-text {
  font-size: 14px;
}


.detailsArea h1{font-size: 24px; margin-bottom: 25px;}
.detailsArea img{width: 100%; object-fit: cover; margin-bottom: 20px;}