body{font-family: "Inter", "Noto Sans Malayalam", sans-serif; font-size: 13px; line-height:1.4rem; font-smooth: always;}
a, a:hover{text-decoration: none; color: #333 !important; word-break:break-word; }
a:hover{text-decoration: none; color: rgba(0,0,0,1) !important;}
strong{font-weight: 600;}
h4{font-size: 1.4rem}
h5{line-height: 1.7rem}
h4, h5, h6{font-weight: 500 !important}
nav .main-menu .nav-link{line-height: 38px; font-weight: 600; font-size: 13px}
.dropdown-menu-start{border-radius: 10px; min-width: 200px;}
.dropdown-menu-start a{font-size: 13px; font-weight: 500;}
.menu .material-symbols-outlined{width: 24px; height:24px; overflow: hidden;}
.border-top, .border-bottom{border-color: #eaeaea !important}
.logo{max-height: 61px}
.sm-show{display: none;}
.icon{max-height: 28px}
.login{font-weight: 600; font-size: 13px; line-height: 24px; padding: 2px 12px}
.search .icon, .login .icon{max-height: 22px}
.image{background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 8px; background-color: #eee; transition: all .5s;}
.ratio{overflow: hidden; border-radius: 8px;}

.category{display: block; font-size: 11px; text-transform: uppercase; color: #888; margin-bottom: .25rem}
.category strong {color: #dc3545 !important;}

.news:hover .image{ transform: scale(1.05); transition: all .5s;}

.just-in{background-image: url('just-in.png'); background-repeat: no-repeat; background-position: left 6px; padding-left: 2rem}
.three-line {text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical; 
	padding-bottom: .1rem; line-height:1.4rem}
.two-line {text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.one-line {text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.headline{background-image: url('headline.png'); background-repeat: repeat-x; background-position: center;}

.dist a{font-size: 13px; padding: 2px 10px; border-radius: 10px; border:1px solid #ddd !important; background-color: #f6f6f6;
 margin-right: 2px; color: #252525}
.dist .active{border:1px solid #ddd; background-color: #252525 !important; color: #fff !important}

.light-red {background-color: #ff0000}
.carousel-indicators button{background-color: #666 !important; width: 7px !important; height: 7px !important; border-radius: 8px;}
.carousel-indicators .active{background-color: #b20000 !important;}



.slider-container, .slider2-container {
  display: flex; overflow: hidden; width: 100%;
}

.slider-item, .slider2-item {
  flex: 0 0 20%; margin:0; padding: 10px; color: white;border-radius: 5px;transition: transform 0.3s ease;
}

.slider-item a {overflow: hidden; border-radius: .75rem;}
.slider-item a h6 {line-height: 1.4rem}

.centered {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9;}

.section-menu .card{color: #666 !important; border:none; padding: 4px 0; transition: all .2s;}
.section-menu .card:hover{background-color: #f7f7f7; padding-left: 4px}
.section-menu h6{font-weight: 600}


.gradient-border {
  border-top: 3px solid;
  border-image: linear-gradient(45deg, #ff0000, #ff7300,  #3700ff, #ff00e6);
  border-image-slice: 1;
}

.gradient-border2 {
  border: 1px solid;
  border-image: linear-gradient(-45deg, #ff0000, #ff7300,  #3700ff, #ff00e6);
  border-image-slice: 1;
}

.slider-container{overflow: hidden; width: 100%; font-size: 15px; line-height:1rem}
.slider-track { display: flex; position: relative; left: 0; transition: left 0.5s ease-in-out; /* Smooth movement */}
.slider-item{ flex: 0 0 33%;  margin:0; color: white;border-radius: 5px; transition: transform 0.3s ease; position: relative;}
.controls span{cursor: pointer;}


#shorts .iframe {border-radius: 18px; overflow: hidden;}
#shorts .slider-item{ flex: 0 0 20%; margin:0; color: white;border-radius: 5px; transition: transform 0.3s ease; position: relative;}

.sect-overlay{position: absolute;bottom: 0; left: 0; min-height: 100px; width: 100%; background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)); 
  color: #fff; padding: 20px; z-index: 99 }

.card-columns .card {display: inline-block; width: 100%; line-height: 1.2rem}

.ratio-9x16 {aspect-ratio: 9/12.5;}
.ratio-9x16 iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }

.logo-section {
  transition: transform 0.3s ease, opacity 0.3s ease;
  will-change: transform, opacity;
}

.logo-section.hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}


.sticky-mobile {
  position: static;
}
@media (max-width: 1024px) { /* Bootstrap's lg breakpoint */
  .sticky-mobile {
    position: sticky;
    top: 0;
    z-index: 1020; /* Same as .sticky-top */
  }
}

/* Enable sticky-top for desktop/laptop only */
.sticky-desktop {
  position: static;
}
@media (min-width: 992px) {
  .sticky-desktop {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}


.quiz-container {margin: auto; background-image: url('quiz-bg.jpg'); color: #fff; padding: 15px; border-radius: 10px; 
border:1px solid #eee; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
.question { display: none; }
.question.active { display: block; }
.options{list-style-type: upper-latin; list-style-position: outside; padding-left: 0;}
.options .qtn{overflow: hidden; font-size: 16px}
.qtn{
  cursor: pointer; border-color: #726ebd !important; background: #332f96;
  clip-path: polygon(
    10% 0%,   /* top left point */
    90% 0%,   /* top right point */
    100% 50%, /* right middle point */
    90% 100%, /* bottom right */
    10% 100%, /* bottom left */
    0% 50%    /* left middle point */
  );
}
.qtn:hover{background: #380967}
.qtn input {display: none;}

.summary { display: none; }

.quiz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  margin-bottom: 20px;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.6; }
  100% { opacity: 1; }
}

.qtn.correct {
  border-color: green !important;
  background-color: #018c53;
  animation: blink 0.8s ease-in-out 1; /* Blinks twice */
}

.qtn.wrong {
  border-color: red !important;
  background-color: #640961;
}


.options.answered .qtn {
  cursor: default;
  pointer-events: none; /* disables hover/click */
}

.legal a{border-radius: 12px; padding-top: 18px !important}
.legal a:hover{box-shadow: 0 0 10px rgba(0,0,0,0.1); }

.custom-pills .nav-link{background: #ffebee; margin-right: 2px; margin-bottom: 2px; border-radius: 12px; border:1px solid #eca4af; padding: 4px 10px}
.custom-pills .active{background: #e41e42 !important; color: #fff !important}

.subscription-plan .active{ border:1px solid #ffca05;}
.subscription-plan .bg-white:hover{box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important}
.ribbon {
      width: 150px;
      background: #c90808; /* Green background */
      color: white;
      text-align: center;
      font-weight: bold;
      position: absolute;
      font-size: 13px;
      top: 25px;
      right: -35px;
      transform: rotate(45deg);
      z-index: 1;
      padding: 5px 0;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    }
    .ribbon-container {
      position: relative;
      overflow: hidden;
    }



  .card-columns {
  column-count: 4;
  column-gap: 1.25rem;
  orphans: 1;
  widows: 1;
}

.card-columns .card {
  break-inside: avoid; /* Prevents cards from breaking across columns */
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 1.25rem;
}



@media (max-width: 1200px) {
  .card-columns {
    column-count: 3;
  }
}

@media (max-width: 768px) {
  .card-columns {
    column-count: 2;
  }
}

@media (max-width: 480px) {
  .card-columns {
    column-count: 1;
  }
}

@media (min-width: 1400px) and (max-width: 3000px) {
  nav .main-menu .nav-link{line-height: 38px; font-weight: 600; font-size: 14.5px}
}
@media (min-width: 1360px) and (max-width: 3000px) {
  .lg-hide{display: none}
	.navigation a{color: #133283 !important;}
  .quiz-container {padding: 30px;}
  .custom-pills .nav-link{font-size: 15px !important;}
}


@media (min-width: 1080px) and (max-width: 1200px) {
.card-container {
    column-count: 4;
    column-gap: 1.25rem;
    display: block !important;
  }

  .card-container .card {
    display: inline-block;
    width: 100%;
    min-width: auto !important;
  }

  }

@media (min-width: 760px) and (max-width: 1024px) {
	.date-lg{display: none}
	.time-date{display: block }
  .logo{max-height: 45px}
	.navigation{display: none;}
	.slider-item, .slider2-item {flex: 0 0 50%; margin:0; padding: 10px; color: white;border-radius: 5px;transition: transform 0.3s ease;}
  #shorts .slider-item{ min-width: 50%;}
  .section-slide{width: 100%; overflow: auto;}
  .section-slide .row{min-width: 1300px}
  .card-columns {-webkit-column-count: 4; -moz-column-count: 4; column-count: 4; 
    -webkit-column-gap: 1.25rem; -moz-column-gap: 1.25rem; column-gap: 1.25rem; orphans: 1; widows: 1; }
    .card-container .card a{overflow:hidden;border-radius:.5rem}
  .card-container{display:block!important;column-count:3;column-gap:1.25rem;overflow:visible!important}
} 


@media (min-width: 660px) and (max-width: 724px) {
  .card-container{display:block!important;column-count:3;column-gap:1.25rem;overflow:visible!important}
  }

  
@media (min-width: 992px) {
  .card-container{display:block!important;column-count:6;column-gap:1.25rem;overflow:visible!important}
  .card-container .card{display:inline-block;width:100%;min-width:auto!important}
  .card-container .card a{overflow:hidden;border-radius:.5rem}
  .carousel-prev,.carousel-next{display:none!important}
  .category-obi .card-container {column-count:4;}
}

@media (min-width: 320px) and (max-width: 600px) {
  h6{font-size: 14px; line-height: 1.1rem !important}
  .sm-hide{display: none !important;}
	.logo{max-height: 35px}
	.sm-show{display: inline-block;}
	
	.sections{max-height: 32px}
	.time-date{font-size: 10px}
	.navigation{position: fixed; bottom: 0; left: 0; width: 100%; overflow: auto; background-color: #043e7d !important; 
		border-top:none !important; display: block !important; padding: 3px 0; z-index: 99999999}
    .navigation nav{min-width: 830px;}
    .navigation li {padding: .25rem .75rem; white-space: nowrap;}
    .navigation a{font-size: 13px; line-height: 18px !important; color: #fff !important}
    .navigation .sm-show{display: block; text-align: center;}
    .navigation a img{max-height:22px; filter: invert(1); filter: brightness(2);}
    .navigation .border-end{border-color: #2a65a1 !important}
    .footer{padding-bottom: 60px !important}
    .slider{width: 100%; overflow: hidden;}
    .slider .slider-container{min-width: 1200px}
  .section-slide{width: 100%; overflow: auto;}
  .section-slide .row{min-width: 1300px}
  .slider-item{ min-width: 100%; }
   #shorts .slider-container{min-width: 98%; padding-right: 6px}
  #shorts .slider-item {
  flex: 0 0 100%; /* default 1 per row (mobile) */
  scroll-snap-align: start;
}
  .first-news {font-size: 1.1rem !important}
  .card-columns {-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 1.25rem; -moz-column-gap: 1.25rem; column-gap: 1.25rem; orphans: 1; widows: 1; }

.obi-btn{z-index:11; width:35px; height:35px; line-height:20px !important}
  


.card-container{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem;padding:0 1rem}
.card-container .card{flex:0 0 85%;scroll-snap-align:start}
.card-container .card a{overflow:hidden;border-radius:.5rem}
.carousel-prev,.carousel-next{position:absolute;top:50%;transform:translateY(-50%);background:white;border:1px solid #999;width:36px;height:36px;line-height:18px;border-radius:50%;z-index:10}
.carousel-prev{left:10px}
.carousel-next{right:10px}


}