/*page prev*/
.nb-per00 {
	margin: 10px 0;
	display: flex;
    gap: 5px;
}
.nb-prev,
.nb-next {
	background: none;
    color: black;
    border: 1px solid;
    width: 20px;
    height: auto;
    padding: 0px;
}
.nb-prev:hover,
.nb-next:hover {
	background: none;
    color: black;
	border: 1px solid;
}


/*laodaer*/
/* Spinner overlay (center spinner) */
.nb-loading-overlay { pointer-events: none; }
.nb-spinner { width:36px; height:36px; border:4px solid rgba(0,0,0,0.08); border-top-color:#3b6cb7; border-radius:50%; animation: nb-spin .8s linear infinite; }
/* ensure pager/buttons visible */
.nb-pager { display:flex; gap:8px; justify-content:center; margin-top:12px; }
.nb-pager button { padding:0; border:1px solid #eee; background:#fff; cursor:pointer; }
.nb-pager button[disabled] { opacity:.5; cursor:not-allowed; }
/* When active */
.nb-loading .nb-loading-overlay {
    opacity: 1;
    pointer-events: all;
}




/*clamp 3 katar*/
.nb-hero2-title a,
.nb-hero-small-info .nb-small-title a,
.nb-grid1-title a,
.nb-hero2-small .nb-small-title a {
	display: -webkit-box;
    -webkit-line-clamp: 3; /* 3 жол */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}



/*grid01*/
.nb-grid1 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.nb-grid1 .nb-grid1-item { 
	background:#fff; 
	padding:12px; 
	border-radius:6px; 
	border: 1px solid #f8f8f8;
}
.nb-grid1-img00 img {
	width: 100%;
    height: 200px;
    object-fit: cover;
}
.nb-grid1-title,
.nb-grid1-title a { 
	margin-bottom: 0;
	font-size:16px;
	text-decoration: none;
	color: var(--nv-text-color);
}
.nb-grid1 .nb-grid1-item:hover .nb-grid1-title a {
	color: var(--nv-primary-accent);
}
/* Mobile */
@media(max-width: 1080px){
    .nb-grid1 {
		grid-template-columns: repeat(3, 1fr);
    }
}
@media(max-width: 817px){
    .nb-grid1 {
		grid-template-columns: repeat(2, 1fr);
    }
}
@media(max-width: 768px){
    .nb-grid1 {
		grid-template-columns: 1fr;
    }
}


/*grid00*/
.nb-news-block .nb-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px;
}
.nb-news-block[data-columns="2"] .nb-grid { grid-template-columns: repeat(2,1fr); }
.nb-news-block[data-columns="3"] .nb-grid { grid-template-columns: repeat(3,1fr); }
.nb-news-block[data-columns="4"] .nb-grid { grid-template-columns: repeat(4,1fr); }
.nb-news-block .nb-excerpt { font-size:14px; color:#666; }
.nb-news-block .nb-item { 
	background:#fff; 
	padding:12px; 
	border-radius:6px; 
	border: 1px solid #f8f8f8;
}
.nb-grid .nb-item img {
	width: 100%;
    height: 200px;
    object-fit: cover;
}
.nb-grid .nb-item .nb-title,
.nb-grid .nb-item .nb-title a { 
	margin:8px 0; 
	font-size:16px;
	text-decoration: none;
	color: var(--nv-text-color);
}
.nb-grid .nb-item .nb-meta {
	font-size: 12px;
    color: gray;
}
.nb-grid .nb-item:hover .nb-title a {
	color: var(--nv-primary-accent);
}



/*nb-featured-list*/
.nb-featured-big {
	flex-direction: row;
    display: flex;
    gap: 10px;
	margin-bottom: 5px;
}

.nb-featured-img00 {
	flex: 0 0 25%;
    width: 25%;
    display: block;
    order: 0;
}
.nb-featured-img00 a img {
    object-fit: cover;
	height: 100px;
}
.nb-featured-big:hover .nb-hero2-title a {
	color: var(--nv-primary-accent);
}
.nb-featured-exp .nb-cat {
	font-size: 12px;
    color: gray;
}
.nb-featured-exp .nb-hero2-title,
.nb-featured-exp .nb-hero2-title a{
	font-size: 15px;
    margin-bottom: 0;    
	color: var(--nv-text-color);
	text-decoration: none;
}
.nb-featured-exp .nb-date {
	font-size: 12px;
    color: gray;
}




/*hero2*/
/* HERO STYLE 2 LAYOUT */
.nb-hero2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* ==== Hero2 — Big card style ==== */
.nb-hero2-big {
	height: 400px;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(14, 21, 47, 0.08);
  transition: transform .28s ease, box-shadow .28s ease;
}

/* image as cover */
.nb-hero2-big .nb-hero2-big-thumb,
.nb-hero2-big .nb-hero2-big-thumb img {
  display: block;
  width: 100%;
  height: 400px;               /* desktop height */
  object-fit: cover;
  object-position: center;
  border-radius: 0;            /* keep outer radius on container */
}

/* small uplift on hover */
/*.nb-hero2-big:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(14, 21, 47, 0.12);
}*/

/* soft dark gradient overlay so text is readable */
.nb-hero2-big::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}

/* badge (category) */
.nb-hero2-big .nb-cat {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 6;
  display: inline-block;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: rgba(0,0,0,0.55);
  border-radius: 6px;
  text-transform: capitalize;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}

/* title block — positioned above the overlay bottom */
.nb-hero2-big .nb-hero2-title {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 56px; /* leave space for date below */
  z-index: 6;
  margin: 0;
  line-height: 1.12;
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 4px 18px rgba(0,0,0,0.45);
}

/* title link styles */
.nb-hero2-big .nb-hero2-title a {
  color: inherit;
  text-decoration: none;
}

/* date */
.nb-hero2-big .nb-date {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 6;
  font-size: 13px;
  color: rgba(255,255,255,0.9);
  background: transparent;
  padding: 4px 6px;
}

/* make sure clickable area is accessible */
.nb-hero2-big .nb-hero2-big-thumb { display:block; }

/* Accessibility: focus outline for keyboard nav */
.nb-hero2-big a:focus { outline: 3px solid rgba(59,108,183,0.18); outline-offset: 2px; }

/* Responsive adjustments */
@media (max-width: 1024px) {
  .nb-hero2-big .nb-hero2-big-thumb img,
  .nb-hero2-big .nb-hero2-big-thumb { height: 100%; }
  .nb-hero2-big .nb-hero2-title { font-size: 20px; bottom: 52px; }
}

@media (max-width: 768px) {
  .nb-hero2 {
    grid-template-columns: 1fr; /* stack columns on small screens */
  }
  .nb-hero2-big .nb-hero2-big-thumb img,
  .nb-hero2-big .nb-hero2-big-thumb { height: 100%; }
  .nb-hero2-big .nb-hero2-title { font-size: 18px; bottom: 48px; left: 14px; right: 14px; }
  .nb-hero2-big .nb-cat { top: 12px; left: 12px; font-size: 12px; padding: 5px 8px; }
  .nb-hero2-big .nb-date { bottom: 12px; left: 12px; font-size: 12px; }
}

/* small block grid */
.nb-hero2-small-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
/* ==========================================
   RIGHT COLUMN — MAKE SMALL CARDS LIKE HERO BIG CARD
   ========================================== */
.nb-hero2-small {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 193px;
    display: block;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    transition: .25s ease;
}
/*.nb-hero2-small:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgba(0,0,0,0.22);
}*/
.nb-hero2-small-thumb img {
    width: 100%;
    height: 193px;
    object-fit: cover;
    display: block;
}
/* Dark gradient overlay */
.nb-hero2-small::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.0) 35%, rgba(0,0,0,0.70) 100%);
    pointer-events: none;
}
/* Category TOP LEFT (same as big hero) */
.nb-hero2-small .nb-cat-sm {
    position: absolute;
    top: 14px;
    left: 16px;
    z-index: 10;
    padding: 0px 5px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
}
/* Title bottom */
.nb-hero2-small .nb-small-title {
    position: absolute;
    bottom: 50px;
    left: 16px;
    right: 16px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    z-index: 12;
}
.nb-hero2-small .nb-small-title a {
    color: #fff;
    text-decoration: none;
}
/* Date under title */
.nb-hero2-small .nb-small-date {
    position: absolute;
    bottom: 20px;
    left: 16px;
    font-size: 12px;
    color: #e9e9e9;
    z-index: 12;
}
/* Responsive */
@media(max-width: 768px){
    .nb-hero2-small-thumb img {
        height: 100%;
    }
}


/* Mobile */
@media(max-width: 768px){
    .nb-hero2 {
        grid-template-columns: 1fr;
    }
    .nb-hero2-small-grid {
        grid-template-columns: 1fr 1fr;
    }
}



/*hero*/
.nb-hero {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 20px;
}

/* BIG POST */
.nb-hero-big {
    
}
.nb-hero-big-img00 img {
	height: 300px;
    object-fit: cover;
}
.nb-hero-big-info .nb-title,
.nb-hero-big-info .nb-title a {
    font-size: 18px;
    margin-bottom: 0;
    color: var(--nv-text-color);
    text-decoration: none;
}
.nb-hero-big-info01 {
	display: flex;
    gap: 10px;
    align-items: center;
	padding: 10px 0;
}
.nb-hero-big-info01 .nb-date,
.nb-hero-big-info01 .nb-cat {
	font-size: 12px;
    color: gray;
    border: 1px solid #ececec;
    padding: 0px 4px;
    border-radius: 5px;
}
.nb-hero-big-info01 .nb-small-excerpt {
	font-size: 14px;
}

.nb-hero-big:hover .nb-hero-big-info .nb-title a {
	color: var(--nv-primary-accent);
}

/* SIDE SMALL POSTS */
.nb-hero-small {
	flex-direction: row;
    display: flex;
    gap: 10px;
    margin-bottom: 5px;
}
.nb-hero-small-img00 {
	flex: 0 0 25%;
    width: 25%;
    display: block;
    order: 0;
}
.nb-hero-small img {
    object-fit: cover;
    height: 100px;
}

.nb-hero-small-info .nb-cat-sm,
.nb-hero-small-info .nb-small-date {
	font-size: 12px;
    color: gray;
}
.nb-hero-small-info .nb-small-title,
.nb-hero-small-info .nb-small-title a{
	font-size: 15px;
    margin-bottom: 0;
    color: var(--nv-text-color);
    text-decoration: none;
	font-weight: bold;
    line-height: 1.5;
}
.nb-hero-small:hover .nb-hero-small-info .nb-small-title a {
	color: var(--nv-primary-accent);
}

/* Responsive */
@media(max-width: 768px) {
    .nb-hero {
        grid-template-columns: 1fr;
    }
    .nb-hero-side .nb-hero-small {
        margin-bottom: 20px;
    }
}

/*hero 3*/
.nb-hero3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* BIG POST */
.nb-hero3 .nb-hero-big {
    margin-bottom: 20px;
}
.nb-hero-big-img00 img {
	height: 200px;
    object-fit: cover;
}
.nb-hero-big-info .nb-title,
.nb-hero-big-info .nb-title a {
    font-size: 18px;
    margin-bottom: 0;
    color: var(--nv-text-color);
    text-decoration: none;
}
.nb-hero-big-info01 {
	display: flex;
    gap: 10px;
    align-items: center;
	padding: 10px 0;
}
.nb-hero-big-info01 .nb-date,
.nb-hero-big-info01 .nb-cat {
	font-size: 12px;
    color: gray;
    border: 1px solid #ececec;
    padding: 0px 4px;
    border-radius: 5px;
}
.nb-hero-big-info01 .nb-small-excerpt {
	font-size: 14px;
}

.nb-hero-big:hover .nb-hero-big-info .nb-title a {
	color: var(--nv-primary-accent);
}

/* SIDE SMALL POSTS */
.nb-hero3-small {
	flex-direction: row;
    display: flex;
    gap: 10px;
    margin-bottom: 5px;
}
.nb-hero-small-img00 {
	flex: 0 0 25%;
    width: 25%;
    display: block;
    order: 0;
}
.nb-hero-small img {
    object-fit: cover;
    height: 100px;
}

.nb-hero-small-info .nb-cat-sm,
.nb-hero-small-info .nb-small-date {
	font-size: 12px;
    color: gray;
}
.nb-hero-small-info .nb-small-title,
.nb-hero-small-info .nb-small-title a{
	font-size: 15px;
    margin-bottom: 0;
    color: var(--nv-text-color);
    text-decoration: none;
	font-weight: bold;
    line-height: 1.5;
}
.nb-hero3-small:hover .nb-hero-small-info .nb-small-title a {
	color: var(--nv-primary-accent);
}

/* Responsive */
@media(max-width: 768px) {
    .nb-hero {
        grid-template-columns: 1fr;
    }
    .nb-hero-side .nb-hero-small {
        margin-bottom: 20px;
    }
}








/**/
/* LOADING SPINNER (square grid animation) */
.nb-loader {
    width: 40px;
    height: 40px;
    margin: 20px auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    opacity: 1;
}

.nb-loader div {
    width: 10px;
    height: 10px;
    background: #3b6cb7;
    animation: nbLoaderAnim 1.2s infinite ease-in-out;
}

@keyframes nbLoaderAnim {
    0%, 70%, 100% { opacity: 0.3; transform: scale(1); }
    35% { opacity: 1; transform: scale(1.5); }
}

.nb-loader div:nth-child(1) { animation-delay: 0.1s; }
.nb-loader div:nth-child(2) { animation-delay: 0.2s; }
.nb-loader div:nth-child(3) { animation-delay: 0.3s; }
.nb-loader div:nth-child(4) { animation-delay: 0.2s; }
.nb-loader div:nth-child(5) { animation-delay: 0.3s; }
.nb-loader div:nth-child(6) { animation-delay: 0.4s; }
.nb-loader div:nth-child(7) { animation-delay: 0.3s; }
.nb-loader div:nth-child(8) { animation-delay: 0.4s; }
.nb-loader div:nth-child(9) { animation-delay: 0.5s; }




/*shummer*/
.nb-shimmer-hero2 {
   /* width: 100%;
    height: 400px;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    background: #e3e3e3;*/
	
	display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.nb-shimmer-big {
	width: 100%;
    height: 400px;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    background: #e3e3e3;
}
.nb-shimmer-small {
	display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.nb-shimmer-small01 {
	width: 100%;
    height: 190px;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    background: #e3e3e3;
}

.nb-shimmer-big::after
.nb-shimmer-small01::after {
    content: "";
    position: absolute;
    top:0;
    left:-100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
    100% { left:100%; }
}


/* Responsive adjustments */
@media (max-width: 768px) {
  .nb-shimmer-hero2 {
    grid-template-columns: 1fr; /* stack columns on small screens */
  }
  .nb-shimmer-big { height: 400px; }
}


/*shimmer featured*/
.nb-shimmer-featured_list {
	flex-direction: row;
    display: flex;
    gap: 10px;
    margin-bottom: 5px;
}
.nb-shimmer-line01 {
	flex: 0 0 25%;
    width: 25%;
    display: block;
    order: 0;
    height: 100px;
    position: relative;
    overflow: hidden;
    background: #e3e3e3;
}
.nb-shimmer-line02 {
	width: 100%;
    height: 100%;
}
.nb-shimmer-line02 .nb-shimmer-line02-1 {
    width: 100%;
    display: block;
    height: 20px;
    background: #e3e3e3;
	margin-bottom: 5px;
}



/*shimmer hero*/
.nb-shimmer-hero {
	display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 20px;
}
.nb-shimmer-hero-big00 {
	display: block;
	width: 100%;
}
.nb-shimmer-hero-big {
	height: 300px;
	width: 100%;
    display: block;
	background: #e3e3e3;
	position: relative;
    overflow: hidden;
}

.nb-shimmer-hero-side {
	display: block;
	width: 100%;
}

.nb-shimmer-hero-side {
	flex-direction: row;
    display: flex;
    gap: 10px;
    margin-bottom: 5px;
}
.nb-shimmer-hero-small-00 {
	flex: 0 0 25%;
    width: 25%;
	height: 100px;
    display: block;
    order: 0;
	background: #e3e3e3;
	position: relative;
    overflow: hidden;
}
.nb-shimmer-hero-small,
.nb-shimmer-hero-big01 {
	height: 20px;
	width: 100%;
    display: block;
	background: #e3e3e3;
	position: relative;
    overflow: hidden;
	margin-bottom: 5px;
}
.nb-shimmer-hero-small-01 {
	display: block;
	width: 100%;
}
@media(max-width: 768px) {
    .nb-shimmer-hero {
        grid-template-columns: 1fr;
    }
}