/* Lawyer Justice HTML5 Template */


/************ TABLE OF CONTENTS ***************
1. Fonts
2. Reset
3. Global
4. Main Header
5. Main Slider
6. Services Section
7. About Company
8. Company History
9. Two Column Fluid
10. Our Team
11. Consultation Section
12. Featured News / Blog Section
13. Sponsors Section
14. Info Section
15. Map Section
16. Main Footer
17. Page Title
18. Breadcrumb
19. Welcome Section
20. Our Experience
21. Awards Section
22. Our Gallery
23. Gallery Details / Portfolio Details
25. 404 Page
26. Practice Areas
27. Single Law Page
28. Team Details / Single Attorney
29. Faqs Page
30. Blog Grid View
31. Blog List View
32. Blog Classic View
33. Sponsors Style TwoBlog Single Post
34. Shop
35. Shop Single Item
36. Contact Section
37. Register / Login 
38. Shopping Cart
39. Checkout
40. Styled Pagination

**********************************************/


@import url('font-awesome.css');
@import url('flaticon.css');
@import url('animate.css');
@import url('owl.css');
@import url('jquery.mCustomScrollbar.min.css');
@import url('jquery.fancybox.css');
@import url('hover.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Montserrat: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');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Unbounded:wght@500;700;900&display=swap');


/*** 

====================================================================
	Reset
====================================================================

 ***/
* {
	margin:0px;
	padding:0px;
	border:none;
	outline:none;
}

/* Імпорт шрифтів (Unbounded + IBM Plex Sans) */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Unbounded:wght@500;700;900&display=swap');

:root {
	/* --- НОВА КОЛЬОРОВА ПАЛІТРА --- */
	--color-primary: #237df9;  /* Електричний синій (Основний) */
	--color-accent: #e6b64b;   /* Гірчичний / Золотий (Акцент) */

	/* Базові кольори */
	--color-bg: #ffffff;       /* Чистий білий */
	--color-bg-alt: #f4f4f0;   /* Світло-сірий "паперовий" для фону секцій */
	--color-text: #111111;     /* Чорний для тексту */
	--color-border: #000000;   /* Чорний для контурів (основа стилю) */

	/* Статусні */
	--color-error: #ff4d4d;
	--color-success: #00cc66;

	/* --- ТИПОГРАФІКА --- */
	--font-heading: 'Unbounded', sans-serif;   /* Для заголовків */
	--font-body: 'IBM Plex Sans', sans-serif;   /* Для статей */

	/* Розміри тексту */
	font-size: 14px;
	--text-xs: 0.875rem;
	--text-sm: 1rem;
	--text-md: 1.125rem;
	--text-lg: 1.5rem;
	--text-xl: 2.25rem;
	--text-xxl: 3.5rem;

	/* --- БРУТАЛІСТИЧНІ ЕЛЕМЕНТИ --- */
	--border-width: 3px;
	--border-style: solid;
	--border-main: var(--border-width) var(--border-style) var(--color-border);

	/* Радіус: трохи згладжуємо кути (або ставте 0px для повної гостроти) */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-round: 99px;

	/* Тіні (Hard Shadows) */
	--shadow-hard: 5px 5px 0px var(--color-border);       /* Чорна тінь */
	--shadow-hard-hover: 2px 2px 0px var(--color-border); /* Тінь при натисканні */

	/* Тінь кольорова (тепер буде яскраво-синьою) */
	--shadow-card: 8px 8px 0px var(--color-primary);

	/* --- ВІДСТУПИ --- */
	--spacing-xs: 0.5rem;
	--spacing-sm: 1rem;
	--spacing-md: 2rem;
	--spacing-lg: 5rem;

	/* --- АНІМАЦІЯ --- */
	--transition-fast: 0.2s ease;
}
/*** 

====================================================================
	Global Settings
====================================================================

 ***/

body {
	font-family: var(--font-body);
	color: var(--color-text);
	background-color: var(--color-bg);
	line-height: 1.6;
	margin: 0;
}

/* Додатковий клас для посилань, щоб вони виглядали чітко */
a {
	color: var(--color-primary);
	text-decoration: none;
	border-bottom: 2px solid var(--color-accent);
	transition: 0.2s ease;
}

a:hover {
	color: #000;
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--color-primary);
	font-weight: 700;
	margin-top: 0;
	margin-bottom: var(--spacing-sm);
	line-height: 1.1; /* Щільніші заголовки */
	text-transform: uppercase; /* Часто використовується в необруталізмі для h1-h2 */
	letter-spacing: -0.02em;   /* Трохи збиваємо літери до купи */
}

input,button,select,textarea{
	font-family: 'Inter', sans-serif;
}

p{
	position:relative;
	line-height:1.7em;
	font-family: 'Inter', sans-serif;	
}

.strike-through{
	text-decoration:line-through;	
}

.auto-container{
	position:static;
	max-width:1200px;
	padding:0px 15px;
	margin:0 auto;
}

.page-wrapper{
	position:relative;
	margin:0 auto;
	width:100%;
	background:#ffffff;
}

.page-outer-container{
	position:relative;
	width:100%;
	padding:0px 0px;
}

.boxed-layout .page-outer-container{
	padding:0px 20px;	
}

ul,li{
	list-style:none;
	padding:0px;
	margin:0px;	
}

.theme-btn{
	display:inline-block;
	transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	font-family: 'Inter', sans-serif;
}

.centered{
	text-align:center;	
}

.btn-style-one{
	position:relative;
	display:inline-block;
	line-height:24px;
	padding:10px 30px;
	font-size:14px;
	font-weight:700;
	text-transform:uppercase;
	background:#384597;
	color:#ffffff !important;
	border-radius:5px;
}

.btn-style-one:hover{
	background:#3570b3;
	color:#ffffff !important;	
}

.btn-style-two{
	position:relative;
	display:inline-block;
	line-height:24px;
	padding:10px 30px;
	font-size:14px;
	font-weight:700;
	text-transform:uppercase;
	background:#3570b3;
	color:#ffffff !important;
	border-radius:5px;
}

.btn-style-two:hover{
	background:#384597;
	color:#ffffff !important;	
}

.btn-style-three{
	position:relative;
	display:inline-block;
	line-height:24px;
	padding:10px 30px;
	font-size:14px;
	font-weight:700;
	text-transform:uppercase;
	background:#ffffff;
	color:#384597 !important;
	border-radius:5px;
}

.btn-style-three:hover{
	background:#3570b3;
	color:#ffffff !important;	
}

.btn-style-four{
	position:relative;
	display:inline-block;
	line-height:24px;
	padding:10px 32px;
	font-size:12px;
	text-transform:uppercase;
	background:none;
	border:2px solid #ffffff !important;
	color:#ffffff !important;
	border-radius:3px;
}

.btn-style-four:hover{
	background:#ffffff;
	color:#3570b3 !important;
}

.theme-btn .icon{
	font-size:16px;	
}

.theme-btn .icon-left{
	padding-right:50px;
}

.theme-btn .icon-right{
	padding-left:50px;
}

.bold-font{
	font-weight:700;	
}

.exbold-font{
	font-weight:900;	
}

.normal-font{
	font-weight:400;	
}

.light-font{
	font-weight:300;	
}

.semibold-font{
	font-weight:600;	
}

.white_color{
	color:#ffffff !important;	
}

.theme_color{
	color:#3570b3 !important;
}

.bg_theme_color{
	background:#3570b3 !important;
}

.theme_green_color{
	color:#384597 !important;
}

.bg_green_color{
	background:#384597 !important;
}

.padd-top-20{
	padding-top:20px !important;	
}

.padd-top-10{
	padding-top:10px !important;	
}

.padd-top-30{
	padding-top:30px !important;	
}

.padd-top-40{
	padding-top:40px !important;	
}

.padd-top-50{
	padding-top:50px !important;	
}

.padd-top-90{
	padding-top:90px !important;	
}

.padd-bott-8{
	padding-bottom:8px !important;	
}

.padd-right-20{
	padding-right:20px !important;	
}

.padd-bott-20{
	padding-bottom:20px !important;	
}

.padd-bott-10{
	padding-bottom:10px !important;	
}

.padd-bott-30{
	padding-bottom:30px !important;	
}

.padd-bott-40{
	padding-bottom:40px !important;	
}

.padd-bott-50{
	padding-bottom:50px !important;	
}

.padd-bott-70{
	padding-bottom:70px !important;	
}

.padd-top-70{
	padding-top:70px !important;	
}

.margin-top-20{
	margin-top:20px !important;	
}

.margin-top-30{
	margin-top:30px !important;	
}

.margin-top-40{
	margin-top:40px !important;	
}

.margin-top-50{
	margin-top:50px !important;	
}

.margin-right-20{
	margin-right:20px !important;	
}

.margin-right-30{
	margin-right:30px !important;	
}

.margin-right-40{
	margin-right:40px !important;	
}

.margin-right-50{
	margin-right:50px !important;	
}

.margin-right-60{
	margin-right:60px !important;	
}

.margin-right-80{
	margin-right:80px !important;	
}

.margin-left-20{
	margin-left:20px !important;	
}

.margin-left-30{
	margin-left:30px !important;	
}

.margin-left-40{
	margin-left:40px !important;	
}

.margin-left-50{
	margin-left:50px !important;	
}

.margin-left-60{
	margin-left:60px !important;	
}

.margin-left-80{
	margin-left:80px !important;	
}

.margin-bott-20{
	margin-bottom:20px !important;	
}

.margin-bott-30{
	margin-bottom:30px !important;	
}

.margin-bott-40{
	margin-bottom:40px !important;	
}

.margin-bott-50{
	margin-bottom:50px !important;	
}

.margin-bott-70{
	margin-bottom:50px !important;	
}

.margin-bott-80{
	margin-bottom:50px !important;	
}

.no-padd-bottom{
	padding-bottom:0px !important;	
}

.no-padd-top{
	padding-top:0px !important;	
}

.no-margin-bottom{
	margin-bottom:0px !important;	
}

.no-margin-top{
	margin-top:0px !important;	
}

.no-bg{
	background:none !important;	
}

.bg-light-grey{
	background:#f9f9f9;	
}

.text-uppercase{
	text-transform:uppercase !important;	
}

.preloader{ position:fixed; left:0px; top:0px; width:100%; height:100%; z-index:999999; background-color:#ffffff; background-position:center center; background-repeat:no-repeat; background-image:url(../images/icons/preloader.GIF);}

/*** 

====================================================================
	Scroll To Top style
====================================================================

***/

.scroll-to-top{
	position:fixed;
	bottom:15px;
	right:15px;
	width:40px;
	height:40px;
	color:#ffffff;
	font-size:12px;
	line-height:38px;
	text-align:center;
	background:#384597;
	border:1px solid #384597;
	border-radius:50%;
	z-index:100;
	cursor:pointer;
	display:none;
}

.scroll-to-top:hover{
	border-color:#3570b3;
	background:#3570b3;
}


/*** 

====================================================================
	Main Header style
====================================================================

***/

.main-header{
	position:relative;
	left:0px;
	top:0px;
	z-index:999;
	width:100%;
	font-size:13px;
}

.main-header .top-bar{
	position:relative;
	background:#3570b3;
	color:#ffffff;
	font-family: 'Inter', sans-serif;
}

.main-header .top-bar .top-left{
	position:relative;
	float:left;
	padding:10px 0px;
	line-height:24px;
	color:#ffffff;
	font-weight:700;
}

.main-header .top-bar .top-left a{
	color:#384597;
}

.main-header .top-bar .top-right{
	position:relative;
	float:right;
	max-height: 44px;
}

.main-header .top-bar .lang-box,
.main-header .top-bar .fb-box {
	position:relative;
	float:left;
	margin-left:15px;
}
.main-header .top-bar .fb-box a {
	padding:10px 20px;
	line-height:24px;
	padding-left:24px;
	font-weight:700;
	color: #384597;
}
.main-header .top-bar .fb-box a:hover {
	color: #ffffff;
}
.main-header .top-bar .lang-box .selected-btn{
	position:relative;
	cursor:pointer;
	padding:10px 20px;
	line-height:24px;
	padding-left:24px;
	font-weight:700;
}

.main-header .top-bar .lang-box .selected-btn .flag-icon{
	position:absolute;
	left:0px;
	top:0px;
	width:20px;
	height:100%;
	background-repeat:no-repeat;
	background-position:left center;
}

.main-header .top-bar .lang-box .selected-btn .icon{
	position:absolute;
	right:0px;
	top:50%;
	font-weight:normal;
	margin-top:-10px;
	line-height:24px;
	text-align:right;	
}

.main-header .top-bar .lang-box .lang-list{
	position:absolute;
	left:0px;
	top:100%;
	width:100%;
	min-width:180px;
	background:#ffffff;
	border:1px solid #3570b3;
	border-top-color:#ffffff;
	z-index:5;
	border-radius:0px 0px 3px 3px;
	display:none;
}

.main-header .top-bar .lang-box .lang-list:before{
	content:'';
	position:absolute;
	left:25px;
	top:-13px;
	width:0px;
	border:7px solid transparent;
	border-bottom:7px solid #ffffff;
	z-index:10;	
}

.main-header .top-bar .lang-box .lang-list li{
	position:relative;
	border-bottom:1px solid #3570b3;
}

.main-header .top-bar .lang-box .lang-list li:last-child{
	border:none;	
}

.main-header .top-bar .lang-box .lang-list li a{
	display:block;
	line-height:24px;
	padding:5px 15px;
	color:#3570b3;
	font-size:13px;
	transition:all 300ms ease;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
}

.main-header .top-bar .lang-box .lang-list li a:hover{
	background:#3570b3;
	color:#ffffff;	
}

.main-header .top-bar .search-box{
	position:relative;
	float:left;	
}

.main-header .top-bar .search-box .form-group{
	position:relative;
	margin-bottom:0px;	
}

.main-header .top-bar .search-box input[type="text"],
.main-header .top-bar .search-box input[type="search"]{
	position:relative;
	display:block;
	height:44px;
	line-height:24px;
	padding:10px 40px 10px 15px;
	color:#ffffff;
	background:none;
	min-width:220px;
	font-weight:700;
	border: none;
}

.main-header .top-bar .search-box #searchForm .help-block {
	position: absolute;
	bottom: -15px;
}
.main-header .top-bar .search-box #searchForm .field-searchform-type {
	display: none;
}
.main-header .top-bar ::-webkit-input-placeholder { color:rgba(255,255,255,1);}
.main-header .top-bar ::-moz-placeholder { color:rgba(255,255,255,1) ;}
.main-header .top-bar :-ms-input-placeholder { color:rgba(255,255,255,1) ;}
.main-header .top-bar input:-moz-placeholder { color:rgba(255,255,255,1) ;}

.main-header .top-bar .has-error ::-webkit-input-placeholder { color:rgba(255,0,0,1);}
.main-header .top-bar .has-error ::-moz-placeholder { color:rgba(255,0,0,1) ;}
.main-header .top-bar .has-error :-ms-input-placeholder { color:rgba(255,0,0,1) ;}
.main-header .top-bar .has-error input:-moz-placeholder { color:rgba(255,0,0,1) ;}

.main-header .top-bar .search-box input[type="text"]:focus,
.main-header .top-bar .search-box input[type="search"]:focus{
	background:rgba(0,0,0,0.05);	
}

.main-header .top-bar .search-box button{
	position:absolute;
	right:0px;
	top:0px;
	width:40px;
	text-align:center;
	height:44px;
	line-height:24px;
	padding:10px 0px;
	background:none;
	color:#384597;
}

.main-header .middle-bar{
	position:relative;
	padding:15px 0px 20px;
	background:#ffffff;	
}

.main-header .middle-bar .info-column{
	position:relative;
	color:#2f2f31;
	padding:12px 0px 10px;
}

.main-header .middle-bar .info-column p{
	margin-bottom:0px;	
}

.main-header .middle-bar .info-column h3{
	font-size:30px;
	font-weight:700;
	color:#3570b3;
}

.main-header .middle-bar .logo-column{
	/*position:absolute;*/
	left:0px;
	top:0px;
	padding:10px 0px;
	width:100%;
	text-align:center;
	text-transform: uppercase;
}
.main-header .middle-bar .logo-column h1 {
	color: #384597;
	font-weight: 700;

}
.main-header .middle-bar .logo-column .logo img{
	display:inline-block;
	max-width:100%;	
}

.main-header .top-bar .search-box button:hover,
.main-header .top-bar .search-box input:focus+button{
	color:#ffffff;	
}


.main-header .lower-section{
	position:relative;
	padding:0px 0px;
	width:100%;
	left:0px;
	top:0px;
	background:none;
}


.fixed-header .lower-section{
	position:fixed;
	background:#384597;
	height:auto;
}

.lower-section .nav-toggler{
	position:absolute;
	right:15px;
	top:50%;
	margin-top:-20px;
	display:none;
}

.lower-section .nav-toggler button{
	position:relative;
	display:block;
	height:40px;
	width:40px;
	background:#3570b3;
	color:#ffffff;
	text-align:center;
	font-size:20px;
	line-height:38px;
	border:1px solid #3570b3;
}

.main-header .lower-section .outer-box{
	position:relative;
	background:#384597;
	padding:0px 210px 0px 50px;
	border-radius:3px;
}

.main-header .link-box{
	position:absolute;
	right:50px;
	top:20px;
}

.main-header .link-box .theme-btn{
	position:relative;
	display:inline-block;
	line-height:24px;
	padding:13px 25px;
	border-radius:5px;
	background:#ffffff;
	text-transform:uppercase;
	
	color:#303030;
	font-size:14px;
	font-weight:700;	
}

.main-header .link-box .theme-btn:hover{
	background:#3570b3;
	color:#ffffff;	
}

.main-menu{
	position:relative;
	padding:0px 0px;	
}

.main-menu .navbar-collapse{
	padding:0px;	
}

.main-menu .navigation{
	position:relative;
	float:left;
	margin:0px;
	font-weight:400;
	font-family: 'Inter', sans-serif;
}

.main-menu .navigation > li{
	position:relative;
	float:left;
	padding:20px 0px;
	margin-right:20px;	
}

.fixed-header .main-menu .navigation > li{
	padding:20px 0px;	
}

.main-menu .navigation > li:last-child{
	margin-right:0px;	
}

.main-menu .navigation > li > a{
	position:relative;
	display:block;
	padding:10px 5px;
	font-size:16px;
	color:#ffffff;
	line-height:30px;
	font-weight:700;
	opacity:1;
	transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-webkit-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
}

.main-header.style-two .main-menu .navigation > li > a{
	color:#ffffff;	
}

.main-menu .navigation > li:before{
	content:'';
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:4px;
	background:#3570b3;
	opacity:0;
	-webkit-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	transition: all 500ms ease;
}

.main-menu .navigation > li:hover > a,
.main-menu .navigation > li.current > a,
.main-menu .navigation > li.current-menu-item > a{
	opacity:1;
}

.main-menu .navigation > li:hover:before,
.main-menu .navigation > li.current:before,
.main-menu .navigation > li.current-menu-item:before{
	color:#3570b3 !important;
	opacity:1;
}

.main-menu .navigation > li > ul{
	position:absolute;
	left:-20px;
	top:100%;
	width:270px;
	padding:0px;
	z-index:100;
	display:none;
	visibility:hidden;
	background:#3570b3;
	opacity:0;
	border:1px solid rgba(0,0,0,0.20);
}

.main-menu .navigation > li:hover > ul{
	left:0px;
	display:block;
	opacity:1;
	visibility:visible;
	transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-webkit-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;	
}

.main-menu .navigation > li > ul > li{
	position:relative;
	width:100%;
	display:block;
	border-bottom:1px solid rgba(0,0,0,0.10);
}

.main-menu .navigation > li > ul > li:last-child{
	border:none;	
}

.main-menu .navigation > li > ul > li > a{
	position:relative;
	display:block;
	padding:8px 20px;
	line-height:26px;
	font-weight:700;
	font-size:16px;
	color:#ffffff;
	transition:all 200ms ease;
	-moz-transition:all 200ms ease;
	-webkit-transition:all 200ms ease;
	-ms-transition:all 200ms ease;
	-o-transition:all 200ms ease;
}

.main-menu .navigation > li > ul > li:hover > a{
	background:#384597;
}

.main-menu .navigation > li > ul > li > ul{
	position:absolute;
	left:120%;
	top:0px;
	width:220px;
	padding:0px;
	z-index:100;
	display:none;
	visibility:hidden;
	background:#3570b3;
	opacity:0;
	border:1px solid rgba(0,0,0,0.20);
}

.main-menu .navigation > li > ul > li > ul > li{
	position:relative;
	width:100%;
	display:block;
	border-bottom:1px solid rgba(0,0,0,0.10);
}

.main-menu .navigation > li > ul > li > ul > li:last-child{
	border:none;	
}

.main-menu .navigation > li > ul > li > ul > li > a{
	position:relative;
	display:block;
	padding:8px 20px;
	line-height:26px;
	font-weight:700;
	font-size:16px;
	text-transform:capitalize;
	color:#ffffff;
	transition:all 200ms ease;
	-moz-transition:all 200ms ease;
	-webkit-transition:all 200ms ease;
	-ms-transition:all 200ms ease;
	-o-transition:all 200ms ease;
}

.main-menu .navigation > li > ul > li > ul > li:hover > a{
	background:#384597;
}

.main-menu .navigation > li > ul > li:hover > ul{
	left:100%;
	display:block;
	opacity:1;
	visibility:visible;
	transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-webkit-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;	
}

.main-menu .navigation li.dropdown .dropdown-btn{
	position:absolute;
	right:10px;
	top:6px;
	width:34px;
	height:30px;
	border:1px solid #ffffff;
	background:url(../images/icons/submenu-icon.png) center center no-repeat;
	background-size:20px;
	cursor:pointer;
	z-index:5;
	display:none;
	-webkit-border-radius:3px;
	-ms-border-radius:3px;
	-o-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
}

/*** 

====================================================================
	Hidden Sidebar style
====================================================================

***/

.hidden-bar{
	position: fixed;
	top: 0;
	width: 305px;
	height: 100%;
	background: #384597;
	z-index: 9999;
	transition: all 700ms ease;
	-webkit-transition: all 700ms ease;
	-ms-transition: all 700ms ease;
	-o-transition: all 700ms ease;
	-moz-transition: all 700ms ease;
}

.hidden-bar .mCSB_inside > .mCSB_container{
	margin-right:0px;	
}

.hidden-bar.right-align {
	right: -400px;
}

.hidden-bar.right-align.visible-sidebar{
	right:0px;	
}

.hidden-bar.right-align .hidden-bar-closer {
	left: -20px;
}

.hidden-bar.left-align {
	left: -400px;
}

.hidden-bar.left-align.visible-sidebar {
	left: 0px;
}

.hidden-bar.left-align .hidden-bar-closer {
	right: -20px;
}

.hidden-bar .hidden-bar-closer {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 0;
	background: #000;
	color: #fff;
	border-radius: 50%;
	text-align: center;
	line-height: 38px;
	transition: all 300ms ease;
	-webkit-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	z-index: 999999;
}

.hidden-bar .hidden-bar-closer:hover {
	background: #fff;
}

.hidden-bar .hidden-bar-closer:hover .btn {
	color: #384597;
}

.hidden-bar .hidden-bar-closer .btn {
	background-color: transparent;
	border: none;
	outline: none;
	font-size: 14px;
}

.hidden-bar .social-icons {
	text-align: center;
	margin: 50px 0px 30px;
}

.hidden-bar .social-icons ul {
	font-size: 0;
	margin-left: -5px;
	margin-right: -5px;
}

.hidden-bar .social-icons ul li {
	display: inline-block;
	padding: 0 5px;
}

.hidden-bar .social-icons ul li a {
	display: block;
	width: 36px;
	height: 36px;
	font-size: 16px;
	line-height: 36px;
	text-align: center;
	background: #3570b3;
	color: #ffffff;
	border-radius: 5px;
	transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}

.hidden-bar .social-icons ul li a:hover {
	background: #ffffff;
	color:#3570b3;
}

.hidden-bar-wrapper {
	height: 100%;
}

.hidden-bar .logo {
	padding: 30px 0px;
	background: #384597;
}

.hidden-bar .side-menu {
	background-color: transparent;
	padding: 0;
	font-family: 'Montserrat', sans-serif;
	font-size:12px;
	letter-spacing:1px;
}

.hidden-bar .side-menu ul li ul a {
	background: transparent;
}

.hidden-bar .side-menu ul li ul li ul li a {
	background: transparent;
}

.hidden-bar .side-menu a.current {
	color: #fff;
}

.hidden-bar .side-menu li.current > a {
	color: #fff;
}

.hidden-bar .side-menu ul li a {
	background: transparent;
	color: #ffffff;
	display: block;
	font-weight: 500;
	text-transform: uppercase;
	border-top: 1px solid rgba(255,255,255,0.30);
	border-bottom: 1px solid rgba(255,255,255,0.30);
	padding: 10px 15px 10px 20px;
	position: relative;
	transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}

.hidden-bar .side-menu ul li a:hover {
	background: transparent;
	color: #3570b3;
}

.hidden-bar .side-menu ul li a .btn.expander {
	background: none;
	color: #ffffff;
	border: 1px solid rgba(255,255,255,0.80);
	padding: 5px 10px;
	font-size: 14px;
	border-radius: 0px;
	position: absolute;
	top: 6px;
	right: 20px;
	outline: none;
}


/*** 

====================================================================
	Main Slider style
====================================================================

***/

.main-slider{
	position:relative;
	width:100%;
	color:#ffffff;
	font-size:15px;
	line-height:2em;
	margin-top:-45px !important;
}

.main-slider .tp-bannertimer{
	display:none;	
}

.main-slider h1{
	font-weight:400;
	font-size:60px;
	color:#2f2f31;
	line-height:1.2em;
}

.main-slider .text{
	font-size:16px;
	color:#999999;
	
}

.main-slider .phone-no{
	font-size:24px;
	font-weight:700;
	color:#384597;
}

.main-slider .smaller-title{
	font-size:24px;
	font-weight:700;
	
	color:#2f2f31;	
}

.main-slider .theme-btn{
	font-weight:700;
	padding:11px 60px;	
}

.main-slider .normal-link{
	color:#2f2f31;
	padding:11px 60px;
	line-height:24px;
	
}

.main-slider .normal-link .icon{
	padding-right:5px;	
}

.main-slider .tparrows.preview3{
	background:none !important;	
}

.main-slider .tparrows.preview3::after{
	background:#384597;
	color:#ffffff;
	font-size:24px;
	border-radius:5px;	
}

.main-slider .tparrows.preview3.tp-leftarrow{
	left:20px !important;	
}

.main-slider .tparrows.preview3.tp-rightarrow{
	right:20px !important;	
}

.main-slider .tparrows.preview3:hover::after{
	background-color:#3570b3;
	color:#ffffff !important;
}

.main-slider .tparrows.preview3 .tp-arr-iwrapper{
	visibility:hidden;
	opacity:0;	
}

/*** 

====================================================================
	Services Style One
====================================================================

***/

.services-style-one{
	position:relative;
	padding:70px 0px 0px;
}

.default-service-column{
	position:relative;
}

.services-style-one .default-service-column{
	margin-bottom:70px;	
}

.default-service-column .inner-box{
	position:relative;	
}

.default-service-column .service-header{
	position:relative;
	padding-left:70px;
	min-height:80px;
	padding-bottom:20px;
	border-bottom:1px solid #e0e0e0;
}

.default-service-column .service-header .icon{
	position:absolute;
	left:0px;
	top:0px;
	width:70px;
	line-height:70px;
	font-size:48px;
	color:#3570b3;
	margin-bottom:20px;	
}

.default-service-column .service-header h4{
	font-size:18px;
	color:#999999;
	font-weight:700;
	margin-bottom:7px;
}

.default-service-column .service-header h3{
	font-size:18px;
	color:#2f2f31;
	font-weight:700;
}

.default-service-column .text-content{
	position:relative;
	padding-top:15px;
}

.default-service-column .text-content .text{
	font-size:16px;
	margin-bottom:20px;	
}

.services-style-one hr{
	margin:0px;	
}

.styled-heading{
	position:relative;
	margin-bottom:30px;
	padding-bottom:22px;
}

.styled-heading:before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 4px;
	width: 150px;
	height: 6px;
	border-top: 1px solid #384597;
	border-bottom: 1px solid #384597;
}
.styled-heading:after{
	content: '//';
	position: absolute;
	font-size: 21px;
	letter-spacing: -2px;
	left: 25px;
	bottom: -4px;
	padding: 0 5px;
	background: #fff;
	color: #384597;
}

.styled-heading h2{
	font-size:30px;
	font-weight:700;
	color:#2f2f31;	
}

.line-styled-heading{
	position:relative;
	margin-bottom:30px;
	padding-bottom:10px;
}

.line-styled-heading:after{
	content:'';
	position:absolute;
	left:0px;
	bottom:0;
	width:50px;
	height:1px;
	background:#3570b3;
}

.line-styled-heading h2{
	font-size:24px;
	font-weight:700;
	color:#3570b3;
}

/*** 

====================================================================
	About Section
====================================================================

***/

.about-section{
	position:relative;
	padding:40px 0px ;
}

.about-section .default-column{
	position:relative;
	margin-bottom:50px;
}

.default-text-box{
	margin-bottom:25px;
	text-align: justify;
}

.about-section .columns-outer{
	position:relative;
	margin-left:-4px;
	margin-right:-4px;	
}

.about-section .columns-outer .column{
	padding:0px 4px !important;
	margin-bottom:30px;
}

.about-section .image-box{
	position:relative;
	display:block;	
}

.about-section .image-box img{
	display:block;
	width:100%;	
}

.default-overlay-outer{
	position:absolute;
	display:block;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	padding:10px;
	transition:all 700ms ease;
	-webkit-transition:all 700ms ease;
	-ms-transition:all 700ms ease;
	-o-transition:all 700ms ease;
	-moz-transition:all 700ms ease;
}

.default-overlay-outer .inner{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	display:table;
	vertical-align:middle;
	text-align:center;
}

.default-overlay-outer .inner .content-layer{
	position:relative;
	display:table-cell;
	vertical-align:middle;
	color:#ffffff;
}

.about-section .image-box .content-layer .icon{
	font-size:24px;
	margin-bottom:10px;	
}

.about-section .image-box .content-layer h3{
	font-size:18px;
	font-weight:700;	
}

.quote-text{
	position:relative;
	font-size:18px;
	font-family:'Inter', sans-serif;
	color:#2f2f31;	
}

.about-section .quote-text{
	margin-bottom:40px;	
}

.about-section .phone-info{
	line-height:36px;	
}

.about-section .phone-info .phone{
	position:relative;
	padding-left:10px;
	top:5px;
	color:#3570b3;
	font-family:'Inter', sans-serif;
	font-size:30px;
	font-weight:700;	
}

/*** 

====================================================================
	Company Timeline
====================================================================

***/

.company-timeline{
	position:relative;
}

.about-section .timeline-column{
	position:relative;
	margin-bottom:30px;	
}

.company-timeline .timeline-block{
	position:relative;
	margin-bottom:20px;
	padding-left:100px;	
}

.company-timeline .timeline-block:last-child{
	margin-bottom:0px;	
}

.company-timeline .timeline-block .year{
	position:absolute;
	left:0px;
	top:0px;
	display:inline-block;
	max-width:100%;
	padding:5px 15px;
	color:#ffffff;
	background:#3570b3;
	text-align:center;
	font-size:20px;
	line-height:24px;
	font-weight:700;
	font-family:'Inter', sans-serif;
	border-radius:5px;
}

.company-timeline .timeline-block .year .curve{
	position:absolute;
	bottom:-13px;
	left:0px;
	width:100%;
	color:#3570b3;
}

.company-timeline .timeline-block h3{
	font-size:18px;
	margin-bottom:10px;
	color:#2f2f31;
	font-weight:700;	
}

.about-section .carousel-outer{
	position:relative;	
}

.about-section .carousel-outer img{
	display:block;
	width:100%;
	height:auto;	
}

.about-section .carousel-outer .owl-controls{
	margin:0px;	
}

.about-section .carousel-outer .owl-nav{
	display:none;	
}

.about-section .carousel-outer .owl-dots{
	position:absolute;
	left:0px;
	bottom:5px;
	width:100%;
	z-index:20;	
}

.about-section .carousel-outer .owl-dots .owl-dot span{
	border:1px solid #ffffff;
	background:none;
	margin:0px 5px;	
}

.about-section .carousel-outer .owl-dots .owl-dot.active span,
.about-section .carousel-outer .owl-dots .owl-dot:hover span{
	background:#ffffff;	
}

.about-section .graph-outer{
	position:relative;
	padding:30px 0px;
	text-align:center;
	border:1px solid #e0e0e0;
}

.about-section .graph-outer .chart-outer {
	position:relative;
	width:222px;
	height:222px;
	margin:0 auto;
	background:url(../images/background/graph-image.png) center center no-repeat;
}							

.about-section .graph-outer img{
	display:inline-block;
	max-width:100%;	
}

.about-section .graph-outer .chart-outer .progress-text{
	position:absolute;
	text-align:center;
	width:70px;
	height:40px;
	color:#ffffff;
	line-height:20px;
	font-size:16px;
	font-weight:400;
	
}

.about-section .graph-outer .chart-outer .center-text{
	left:50%;
	margin-left:-35px;
	top:50%;
	margin-top:-20px;	
}

.about-section .graph-outer .chart-outer .won-text{
	left:3%;
	top:25%;
}

.about-section .graph-outer .chart-outer .hold-text{
	right:3%;
	top:25%;
}

.about-section .graph-outer .chart-outer .running-text{
	left:50%;
	margin-left:-25px;
	bottom:7%;
}

.about-section .graph-outer .chart-outer .progress-text .count{
	font-family:'Inter', sans-serif;
	font-size:18px;
	font-weight:700;	
}


/*** 

====================================================================
	Two Column Fluid
====================================================================

***/

.two-column-fluid{
	position:relative;
	background:#f5f5f5;	
}

.two-column-fluid .testimonial-column{
	position:relative;
	background-size:cover;
	background-position:right center;
	background-repeat:no-repeat;	
}

.two-column-fluid .testimonial-column .bg-color-layer{
	position:absolute;
	right:0px;
	top:0px;
	width:2000px;
	height:100%;
	background:#384597;
	opacity:0.95;
	z-index:3;
}

.two-column-fluid .testimonial-column .bg-image-layer{
	position:absolute;
	right:0px;
	top:0px;
	width:2000px;
	height:100%;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:right center;
	z-index:1;
}

.two-column-fluid .testimonial-column .inner-box{
	position:relative;
	padding:70px 15px 70px 0px;
	z-index:5;
}

.two-column-fluid .testimonial-column .carousel-box{
	position:relative;
	padding:0px 100px 0px 110px;	
}

.two-column-fluid .testimonial-column .quote-icon{
	position:absolute;
	left:0px;
	top:0px;
	width:80px;
	height:80px;
	line-height:76px;
	border:2px solid #ffffff;
	text-align:center;
	color:#ffffff;
	font-size:30px;
	border-radius:50%;
}

.two-column-fluid .testimonial-column .styled-heading h2{
	color:#ffffff;	
}

.testimonial-carousel .slide-text{
	position:relative;
	margin-bottom:80px;
	color:#ffffff;
	font-size:18px;	
}

.testimonial-carousel .slide-info{
	position:relative;
	padding-left:80px;
	padding:15px 15px 44px 100px;	
}

.testimonial-carousel .slide-info .image-thumb{
	position:absolute;
	left:0px;
	top:0px;
	width:80px;
	height:80px;	
}

.testimonial-carousel .slide-info .image-thumb:before{
	content:'';
	position:absolute;
	left:0px;
	top:-44px;
	height:1px;
	width:100%;
	background:#ffffff;
}

.testimonial-carousel .slide-info .image-thumb img{
	display:block;
	width:80px;	
}

.testimonial-carousel .slide-info h3{
	font-size:18px;
	font-weight:700;
	margin-bottom:2px;
	color:#ffffff;
}

.testimonial-carousel .slide-info p{
	margin-bottom:5px;
	color:#ffffff;
	font-style:italic;
}

.testimonial-carousel .signature img{
	position:relative;
	margin-top:20px;
	display:inline-block;
	max-width:100%;	
}

.testimonial-carousel .owl-controls{
	margin:0px;	
}

.testimonial-carousel .owl-nav{
	display:none;	
}

.testimonial-carousel .owl-dots{
	position:relative;
	text-align:left;
}

.testimonial-carousel .owl-dots .owl-dot span{
	border:3px solid #ffffff;
	background:none;
	margin:0px 5px;	
}

.testimonial-carousel .owl-dots .owl-dot.active span,
.testimonial-carousel .owl-dots .owl-dot:hover span{
	background:#ffffff;	
}

.two-column-fluid .whyus-column .inner-box{
	position:relative;
	padding:70px 15px 70px 60px;
	z-index:5;
}

.two-column-fluid .whyus-column .icon-block{
	position:relative;
	margin-bottom:34px;
}

.two-column-fluid .whyus-column .icon-block:last-child{
	margin-bottom:0px;	
}

.two-column-fluid .whyus-column .icon-block .icon{
	position:absolute;
	left:-110px;
	top:5px;
	width:70px;
	height:70px;
	line-height:66px;
	text-align:center;
	background:#3570b3;
	border:2px solid #3570b3;
	color:#ffffff;
	font-size:30px;
	border-radius:50%;
	transition:all 500ms ease;
	-webkit-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
	-moz-transition:all 500ms ease;
}

.two-column-fluid .whyus-column .icon-block:hover .icon{
	background:#ffffff;
	color:#3570b3;
	-webkit-transform:scale(1.1,1.1);
	-ms-transform:scale(1.1,1.1);
	-o-transform:scale(1.1,1.1);
	-moz-transform:scale(1.1,1.1);
	transform:scale(1.1,1.1);
}

.two-column-fluid .whyus-column .icon-block h3{
	font-size:18px;
	font-weight:700;
	margin-bottom:10px;
	color:#2f2f31;
}

/*** 

====================================================================
	Team Section
====================================================================

***/

.team-section{
	position:relative;
	background:#ffffff;
	padding:10px 0px ;
}

.team-section.extended{
	padding:80px 0px 20px;
}

.team-section .team-member{
	position:relative;
	margin-bottom:50px;	
}

.team-section.extended .team-member{
	margin-bottom:60px;	
}

.team-section.extended .separator{
	margin:0px 0px 60px;
}

.team-section .team-member .inner-box{
	position:relative;
	max-width:500px;
	display:block;
	background:#ffffff;
	margin:0 auto;
}

.team-section .team-member .image{
	position:relative;	
}

.team-section .team-member .image img{
	position:relative;
	display:block;
	width:100%;	
}

.team-section .team-member .member-info{
	position:relative;
	padding:20px 0px;
	border-bottom:1px solid #e0e0e0; 
}

.team-section .team-member h3{
	font-size:18px;
	color:#2f2f31;
	font-weight:700;
	text-transform:capitalize;
}

.team-section .team-member .designation{
	font-size:16px;
	line-height:20px;
	color:#3570b3;
	text-transform:capitalize;
	font-style:italic;
	font-family: 'Inter', serif;
}

.team-section .team-member .social-links{
	position:relative;
}

.team-section .team-member .social-links a{
	position:relative;
	display:inline-block;
	width:34px;
	height:34px;
	font-size:14px;
	margin:0px 3px 5px;
	line-height:32px;
	border-radius:5px;
	text-align:center;
	border:1px solid #e1e1e1;
	color:#909090;
	transition:all 300ms ease;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	padding: 3px;
}

.team-section .team-member .social-links a:hover{
	background-color:#3570b3;
	color:#ffffff;
	border-color:#3570b3;
}

.team-section .team-member .contact-info{
	position:relative;
	padding:25px 0px;
	
}

.team-section .team-member .contact-info li{
	position:relative;
	padding-left:30px;
	line-height:24px;
	margin-bottom:5px;
}

.team-section .team-member .contact-info a{
	color:#999999;
	font-size:16px;	
}

.team-section .team-member .contact-info li .icon{
	position:absolute;
	left:0px;
	top:0px;
	line-height:24px;
	color:#3570b3;
	width: 20px;
}


/*** 

====================================================================
	Conultation Section
====================================================================

***/

.consult-section{
	position:relative;
	background:#ffffff;
	padding:60px 0px 0px;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
	overflow:hidden;
}

.consult-section:before{
	content:'';
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	background:#f5f5f5;
	opacity:0.80;	
}

.consult-section .auto-container{
	position:relative;
	padding-left:440px;
	z-index:1;	
}

.default-form{
	position:relative;	
}

.consult-section .default-form{
	padding-bottom:50px;
}

.consult-section .man-image{
	position:absolute;
	left:15px;
	bottom:0px;
	width:400px;
}

.consult-section .man-image img{
	position:relative;
	display:block;
	max-width:100%;
}

.default-form .form-group{
	position:relative;
	margin-bottom:30px;	
}

.default-form input[type="text"],
.default-form input[type="email"],
.default-form input[type="password"],
.default-form input[type="tel"],
.default-form input[type="number"],
.default-form input[type="url"],
.default-form select,
.default-form textarea,
.default-form .select2-container--krajee .select2-selection--single {
	position:relative;
	display:block;
	background:#ffffff;
	line-height:30px;
	padding:10px 20px;
	height:52px;
	border:1px solid #e0e0e0;
	border-radius:5px;
	transition:all 300ms ease;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
}
.default-form .select2-container--krajee .select2-selection--single .select2-selection__arrow {
	border: none;
	height: 100%;
	right: 15px;
	display: none;
}
.default-form select,
.default-form .select2-container--krajee .select2-selection--single {
	-webkit-appearance:none;
	-ms-appearance:none;
	-moz-appearance:none;
	-o-appearance:none;
	background:#ffffff url(../images/icons/icon-dropdown.png) right center no-repeat;
	cursor:pointer;
}
.default-form .iti.iti--allow-dropdown {
	width: 100%;
}
.default-form input[type="tel"] {
	text-indent: 30px;
}
.default-form .file-caption.form-control.kv-fileinput-caption {
	height: 52px;
}
.default-form select option{
	text-indent:20px;	
}

.default-form textarea{
	resize:none;
	height:110px;	
}

.default-form-section .default-form textarea,
.default-form.comment-form textarea{
	resize:none;
	height:150px;	
}

.default-form input:focus,
.default-form select:focus,
.default-form textarea:focus{
	border-color:#3570b3;
}

/*** 

====================================================================
	News Section
====================================================================

***/

.news-section{
	position:relative;
	background:#ffffff;
	padding:70px 0px 10px;
}

.news-section.extended{
	padding:70px 0px;	
}

.featured-news-column{
	position:relative;
	margin-bottom:20px;
}

.featured-news-column .inner-box{
	position:relative;
	background:#f5f5f5;
}

.featured-news-column .image-box{
	position:relative;
	overflow:hidden;
}

.list-view .featured-news-column .image-box{
	float:left;
	width:42%;	
}

.featured-news-column .image-box img{
	display:block;
	width:100%;	
}

.featured-news-column .image-box .default-overlay-outer{
	background:rgba(85,70,154,0.90);
	opacity:0;
	left:-100%;
}

.featured-news-column:hover .image-box .default-overlay-outer{
	left:0px;
	opacity:1;	
}

.featured-news-column .image-box .link-icon{
	position:relative;
	display:inline-block;
	line-height:53px;
	width:52px;
	height:52px;
	background:#ffffff;
	border-radius:5px;
	font-size:18px;
	color:#384597;
}

.featured-news-column .content{
	position:relative;
	padding:10px;
}

.list-view .featured-news-column .right-content{
	float:left;
	width:58%;
}

.list-view .featured-news-column .content{
	padding:30px 20px 30px 50px;	
}

.featured-news-column .date{
	position:relative;
	width:30px;
	height:40px;
	margin-top:-30px;
	line-height:25px;
	float: right;
	padding:5px;
	margin-bottom:30px;
	font-size:18px;
	color:#ffffff;
	background:#384597;
	font-weight:700;
	text-align:center;
	transition:all 500ms ease;
	-webkit-transition:all 500ms ease;
	-ms-transition:all 500ms ease;	
}

.classic-view .featured-news-column .date{
	position:absolute;
	left:25px;
	top:25px;
	z-index:3;
	margin:0px;	
}

.featured-news-column:hover .date{
	background:#3570b3;
}

.list-view .featured-news-column .date{
	position:absolute;
	left:-30px;
	top:35px;
	margin-top:0px;
}

.featured-news-column .tags{
	position:relative;
	margin-bottom:10px;
	color:#2f2f31;	
}

.featured-news-column .tags a{
	color:#999999;
	font-size:14px;
		
}

.featured-news-column h3{
	font-size:14px;
	font-weight:700;
	color:#2f2f31;	
}

.classic-view .featured-news-column h3{
	font-size:24px;	
}

.featured-news-column h3 a{
	color:#2f2f31;	
}

.featured-news-column a:hover{
	color:#3570b3;
}

.featured-news-column .text{
	margin-bottom:10px;	
}

.list-view .featured-news-column .text{
	margin-bottom:20px;	
}

.featured-news-column .read-more{
	color:#384597;
	text-transform:uppercase;
	font-size:14px;
	font-weight:700;
}

.featured-news-column:hover .read-more{
	color:#3570b3;
}

.featured-news-column .post-info{
	position:relative;
	border-top:1px solid #e1e1e1;
	padding:5px 1px;
	
	font-size:14px;
}

.featured-news-column .post-info li{
	position:relative;
	float:left;
	margin-left:15px;
	font-size: 12px;
	color:#999999;	
}

.featured-news-column .post-info li a{
	color:#999999;	
}

.featured-news-column .post-info li .fa,
.featured-news-column .post-info li .author-thumb{
	padding-right:5px;	
}

.blog-details blockquote{
	position:relative;
	padding:25px;
	border:1px solid #e0e0e0;
	border-left:3px solid #e0e0e0;
	background:#ffffff;
	margin:30px 0px;
	font-size:16px;
	font-style:italic;
	font-family:'Inter', sans-serif;
}

.blog-details .styled-heading{
	margin-bottom:20px;	
}

.blog-details .styled-heading h2{
	font-size:24px;	
}

.blog-details .image-block .image-column,
.blog-details .image-block .text-column{
	margin-bottom:30px;	
}

.blog-details .image-block img{
	display:block;
	max-width:100%;	
}

.blog-details .post-bottom{
	background:#ffffff;
	padding:10px 0px;
	border-top:1px solid #e0e0e0;	
	border-bottom:1px solid #e0e0e0;	
}

.blog-details .post-bottom .post-info{
	border:none;
	padding:0px;	
}

.blog-details .post-bottom .post-info li{
	line-height:34px;
}



.social-links-one a{
	position:relative;
	display:inline-flex;
	display: -ms-inline-flexbox;
	display: -webkit-inline-flex;
	align-items: center;
	font-size:14px;
/*	width:34px;
	height:34px;*/
	padding: 3px 7px;
	line-height:32px;
	border:1px solid #e9e9e9;
	text-align:center;
	color:#999999;
	margin:0px 10px 7px 0px;
	border-radius:5px;
	transition:all 0.5s ease;
	-moz-transition:all 0.5s ease;
	-webkit-transition:all 0.5s ease;
	-ms-transition:all 0.5s ease;
	-o-transition:all 0.5s ease;
}
.social-links-one a span {
	width: 20px;
	height: 20px;
	margin-right: 10px;
}
.social-links-one a span svg {
	width: 100%
}
.social-links-one a:hover{
	color:#ffffff;
	background:#3570b3;
}

.blog-details .post-author{
	position:relative;
	color:#777777;
	border-bottom:1px solid #e0e0e0;
	padding-bottom:10px;
	margin-bottom:10px;
}


.blog-details .post-author .inner-box{
	position:relative;
	padding:15px;
	min-height:80px;
}

.blog-details .post-author .inner-box .author-thumb{
	position:absolute;
	left:0px;
	top:10px;
	width:110px;
	height:110px;
	border-radius:5px;
}

.blog-details .post-author .inner-box .author-thumb img{
	display:block;
	width:110px;	
}

.blog-details .post-author h4{
	margin-bottom:10px;
	font-family:'Inter', sans-serif;
	font-size:18px;
	text-transform:uppercase;
	font-weight:700;
	color:#1a1a1a;	
}

.blog-details .post-author h4 .author-occ{
	position:relative;
	left:10px;
	padding:5px 10px;
	font-size:10px;
	background:#1cbefe;
	border-radius:5px;
	color:#ffffff;
}

/*** 

====================================================================
	Comments Area
====================================================================

 ***/

.blog-details .comments-area{
	position:relative;
	margin-bottom:70px;	
}

.blog-details .comments-area .comment-box{
	position:relative;	
}

.blog-details .comments-area .comment{
	position:relative;
	margin:0px 0px 40px 0px;
	padding:0px 0px 40px 110px;
	border-bottom:1px solid #e0e0e0;	
}

.blog-details .comments-area .reply-comment{
	margin-left:50px;	
}

.blog-details .comments-area .comment-box .author-thumb{
	position:absolute;
	left:0px;
	top:0px;
	width:78px;
	height:78px;
}

.blog-details .comments-area .comment-box .author-thumb img{
	width:100%;
	display:block;
	border-radius:5px;
}

.blog-details .comments-area .comment-info{
	margin-bottom:15px;
	color:#3570b3;
	font-size:16px;
}

.blog-details .comments-area .comment-info .time{
	color:#3570b3;
	font-size:16px;
		
}

.blog-details .comments-area .comment-box strong{
	color:#2f2f31;
	font-size:18px;
	font-weight:700;	
}

.blog-details .comments-area .comment-option{
	color:#e0e0e0;
	padding-top:10px;
		
}

.blog-details .comments-area .comment-option .up-link,
.blog-details .comments-area .comment-option .down-link{
	color:#999999;
	line-height:24px;
	font-size:18px;
	padding:0px 10px;	
}

.blog-details .comments-area .comment-option .reply-link{
	position:relative;
	margin:0px 10px;
	font-weight:700;	
}

.blog-details .comments-area .comment-option .share-link{
	position:relative;
	margin:0px 10px;
	font-weight:700;
	color:#2f2f31;	
}

/*** 

====================================================================
	Sponsors Section Style
====================================================================

***/

.sponsors-section{
	position:relative;
	padding:0px 0px 100px;
	background:#ffffff;
}

.sponsors-section .slider-outer{
	position:relative;
	border:1px solid #e0e0e0;
	margin:0px 0px;
}

.sponsors-section .sponsors-slider{
	position:relative;
}
.sponsors-section .sponsors-slider li a {
	height: 80px;
	display: flex;
	display: -webkit-flex;
	display: -o-flex;
	display: -ms-flex;
	display: -moz-flex;
	justify-content: center;
	-webkit-justify-content: center;
	-webkit-align-items: center;
	align-items: center;
}
.sponsors-section .sponsors-slider li img{
	position:relative;
	right:-1px;
	border-right:1px solid #e0e0e0;
	width: 90%;
}

.sponsors-section .owl-controls{
	margin:0px !important;	
}

.sponsors-section .owl-nav .owl-prev{
	position:absolute;
	left:0px;
	top:50%;
	margin:-25px 0px 0px -25px !important;
	line-height:48px;
	width:50px;
	height:50px;
	border:1px solid #e0e0e0;
	text-align:center;
	color:#cccccc;
	background:#ffffff !important;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	transition:all 300ms ease;
}

.sponsors-section .owl-nav .owl-next{
	position:absolute;
	right:0px;
	top:50%;
	margin:-25px -25px 0px 0px !important;
	line-height:48px;
	width:50px;
	height:50px;
	border:1px solid #e0e0e0;
	text-align:center;
	color:#cccccc;
	background:#ffffff !important;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	transition:all 300ms ease;
}

.sponsors-section .owl-nav .owl-prev .fa:before,
.sponsors-section .owl-nav .owl-next .fa:before{
	font-size:24px;
	color:#384597;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	transition:all 300ms ease;	
}

.sponsors-section .owl-nav .owl-prev:hover .fa:before,
.sponsors-section .owl-nav .owl-next:hover .fa:before{
	color:#ffffff;	
}

.sponsors-section .owl-nav .owl-prev:hover,
.sponsors-section .owl-nav .owl-next:hover{
	background:#384597 !important;
}

.sponsors-section .owl-dots{
	display:none !important;	
}

/*** 

====================================================================
	Info Section Style
====================================================================

***/

.info-section{
	position:relative;
	background:#384597;
	color:#ffffff;
}

.info-section .info-column{
	position:relative;
	margin-bottom:50px;	
}

.info-section .info-column .inner-box{
	max-width:320px;
	margin:0 auto;
	text-align:center;
}	

.info-section .info-column .icon{
	position:relative;
	width:70px;
	height:70px;
	line-height:70px;
	margin:-30px auto 40px;
	color:#ffffff;
	font-size:24px;
	text-align:center;
	background:#3570b3;
}

.info-section .info-column h3{
	font-size:24px;
	font-weight:700;
	margin-bottom:30px;	
}

.info-section .info-column h3:after{
	content:'';
	position:relative;
	display:block;
	width:70px;
	height:1px;
	margin:20px auto;
	background:#ffffff;
}

.info-section .info-column .text{
	font-size:16px;
	color:#f5f5f5;
}

/*** 

====================================================================
	Map Section Style
====================================================================

***/

.map-section{
	position:relative;
}

.map-section .map-container{
	position:relative;
	height:450px;	
}

.map-section.extended .map-container{
	height:500px;	
}

.map-section .map-data{
	text-align:center;
	font-size:16px;
	font-weight:700;
		
}

.map-section .map-data h6{
	font-size:16px;
	text-align:center;
	margin-bottom:5px;
	color:#2e2e2e;	
}

/*** 

====================================================================
	Main Footer
====================================================================

***/

.main-footer{
	position:relative;
	color:#999999;
	background:#505050;
	
}

.main-footer p{
	margin-bottom:20px;
}

.main-footer .footer-upper{
	position:relative;
	padding:70px 0px 30px;
	color:#999999;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
}

.main-footer .footer-upper:before{
	content:'';
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	background:#030303;
	opacity:0.92;	
}

.main-footer .footer-upper .column{
	position:relative;
	margin-bottom:30px;	
}

.footer-upper .column h3{
	position:relative;
	font-size:24px;
	font-weight:700;
	margin-bottom:30px;
	padding-bottom:22px;
	color:#ffffff;
}

.footer-upper .column h3:before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 4px;
	width: 150px;
	height: 6px;
	border-top: 1px solid #384597;
	border-bottom: 1px solid #384597;
}
.footer-upper .column h3:after{
	content: '//';
	position: absolute;
	font-size: 21px;
	letter-spacing: -2px;
	font-weight: 400;
	left: 25px;
	bottom: -9px;
	padding: 0 5px;
	color: #384597;
}

.main-footer .about-widget{
	font-size:16px;
}

.main-footer .footer-upper a{
	transition:all 0.5s ease;
	-moz-transition:all 0.5s ease;
	-webkit-transition:all 0.5s ease;
	-ms-transition:all 0.5s ease;
	-o-transition:all 0.5s ease;
}

.main-footer .footer-upper a:hover{
	color:#ffffff;	
}

.footer-upper .links-widget li{
	position:relative;
	margin-bottom:15px;
}

.footer-upper .links-widget li a{
	position:relative;
	display:block;
	font-size:16px;
	color:#999999;
	line-height:24px;
	padding-left:15px;
}

.footer-upper .links-widget li a:before{
	content:'\f105';
	font-family: 'FontAwesome';
	position:absolute;
	left:0px;
	top:0px;
	font-size:16px;
	line-height:24px;	
}

.footer-upper .links-widget li a:hover{
	color:#ffffff;	
}

.main-footer .social-links a{
	position:relative;
	display:inline-block;
	font-size:16px;
	width:48px;
	height:48px;
	line-height:46px;
	border:1px solid rgba(255,255,255,0.05);
	text-align:center;
	margin:0px 2px 10px 0px;
	color:#999999;
	background:#10100f;
	border-radius:5px;
	transition:all 0.5s ease;
	-moz-transition:all 0.5s ease;
	-webkit-transition:all 0.5s ease;
	-ms-transition:all 0.5s ease;
	-o-transition:all 0.5s ease;
}

.main-footer .social-links a:hover{
	color:#ffffff;
	background:#384597;
}

.footer-upper .twitter-feeds .feed{
	position:relative;
	padding:0px 0px 0px 30px;
	margin-bottom:20px;
	color:#aaaaaa;
}

.footer-upper .twitter-feeds .feed:last-child{
	margin:0px;	
}

.footer-upper .twitter-feeds .feed-content{
	margin-bottom:5px;
	line-height:1.6em;	
}

.footer-upper .twitter-feeds .feed a{
	position:relative;
	color:#3570b3;
}

.footer-upper .twitter-feeds .feed .time{
	position:relative;
	color:#ffffff;
	font-size:14px;
	font-family:'Inter', sans-serif;
	text-transform:capitalize;
	font-weight:700;
}

.footer-upper .twitter-feeds .feed strong{
	font-weight:400;	
}

.footer-upper .twitter-feeds .feed .icon{
	position:absolute;
	width:30px;
	height:20px;
	left:0px;
	top:5px;
	line-height:20px;
	font-size:18px;
	color:#999999;	
}

.main-footer .newsletter-widget .form-group{
	position:relative;
	margin-bottom:10px;
}

.main-footer .newsletter-widget input[type="text"],
.main-footer .newsletter-widget input[type="email"]{
	position:relative;
	display:block;
	width:100%;
	line-height:26px;
	padding:11px 50px 11px 10px;
	background:#10100f;
	border:1px solid rgba(255,255,255,0.05);
	border-radius:5px;	
}

.main-footer .newsletter-widget input[type="text"]:focus,
.main-footer .newsletter-widget input[type="email"]:focus{
	background:#202020;	
}

.main-footer .newsletter-widget input[type="submit"],
.main-footer .newsletter-widget button{
	position:absolute;
	right:0px;
	top:0px;
	width:50px;
	height:50px;
	line-height:50px;
	text-align:center;
	font-size:18px;
	font-weight:700;
	font-family:'Inter', sans-serif;
	color:#ffffff;
	background:#384597;
	border-radius:0px 5px 5px 0px;	
}

.main-footer .newsletter-widget input:focus+button,
.main-footer .newsletter-widget button:hover{
	background:#3570b3;
}

.main-footer h4{
	position:relative;
	font-size:18px;
	color:#ffffff;
	font-weight:700;
	padding-top:25px;
	margin-bottom:20px;
}

.main-footer h4:before{
	content:'';
	position:absolute;
	left:0px;
	top:0px;
	width:50px;
	height:1px;
	background:rgba(255,255,255,0.05);	
}

.footer-bottom{
	position:relative;
	padding:25px 0px;
	font-family:'Inter', sans-serif;
	line-height:24px;
	color:#999999;
	background:#1e1e1e;
}

.footer-bottom .footer-nav{
	position:relative;
}

.footer-bottom .footer-nav li{
	position:relative;
	float:left;
	margin-left:25px;	
}

.footer-bottom .footer-nav li a{
	color:#999999;	
}

.footer-bottom .footer-nav li a:hover{
	color:#ffffff;	
}

/*** 

====================================================================
	Page Title Style
====================================================================

***/

.page-title{
	position:relative;
	padding:165px 0px 115px;
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
	margin-top:-45px;
}

.page-title h1{
	position:relative;
	font-size:36px;
	font-weight:700;
	color:#ffffff;
	padding-bottom:30px;
	line-height:50px;
	text-align:center;
	text-transform:uppercase;
}

.page-title h1:after{
	content:'';
	position:absolute;
	left:0px;
	bottom:0;
	width:100%;
	height:30px;
	background:url(../images/icons/title-line-image-2.png) center bottom no-repeat;	
}

.page-info{
	position:relative;
	padding:15px 0px;
	border-bottom:1px solid #e0e0e0;	
}

.page-info h2{
	font-size:18px;
	color:#2f2f31;
	line-height:24px;
	font-weight:700;
}

.page-info .bread-crumb{
	position:relative;
	font-family:'Inter',samns-serif;	
}

.page-info .bread-crumb li{
	position:relative;
	float:left;
	margin-right:40px;
	color:#999999;
	line-height:24px;
}

.page-info .bread-crumb li:last-child{
	margin-right:0px;
}

.page-info .bread-crumb li:after{
	content:'\f0da';
	font-family: 'FontAwesome';
	position:absolute;
	right:-30px;
	width:10px;
	line-height:28px;
	color:#384597;
	font-size:14px;
}

.page-info .bread-crumb li:last-child:after{
	display:none;	
}

.page-info .bread-crumb li a{
	color:#999999;	
}

.page-info .bread-crumb li a:hover{
	color:#3570b3;
}

/*** 

====================================================================
	Welcome Section
====================================================================

***/

.welcome-section{
	position:relative;
	padding:70px 0px 0px;
}

.welcome-section .column{
	margin-bottom:40px;	
}

.welcome-section .text{
	margin-bottom:25px;	
}

.welcome-section .text-header{
	position:relative;
	padding-bottom:20px;
	border-bottom:1px solid #e0e0e0;
	margin-bottom:30px;	
}

.welcome-section .text-header h2{
	font-size:30px;
	font-weight:700;
	color:#2f2f31;	
}

.text-carousel-outer{
	position:relative;
	padding-left:20px;
	border-left:4px solid #384597;
	color:#2f2f31;
}

.text-carousel h3{
	font-size:30px;
	line-height:40px;
	font-weight:700;
	color:#2f2f31;
	margin-bottom:5px;
}

.text-carousel-outer .owl-dots{
	display:none !important;	
}

.text-carousel-outer .owl-controls{
	text-align:left;
	margin:0px;	
}

.text-carousel-outer .owl-prev,
.text-carousel-outer .owl-next{
	width:30px;
	height:30px;
	font-size:18px;
	padding:0px !important;
	background:#ffffff !important;
	border:1px solid #e0e0e0;
	line-height:28px !important;
	color:#909090 !important;
	text-align:center;
	margin:0px 10px 0px 0px !important;
}

.text-carousel-outer .owl-prev .fa:before,
.text-carousel-outer .owl-next .fa:before{
	line-height:28px;	
}

.text-carousel-outer .owl-prev:hover,
.text-carousel-outer .owl-next:hover{
	background:#384597 !important;
	color:#ffffff !important;
	border-color:#384597;
}

.welcome-section .image-column{
	position:relative;
	margin-bottom:30px;	
}

.welcome-section .image-box{
	position:relative;	
}

.welcome-section .image-box img{
	display:block;
	width:100%;	
}

.welcome-section .image-box .icon{
	font-size:48px;
	margin-bottom:20px;	
}

.welcome-section .image-box h3{
	font-size:20px;
	font-weight:700;	
}

.welcome-section .image-box .default-overlay-outer{
	background:rgba(34,53,85,0.90);	
}

.welcome-section .image-box:hover .default-overlay-outer{
	background:rgba(184,155,94,0.90);	
}


/*** 

====================================================================
	Default Section
====================================================================

***/

.default-section{
	position:relative;
	padding:70px 0px 20px;
}

.default-section .default-column{
	margin-bottom:50px;	
}

/*** 

====================================================================
	Our Experience Section
====================================================================

***/

.our-experience .desc-text{
	position:relative;
	margin-bottom:30px;	
}

.our-experience .timeline-outer{
	position:relative;
	padding:20px 0px 0px;
	padding-left:140px;	
}

.our-experience .timeline-outer .left-line{
	position:absolute;
	left:67px;
	top:0px;
	height:100%;
	width:3px;
	background:#e0e0e0;
		
}

.our-experience .timeline-outer .left-line:before{
	content:'';
	position:absolute;
	display:block;
	left:50%;
	top:0px;
	margin-left:-8px;
	width:16px;
	height:16px;
	background:#e0e0e0;
	border-radius:50%;	
}

.our-experience .timeline-outer .left-line:after{
	content:'';
	position:absolute;
	display:block;
	left:50%;
	bottom:0px;
	margin-left:-8px;
	width:16px;
	height:16px;
	background:#e0e0e0;
	border-radius:50%;	
}

.our-experience .experience-block{
	position:relative;
	padding-left:130px;
	min-height:110px;
	margin-bottom:40px;
}

.our-experience .experience-block:last-child{
	margin-bottom:0px;	
}

.our-experience .experience-block .image-box{
	position:absolute;
	left:0px;
	top:0px;
	width:110px;
}

.our-experience .experience-block .image-box img{
	display:block;
	width:100%;
	border-radius:5px;	
}

.our-experience .experience-block h3{
	font-size:18px;
	font-weight:700;
	margin-bottom:15px;
	color:#2f2f31;	
}

.our-experience .experience-block .content{
}

.our-experience .experience-block .date{
	position:absolute;
	left:-135px;
	top:50%;
	margin-top:-22px;
	width:120px;
	line-height:24px;
	padding:10px;
	color:#384597;
	text-align:center;
	font-size:24px;
	font-weight:700;
	border:2px solid #e0e0e0;
	border-radius:5px;
	background:#ffffff;	
}


/*** 

====================================================================
	Accord Style
====================================================================

***/

.accordion-box{
	position:relative;
	margin-right:0px;	
}

.accordion-box .accordion{
	position:relative;
	margin-bottom:12px;
}

.accordion-box.style-two .accordion{
	margin-bottom:5px;	
}

.accordion-box .accordion .accord-btn{
	position:relative;
	display:block;
	min-height:60px;
	line-height:30px;
	padding:15px 50px 15px 20px;
	border:1px solid #e0e0e0;
	background:#ffffff;
	color:#2f2f31;
	cursor:pointer;
}

.accordion-box.style-two .accordion .accord-btn{
	padding:10px 30px 10px 15px;
	min-height:50px;	
}

.accordion-box.style-three .accordion .accord-btn{
	padding:7px 30px 7px 70px;
	min-height:50px;	
}

.accordion-box.style-three .accordion .accord-btn .icon-box{
	position:absolute;
	left:0px;
	top:0px;
	width:54px;
	height:100%;
	border-right:1px solid #e0e0e0;
	text-align:center;
}

.accordion-box.style-three .accordion .accord-btn .icon-box .icon{
	position:absolute;
	left:0px;
	top:50%;
	margin-top:-15px;
	width:100%;
	line-height:30px;
	height:30px;
	font-size:18px;
}

.accordion-box.style-three .accordion .accord-btn.active .icon-box{
	color:#3570b3;
	border-color:#3570b3;
}

.accordion-box .accordion .accord-btn h4{
	position:relative;
	font-size:18px;
	line-height:30px;
	font-weight:700;
	transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
}

.accordion-box.style-two .accordion .accord-btn h4{
	font-size:16px;	
}

.accordion-box .accordion .accord-btn:after{
	content:'\f067';
	font-family: 'FontAwesome';
	position:absolute;
	right:10px;
	top:50%;
	margin-top:-15px;
	width:30px;
	height:30px;
	line-height:30px;
	font-size:18px;
	font-weight:normal;
}

.accordion-box.style-two .accordion .accord-btn:after{
	content:'\f18e';
	right:0px;
	width:25px;
}

.accordion-box .accordion .accord-btn.active:after{
	content:'\f068';
}

.accordion-box.style-two .accordion .accord-btn.active:after{
	content:'\f01a'	;
}

.accordion-box .accordion .accord-btn.active{
	color:#3570b3;
	border-color:#3570b3;
}

.accordion-box.style-two .accordion .accord-btn.active{
	color:#ffffff;
	background:#3570b3;
	border-color:#3570b3;
}

.accordion-box .accordion .accord-content{
	position:relative;
	padding:30px 20px 20px 20px;
	border:1px solid #e0e0e0;
	border-top:none;
	display:none;
	background:#ffffff;
}

.accordion-box.style-two .accordion .accord-content{
	padding:10px 10px 0px;	
}

.accordion-box .accordion .accord-content.collapsed{
	display:block;	
}

.accordion-box .accordion .accord-content p{
	position:relative;
}

.accordion-box .image-box{
	position:relative;
	float:left;
	margin:0px 15px 15px 0px;
	z-index:3;	
}

.accordion-box .image-box img{
	display:block;
	width:100%;	
}

.accordion-box .image-box .default-overlay-outer{
	opacity:0;
	background:rgba(34,53,85,0.90);	
}

.accordion-box .image-box:hover .default-overlay-outer{
	opacity:1;
}

/*** 

====================================================================
	Awards Section
====================================================================

***/

.awards-section{
	position:relative;
	padding:70px 0px 20px;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
	background-attachment:fixed;
	color:#ffffff;
}

.awards-section:before{
	content:'';
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	background:#384597;
	opacity:0.90;
}

.awards-section .styled-heading h2{
	color:#ffffff;	
}

.awards-section .award-column{
	position:relative;
	text-align:center;
	margin-bottom:50px;	
}

.awards-section .award-column .image-box{
	position:relative;
	margin-bottom:25px;	
}

.awards-section .award-column .image-box img{
	display:inline-block;
	max-width:100%;	
}

.awards-section .award-column h3{
	font-size:18px;
	font-weight:700;
	color:#ffffff;
	margin-bottom:5px;	
}

.awards-section .award-column p{
	margin-bottom:0px;
	color:#999999;
}


/*** 

====================================================================
	Testimonials Section
====================================================================

***/

.testimonials-section{
	position:relative;
	padding:70px 0px;
}

.testimonial-block{
	position:relative;
	margin-bottom:60px;	
}

.testimonial-block .text-content{
	position:relative;
	padding:25px 30px;
	background:#f5f5f5;
	border-radius:10px;
	margin-bottom:40px;
	
}

.testimonial-block .text-content:after{
	content:'';
	position:absolute;
	left:60px;
	bottom:-31px;
	width:24px;
	height:32px;
	background:url(../images/icons/curve.png) left top no-repeat;	
}

.testimonial-block .info{
	position:relative;
	margin-left:90px;
	padding-left:80px;	
}

.testimonial-block .info .author-thumb{
	position:absolute;
	left:0px;
	top:0px;
	width:50px;
	height:50px;
}

.testimonial-block .info .author-thumb img{
	display:block;
	width:50px;	
}

.testimonial-block .info h4{
	font-size:18px;
	font-weight:700;
	color:#2f2f31;	
}

.testimonial-block .info p{
	font-size:16px;
	color:#3570b3;
	font-style:italic;
	margin-bottom:0px;
}

.loadmore-outer{
	position:relative;
	text-align:center;	
}

.loadmore-outer:before{
	content:'';
	position:absolute;
	left:0px;
	top:50%;
	height:1px;
	width:100%;
	background:#e0e0e0;	
}

.loadmore-outer .button-outer{
	position:relative;
	display:inline-block;
	padding:0px 15px;
	background:#ffffff;	
}

/*** 

====================================================================
	Styled Pagination
====================================================================

***/

.styled-pagination{
	position:relative;
	font-family:'Lora',sans-serif;
}

.styled-pagination:before{
	content:'';
	position:absolute;
	left:0px;
	top:50%;
	height:1px;
	width:100%;
	background:#e0e0e0;	
}

.styled-pagination ul{
	position:relative;
	display:inline-block;
	padding:0px 10px;
	background:#ffffff;	
}

.styled-pagination li{
	position:relative;
	display:inline-block;
	margin:5px 4px;	
}

.styled-pagination li a{
	position:relative;
	display:block;
	line-height:32px;
	padding:5px;
	font-size:18px;
	width:44px;
	height:44px;
	text-transform:uppercase;
	color:#999999;
	border:1px solid #e0e0e0;
	text-align:center;
	border-radius:5px;
	transition:all 500ms ease;
	-webkit-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
	-moz-transition:all 500ms ease;
}

.styled-pagination li a:hover,
.styled-pagination li.active a{
	color:#ffffff;
	border-color:#3570b3;
	background:#3570b3;
}

/*** 

====================================================================
	Gallery Section
====================================================================

***/

.gallery-section{
	position:relative;
	padding:70px 0px;
}

.gallery-section .filter-list .portfolio-item{
	display:none;	
}

.filter-btns{
	position:relative;
	margin-bottom:50px;
		
}

.filter-btns li{
	position:relative;
	display:inline-block;
	padding:8px 20px;
	line-height:24px;
	border:1px solid #d0d0d0;
	color:#808080;
	cursor:pointer;
	text-transform:capitalize;
	font-size:16px;
	margin:0px 7px 10px;
	border-radius:5px;
}

.filter-btns li:hover,
.filter-btns li.active{
	border-color:#3570b3;
	color:#ffffff;
	background:#3570b3;
}

.portfolio-item{
	position:relative;
	margin-bottom:40px;
}

.portfolio-item .inner-box{
	position:relative;
	border-radius:5px;
	border:1px solid #e0e0e0;
	transition:all 500ms ease;
	-webkit-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-o-transition:all 500ms ease;
	-webkit-box-shadow:0px 0px 7px 0px rgba(0,0,0,0.10);
	-ms-box-shadow:0px 0px 7px 0px rgba(0,0,0,0.10);
	-o-box-shadow:0px 0px 7px 0px rgba(0,0,0,0.10);
	-moz-box-shadow:0px 0px 7px 0px rgba(0,0,0,0.10);
	box-shadow:0px 0px 7px 0px rgba(0,0,0,0.10);
}

.portfolio-item .image-box{
	position:relative;
	overflow:hidden;
	background:#3570b3;
}

.portfolio-item .image-box img{
	display:block;
	width:100%;
	-webkit-transform:scale(1.1,1.1);
	-ms-transform:scale(1.1,1.1);
	-o-transform:scale(1.1,1.1);
	-moz-transform:scale(1.1,1.1);
	transform:scale(1.1,1.1);
	transition:all 500ms ease;
	-webkit-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-o-transition:all 500ms ease;
	border-radius:5px 5px 0px 0px;	
}

.portfolio-item .inner-box:hover .image-box img{
	-webkit-transform:scale(1,1);
	-ms-transform:scale(1,1);
	-o-transform:scale(1,1);
	-moz-transform:scale(1,1);
	transform:scale(1,1);
	opacity:0.70;	
}

.portfolio-item .lower-content{
	position:relative;
	padding:15px 20px;
	border-radius:0px 0px 5px 5px;
	min-height: 112px;
	text-align: center;
	display: flex;
	display: -webkit-flex;
	display: -o-flex;
	display: -moz-flex;
	display: -ms-flex;
	justify-content: center;
	-webkit-justify-content: center;
	align-items: center;
	-webkit-align-items: center;
}

.portfolio-item .lower-content h3{
	font-size:18px;
	font-weight:700;
	color:#1a1a1a;
	margin-bottom:5px;
}

.portfolio-item .lower-content h3 a{
	color:#1a1a1a;
	transition:all 500ms ease;
	-webkit-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-o-transition:all 500ms ease;
}

.portfolio-item .lower-content .desc{
	color:#3570b3;
	
	text-transform:capitalize;
}

.portfolio-item .lower-content .zoom-btn{
	position:absolute;
	right:20px;
	top:50%;
	margin-top:-10px;
	width:20px;
	height:20px;
	text-align:center;
	color:#1a1a1a;
	font-size:14px;
}

.portfolio-item .lower-content h3 a:hover,
.portfolio-item .lower-content .zoom-btn:hover{
	color:#3570b3;
}

/**** 

====================================================================
	Portfolio Details
====================================================================

***/

.portfolio-details{
	position:relative;
	padding:70px 0px 0px;
}

.portfolio-details .image-carousel-outer{
	position:relative;
	margin-bottom:70px;	
}

.image-carousel-outer .owl-dots{
	display:none !important;	
}

.image-carousel-outer .owl-controls{
	margin:0px;	
}

.image-carousel-outer .owl-prev{
	position:absolute;
	left:10px;
	top:50%;
	margin-top:-25px;
	width:50px;
	height:50px;
	padding:0px !important;
	background:none !important;
	line-height:50px !important;
	color:#ffffff !important;
	text-align:center;
	margin:0px 0px 0px 0px !important;
}

.image-carousel-outer .owl-next{
	position:absolute;
	right:10px;
	top:50%;
	margin-top:-25px;
	width:50px;
	height:50px;
	padding:0px !important;
	background:none !important;
	line-height:50px !important;
	color:#ffffff !important;
	text-align:center;
	margin:0px 0px 0px 0px !important;
}

.image-carousel-outer .owl-prev .fa:before,
.image-carousel-outer .owl-next .fa:before{
	line-height:50px;
	font-size:48px;	
}

.image-carousel-outer .owl-prev:hover,
.image-carousel-outer .owl-next:hover{
	color:#384597 !important;
}

.image-carousel-outer .post-option{
	position:absolute;
	left:25px;
	top:25px;
	width:66px;
	text-align:center;
	z-index:6;
}

.image-carousel-outer .post-option .theme-btn{
	position:relative;
	display:block;
	padding:12px 10px;
	line-height:20px;
	color:#ffffff;	
}

.image-carousel-outer .post-option .theme-btn .fa{
	font-size:18px;	
}

.image-carousel-outer .post-option .add-fav{
	background:#3570b3;
}

.image-carousel-outer .post-option .share-btn{
	background:#384597;
}

.portfolio-details .post-content{
	position:relative;	
}

.portfolio-details .post-content .text{
	margin-bottom:50px;	
}

.portfolio-details .post-content .text p{
	margin-bottom:20px;	
}

.portfolio-details .post-content .post-info{
	margin-bottom:70px;
	
}

.portfolio-details .post-info li{
	position:relative;
	border-bottom:1px solid #e0e0e0;
	padding:14px 0px 14px 30px;
	line-height:30px;
}

.portfolio-details .post-info li:last-child{
	border-bottom:none;	
}

.portfolio-details .post-info li .icon{
	position:absolute;
	left:0px;
	top:50%;
	margin-top:-15px;
	line-height:30px;
	font-size:14px;
	color:#3570b3;
}

.portfolio-details .post-info li .pull-left{
	position:relative;
	color:#2f2f31;	
}

.portfolio-details .post-controls{
	position:relative;
	text-align:center;
	padding:25px 0px;
	border-top:1px solid #e0e0e0;
	border-bottom:1px solid #e0e0e0;
	
}

.portfolio-details .post-controls ul{
	position:relative;
	line-height:30px;
	padding:0px 90px;
	text-align:center;	
}

.portfolio-details .post-controls ul li{
	display:inline-block;	
}

.portfolio-details .post-controls ul li a{
	color:#384597;
	line-height:30px;	
}

.portfolio-details .post-controls .prev{
	position:absolute;
	left:0px;
	top:0px;
	line-height:30px;
	color:#384597;
}

.portfolio-details .post-controls .next{
	position:absolute;
	right:0px;
	top:0px;
	line-height:30px;
	color:#384597;
}

.portfolio-details .post-controls .icon{
	font-size:24px;
	line-height:30px;	
}

.portfolio-details .post-controls ul li a:hover{
	color:#3570b3;
}

.related-cases{
	position:relative;
	padding:70px 0px 40px;	
}

/**** 

====================================================================
	Error Section
====================================================================

***/

.error-section{
	position:relative;
	padding:80px 0px 0px;
}

.error-section .text-content{
	position:relative;
	padding:80px 0px 100px;
	max-width:480px;
		
}

.error-section .auto-container{
	position:relative;	
}

.error-section .image-box{
	position:absolute;
	right:15px;
	bottom:0px;
	text-align:right;
}

.error-section .image-box img{
	display:inline-block;
	max-width:100%;	
}

.error-section .bigger-text{
	font-size:200px;
	margin-bottom:20px;
	line-height:200px;
	font-weight:700;
	color:#2f2f31;
}

.error-section .medium-text{
	font-size:30px;
	margin-bottom:20px;
	line-height:40px;
	color:#2f2f31;
	font-weight:700;
}

.error-section .text{
	margin-bottom:40px;
}

/*** 

====================================================================
	Sidebar
====================================================================

***/

.sidebar-page-container{
	position:relative;
	padding:70px 0px 0px;
}

.sidebar-page-container .sidebar{
	margin-bottom:30px;	
}

.sidebar .styled-heading h2{
	font-size:24px;	
}

.sidebar .sidebar-widget{
	position:relative;
	margin-bottom:50px;	
}

.sidebar .boxed-nav{
	position:relative;
}

.sidebar .boxed-nav .nav-outer{
	position:relative;
	border:1px solid #e0e0e0;
	
	border-radius:5px;	
}

.sidebar .boxed-nav ul li{
	position:relative;	
}

.sidebar .boxed-nav ul li:last-child a{
	border:none;	
}

.sidebar .boxed-nav li a{
	position:relative;
	display:block;
	line-height:30px;
	padding:10px 15px;
	text-transform:uppercase;
	color:#2f2f31;
	font-size:14px;
	font-weight:700;
	border-bottom:1px solid #e0e0e0;
	transition:all 300ms ease;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	-o-transition:all 300ms ease;	
}

.sidebar .boxed-nav li:hover a,
.sidebar .boxed-nav li.current a{
	background:#3570b3;
	color:#ffffff;
	border-color:#3570b3;
}

.sidebar .downloads li{
	position:relative;
	margin-bottom:12px;
		
}

.sidebar .downloads li a{
	position:relative;
	display:block;
	padding:10px 10px 10px 70px;
	color:#999999;
	border:1px solid #e0e0e0;
	line-height:30px;
}

.sidebar .downloads li a:hover{
	background:#f5f5f5;
	color:#3570b3;
}

.sidebar .downloads li a .icon{
	position:absolute;
	left:0px;
	top:0px;
	width:50px;
	height:50px;
	line-height:50px;
	text-align:center;
	font-size:18px;
	border-right:1px solid #e0e0e0;	
}

.sidebar .styled-nav{
	position:relative;
}

.sidebar .styled-nav .nav-outer{
	position:relative;
	
}

.sidebar .styled-nav ul li{
	position:relative;
	margin-bottom:2px;	
}

.sidebar .styled-nav ul li:last-child {
	margin-bottom:0px;	
}

.sidebar .styled-nav li a{
	position:relative;
	display:block;
	line-height:30px;
	padding:10px 15px;
	text-transform:capitalize;
	color:#2f2f31;
	background:#f5f5f5;
	font-size:14px;
	font-weight:700;
	border:1px solid #e0e0e0;
	transition:all 300ms ease;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	-o-transition:all 300ms ease;	
}

.sidebar .styled-nav li:hover a,
.sidebar .styled-nav li.current a{
	color:#3570b3;
	background:#ffffff;
}

.sidebar .search-box .form-group{
	position:relative;
	margin:0px;	
}

.sidebar .search-box .form-group input[type="text"],
.sidebar .search-box .form-group input[type="search"]{
	height: 50px;
	position:relative;
	line-height:26px;
	padding:10px 30px 10px 15px;
	border:1px solid #e0e0e0;
	background:#ffffff;
	color:#3a3a3a;
	display:block;
	width:100%;
	border-radius:3px;
	transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-webkit-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
}

.sidebar .search-box .form-group input:focus{
	border-color:#3570b3;
}

.sidebar .search-box .form-group button{
	position:absolute;
	right:0px;
	top:0px;
	height:48px;
	width:30px;
	line-height:48px;
	text-align:left;
	display:block;
	font-size:14px;
	color:#cccccc;
	background:none;
}

.sidebar .search-box .form-group input:focus + button,
.sidebar .search-box .form-group button:hover{
	color:#3570b3;
}

.sidebar .recent-posts .post{
	position:relative;
	font-size:14px;
	margin-bottom:20px;
	min-height:60px;
	padding:0px 0px 0px 80px;
	color:#cccccc;
}

.sidebar .recent-posts .post .post-thumb{
	position:absolute;
	left:0px;
	top:0px;
	width:64px;
	height:64px;	
}

.sidebar .recent-posts .post .post-thumb img{
	width:100%;
	display:block;
	border-radius:5px;	
}

.sidebar .recent-posts .post h4{
	font-size:14px;
	font-weight:500;
	margin:0px 0px 5px;
	line-height:1.4em;
	color:#292929;
	font-family:'Inter', sans-serif;
}

.sidebar .recent-posts .post a,
.sidebar .recent-posts .post a:hover{
	color:#3570b3;
}

.sidebar .recent-posts .post h4 a{
	color:#777777;	
}

.sidebar .recent-posts .post-info{
	color:#3570b3;
			
}

.sidebar .recent-posts .post-info .icon{
	padding-right:5px;	
}

.sidebar .popular-tags a{
	position:relative;
	display:inline-block;
	line-height:24px;
		
	padding:7px 15px;
	margin:0px 5px 12px 0px;
	border:1px solid rgba(0,0,0,0.10);	
	background:#ffffff;
	color:#1a1a1a;
	font-size:13px;
	font-weight:700;
	text-transform:uppercase;
	text-align:center;
	border-radius:3px;
	transition:all 300ms ease;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
}

.sidebar .popular-tags a:hover{
	background-color:#f5f5f5;
	border-color:#f5f5f5;
	color:#3570b3;
}

.sidebar .list{
	position:relative;
	
}

.sidebar .list li{
	position:relative;
	margin-bottom:10px;
	line-height:32px;	
}

.sidebar .list.style-two li{
	border-bottom:1px solid #e0e0e0;
	margin-bottom:0px;
}

.sidebar .list.style-two li a{
	margin:10px 0px;
}

.sidebar .list li .count{
	position:relative;
}

.sidebar .list li a{
	position:relative;
	display:block;
	color:#3d3d3d;
	font-size:16px;
	font-weight:400;
	padding-left:20px;
}


.sidebar .list li:before{
	font-family: 'FontAwesome';
	content:'\f105';
	position:absolute;
	left:0px;
	top:0px;
	display:block;
	font-size:18px;
	line-height:32px;
	color:#3570b3;

}

.sidebar .list li a:hover{
	color:#3570b3;
}

.sidebar .instagram-gallery{
	position:relative;
}

.sidebar .instagram-gallery .images-outer{
	position:relative;
	margin-left:-5px;
	margin-right:-5px;	
}

.sidebar .instagram-gallery .image{
	position:relative;
	float:left;
	width:33.333%;
	padding:5px;	
}

.sidebar .instagram-gallery .image img{
	position:relative;
	display:block;
	width:100%;
	border-radius:3px;	
}

.sidebar .latest-tweets{
	position:relative;
		
}

.sidebar .latest-tweets .owl-dots{
	display:none !important;	
}

.sidebar .latest-tweets .owl-nav{
	position:absolute;
	right:0px;
	bottom:-50px;	
}

.sidebar .latest-tweets .widget-bottom{
	padding:10px 0px;
	border-top:1px solid #e0e0e0;	
}

.sidebar .latest-tweets .widget-bottom a{
	color:#707070;	
}

.sidebar .latest-tweets .time{
	color:#3570b3;
	margin-bottom:5px;
}

.sidebar .latest-tweets .owl-prev{
	width:20px;
	height:20px;
	padding:0px !important;
	background:none !important;
	line-height:20px !important;
	color:#707070 !important;
	text-align:center;
	margin:0px 0px 0px 0px !important;
}

.sidebar .latest-tweets .owl-next{
	width:20px;
	height:20px;
	padding:0px !important;
	background:none !important;
	line-height:20px !important;
	color:#707070 !important;
	text-align:center;
	margin:0px 0px 0px 0px !important;
}

.sidebar .latest-tweets .owl-prev .fa:before,
.sidebar .latest-tweets .owl-next .fa:before{
	line-height:24px;
	font-size:24px;	
}

.sidebar .latest-tweets .owl-prev:hover,
.sidebar .latest-tweets .owl-next:hover{
	color:#3570b3 !important;
}


.rangeslider-widget .val-box{
	position:relative;
	display:inline-block;
	margin:7px 5px 7px 0px;
	line-height:24px;
	font-size:14px;
	border:1px solid #dadada;
	padding:8px 10px;
	width:80px;
	text-align:center;
}

.rangeslider-widget button{
	position:relative;
	display:inline-block;
	line-height:24px;
	border:1px solid #384597;
	padding:8px 25px;
	background:#384597;
	color:#ffffff;
	border-radius:5px;
		
}

.rangeslider-widget .noUi-connect{
	background:#3570b3 !important;
}

.rangeslider-widget .noUi-background{
	background:#ededed !important;	
}

.rangeslider-widget .noUi-handle{
	background:#f4f4f4 !important;
	border-radius:5px !important;
	box-shadow:none;
	border-color:#e0e0e0;
	cursor:pointer;
}

.sidebar .best-sellers .item{
	position:relative;
	font-size:16px;
	margin-bottom:30px;
	min-height:90px;
	padding:0px 0px 0px 90px;
	color:#cccccc;
}

.sidebar .best-sellers .item .post-thumb{
	position:absolute;
	left:0px;
	top:0px;
	width:72px;
	height:90px;	
}

.sidebar .best-sellers .item .post-thumb img{
	width:100%;
	display:block;
}

.sidebar .best-sellers .item h4{
	font-size:18px;
	font-weight:700;
	margin:0px 0px;
	line-height:1.4em;
	color:#2f2f31;
	font-family:'Inter', sans-serif;
}

.sidebar .best-sellers .item a,
.sidebar .best-sellers .item a:hover{
	color:#3570b3;
}

.sidebar .best-sellers .item h4 a{
	color:#2f2f31;	
}

.sidebar .best-sellers .item .rating{
	font-size:11px;
	color:#384597;
}

.sidebar .best-sellers .item .item-price{
	font-size:18px;
	font-weight:700;
	color:#3570b3;
}


/*** 

====================================================================
	Law Section / Details
====================================================================

***/

.law-section .carousel-outer{
	position:relative;	
}

.law-section .carousel-outer img{
	display:block;
	width:100%;
	height:auto;	
}

.law-section .carousel-outer .owl-controls{
	margin:0px;	
}

.law-section .carousel-outer .owl-nav{
	display:none;	
}

.law-section .carousel-outer .owl-dots{
	position:absolute;
	left:0px;
	bottom:5px;
	width:100%;
	z-index:20;	
}

.law-section .carousel-outer .owl-dots .owl-dot span{
	border:1px solid #ffffff;
	background:none;
	margin:0px 5px;	
}

.law-section .carousel-outer .owl-dots .owl-dot.active span,
.law-section .carousel-outer .owl-dots .owl-dot:hover span{
	background:#ffffff;	
}

.law-section .law-upper{
	position:relative;
	margin-bottom:50px;
	background:#384597;
}

.law-section .law-upper .specs-box{
	position:relative;
	padding:40px 0px 20px;
	color:#ffffff;
	font-size:18px;
}

.law-section p{
	margin-bottom:20px;	
}

.law-section .about-law{
	margin-bottom:50px;	
}

.law-section .law-upper .specs-box h2{
	font-size:24px;
	font-weight:700;
	color:#ffffff;
	margin-bottom:25px;
}	

.styled-list-one{
	position:relative;
	
}

.styled-list-one li{
	position:relative;
	padding-left:35px;
	margin-bottom:14px;
	line-height:30px;
}

.styled-list-one li:last-child{
	margin-bottom:0px;	
}

.styled-list-one li:before{
	font-family: 'FontAwesome';
	content:'\f178';
	position:absolute;
	left:0px;
	top:0px;
	display:block;
	line-height:30px;
	color:#3570b3;
}

.styled-list-two{
	position:relative;
	
}

.styled-list-two li{
	position:relative;
	padding-left:25px;
	margin-bottom:10px;
	line-height:30px;
}

.styled-list-two li:last-child{
	margin-bottom:0px;	
}

.styled-list-two li:before{
	font-family: 'FontAwesome';
	content:'\f0da';
	position:absolute;
	left:5px;
	top:0px;
	display:block;
	font-size:14px;
	line-height:30px;
}

.law-section .default-two-column{
	margin-bottom:50px;	
}

.boxed-column{
	position:relative;
	border:1px solid #e0e0e0;
	padding:0px 10px 15px;
	margin-bottom:30px;
}

.boxed-column h4{
	position:relative;
	font-size:18px;
	font-weight:700;
	top:-15px;
	margin-left:-5px;
	background:#ffffff;
	display:inline-block;
	padding:0px 10px;
	color:#2f2f31;
	margin-bottom:0px;	
}

/*** 

====================================================================
	Parctice Areas Section
====================================================================

***/

.practice-areas{
	position:relative;
	padding-bottom:30px;
}

.practice-column{
	position:relative;
	margin-bottom:50px;
	text-align:center;
}

.practice-column .inner-box{
	position:relative;
	background:#f5f5f5;
	border:1px solid #e0e0e0;	
}

.practice-column .image-box{
	position:relative;	
}

.practice-column .image-box img{
	display:block;
	width:100%;	
}

.practice-column .icon-box{
	position:relative;
	width:72px;
	height:72px;
	background:#ffffff;
	font-size:36px;
	line-height:68px;
	margin:-37px auto 10px;
	color:#3570b3;
	border:2px solid #3570b3;
	border-radius:50%;
	-ms-border-radius:50%;
	z-index:1;
}

.practice-column .lower-content{
	position:relative;
	padding:0px 8px 20px;
	min-height:260px;	
}

.practice-column h3{
	font-size:18px;
	color:#2f2f31;
	font-weight:700;
	margin-bottom:12px;	
}

.practice-column h3 a{
	color:#2f2f31;
}

.practice-column h3 a:hover{
	color:#3570b3;
}

/*** 

====================================================================
	Single Attorney Section
====================================================================

***/

.attorney-single{
	position:relative;
	padding-bottom:40px;
}

.attorney-single .basic-details{
	position:relative;
	margin-bottom:40px;
}

.attorney-single .image-column,
.attorney-single .info-column{
	margin-bottom:20px;
}

.attorney-single .basic-details .info-header{
	position:relative;
	border-bottom:1px solid #e0e0e0;
	margin-bottom:15px;
	padding-bottom:15px;	
}

.attorney-single .styled-heading h2{
	font-size:24px;	
}

.attorney-single .basic-details .text{
	margin-bottom:20px;
}

.attorney-single .basic-details .info-header h3{
	font-size:18px;
	color:#2f2f31;
	font-weight:700;
	text-transform:uppercase;
}

.attorney-single .basic-details .info-header .designation{
	font-size:16px;
	line-height:20px;
	color:#3570b3;
	text-transform:capitalize;
	font-style:italic;
	font-family: 'Inter', serif;
}

.attorney-single .basic-details .social-links{
	position:relative;
}

.attorney-single .basic-details .social-links a{
	position:relative;
	display:inline-block;
	width:44px;
	height:44px;
	font-size:14px;
	margin:0px 3px 5px;
	line-height:42px;
	border-radius:5px;
	text-align:center;
	border:1px solid #e1e1e1;
	color:#909090;
	transition:all 300ms ease;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
}

.attorney-single .basic-details .social-links a:hover{
	background-color:#3570b3;
	color:#ffffff;
	border-color:#3570b3;
}

.attorney-single .basic-details .contact-info{
	position:relative;
	
}

.attorney-single .basic-details .contact-info li{
	position:relative;
	padding-left:30px;
	line-height:20px;
}

.attorney-single .basic-details .contact-info a{
	color:#384597;
	text-decoration:underline;
	font-size:16px;	
}

.attorney-single .basic-details .contact-info li .icon{
	position:absolute;
	left:0px;
	top:0px;
	line-height:20px;
	color:#3570b3;
	width: 20px;
}

.attorney-single .education-info,
.attorney-single .court-info,
.attorney-single .awards-info,
.attorney-single .professional-info,
.attorney-single .bars-info{
	margin-bottom:40px;	
}


.styled-list-three{
	position:relative;
	
}

.styled-list-three li{
	position:relative;
	padding-left:40px;
	margin-bottom:7px;
	line-height:30px;
}

.attorney-single .styled-list-three li{
	margin-bottom:15px;	
}

.attorney-single .professional-info .styled-list-three li{
	margin-bottom:5px;	
}

.attorney-single .styled-list-three li strong{
	font-family:'Inter', sans-serif;
	color:#2f2f31;	
}

.styled-list-three li:last-child{
	margin-bottom:0px;	
}

.styled-list-three li:before{
	font-family: 'FontAwesome';
	content:'\f27e';
	position:absolute;
	left:5px;
	top:0px;
	display:block;
	font-size:18px;
	line-height:30px;
	color:#3570b3;
}

/*** 

====================================================================
	Tabs Style
====================================================================

***/

.tabs-section{
	position:relative;
	padding:70px 0px;	
}

.tabs-box{
	position:relative;	
}

.tabs-box .tab-buttons{
	position:relative;
}

.tabs-box.style-one .tab-buttons{
	margin-bottom:50px;	
}

.tabs-box.style-one .tab-buttons .tab-btn{
	position:relative;
	display:inline-block;
	line-height:24px;
	padding:12px 25px;
	margin:0px 5px 10px;
	background:#f5f5f5;
	border-radius:5px;
	font-weight:700;
	font-size:16px;
	cursor:pointer;
	transition:all 300ms ease;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
}

.tabs-box.style-one .tab-buttons .tab-btn:hover,
.tabs-box.style-one .tab-buttons .tab-btn.active-btn{
	background:#384597;
	color:#ffffff;	
}

.tabs-box .tab{
	display:none;	
}

.tabs-box .tab.active-tab{
	display:block;	
}

/*** 

====================================================================
	Default Form Section
====================================================================

***/

.default-form-section{
	position:relative;
	background:#ffffff;
	padding:70px 0px 50px;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
	overflow:hidden;
}

.default-form-section:before{
	content:'';
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	background:#f5f5f5;
	opacity:0.80;	
}

.default-form-section .auto-container{
	position:relative;
	z-index:1;	
}

/*** 

====================================================================
	Products Section style
====================================================================

***/

.products-section{
	position:relative;
	background:#ffffff;
	padding:70px 0px;
}

.products-section .shop-upper-box{
	position:relative;
	margin-bottom:40px;
	
}

.products-section .shop-upper-box .items-label{
	position:relative;
	padding:7px 0px;
	line-height:30px;	
}

.products-section .shop-upper-box .sort-by select{
	position:relative;
	display:block;
	line-height:24px;
	padding:9px 10px;
	width:240px;
	cursor:pointer;
	border:1px solid #dadada;
	background:#ffffff url(../images/icons/icon-dropdown.png) right center no-repeat;
	-webkit-appearance:none;
	-moz-appearance:none;
	-ms-appearance:none;
	-o-appearance:none;	
}

.products-section .shop-upper-box .sort-by select option{
	text-indent:10px;
}

.default-product-item{
	position:relative;
	margin-bottom:40px;	
}

.default-product-item .image-box{
	position:relative;
	overflow:hidden;
	margin-bottom:20px;	
}

.default-product-item .image-box img{
	display:block;
	width:100%;	
}

.default-product-item .default-overlay-outer{
	opacity:0;
	top:-100%;
	background:rgba(54,53,85,0.90);	
}

.default-product-item:hover .default-overlay-outer{
	top:0;
	opacity:1;	
}

.default-product-item .content-box{
	position:relative;	
}

.default-product-item .content-box h4{
	font-size:18px;
	font-weight:700;
	margin:0px 0px;
	line-height:1.4em;
	color:#2f2f31;
	font-family:'Inter', sans-serif;
	margin-bottom:3px;	
}

.default-product-item .content-box a,
.default-product-item .content-boxa:hover{
	color:#3570b3;
}

.default-product-item .content-box h4 a{
	color:#2f2f31;	
}

.default-product-item .content-box .rating{
	font-size:11px;
	color:#384597;
	margin-bottom:15px;
}

.default-product-item .content-box .item-price{
	font-size:18px;
	font-weight:700;
	color:#3570b3;
	line-height:24px;
}

.default-product-item .content-box .item-price .strike-through{
	color:#999999;
	font-weight:normal;
	font-size:14px;
	padding-left:10px;
	line-height:20px;
	
}

/*** 

====================================================================
	Products Details style
====================================================================

***/

.product-details .basic-details{
	position:relative;
	margin-bottom:50px;
}

.product-details .image-column,
.product-details .info-column{
	margin-bottom:20px;
}

.product-details .basic-details .details-header{
	position:relative;
	border-bottom:1px solid #e0e0e0;
	margin-bottom:20px;
	padding-bottom:20px;
	text-align: justify;
}

.product-details .basic-details .details-header h4{
	font-size:24px;
	font-weight:700;
	margin:0px 0px;
	line-height:1.4em;
	color:#2f2f31;
	font-family:'Inter', sans-serif;
	margin-bottom:3px;	
}

.product-details .basic-details .details-header h4 a{
	color:#2f2f31;	
}

.product-details .basic-details .details-header .rating{
	font-size:11px;
	color:#384597;
	margin-bottom:15px;
}

.product-details .basic-details .details-header .rating .txt{
	font-size:14px;
	padding-left:10px;	
}

.product-details .basic-details .details-header .item-price{
	font-size:24px;
	font-weight:700;
	color:#3570b3;
	line-height:24px;
}

.product-details .basic-details .text{
	margin-bottom:20px;	
}

.product-details .basic-details .check-delivery{
	position:relative;
	margin-bottom:30px;	
}

.product-details .basic-details .check-delivery h4{
	font-size:14px;
	color:#2f2f31;
	font-weight:700;
	margin-bottom:15px;	
}

.product-details .basic-details .check-delivery .form-group{
	position:relative;
	float:left;
	margin-right:10px;	
}

.product-details .basic-details .check-delivery .form-group input[type="text"]{
	display:block;
	line-height:24px;
	padding:7px 10px;
	border:1px solid #e0e0e0;
	border-radius:3px;
	width:170px;
	background:none;	
}

.product-details .basic-details .check-delivery .form-group button{
	display:block;
	line-height:24px;
	padding:7px 20px;
	border:1px solid #e0e0e0;
	background:#f5f5f5;
	color:#777777;
	font-size:14px;
	border-radius:5px;	
}

.product-details .basic-details .item-quantity{
	position:relative;
	top:4px;
	width:120px;	
}

.product-details .basic-details .item-quantity input[type="text"]{
	position:relative;
	line-height:40px;	
}

.product-details .basic-details .check-delivery .field-label{
	font-weight:700;
	font-size:14px;
	line-height:40px;
	color:#3570b3;
}

/*** 

====================================================================
	Product Tabs Style
====================================================================

***/

.prod-tabs{
	position:relative;	
}

.prod-tabs .tab-btns{
	position:relative;
	top:1px;
	z-index:1;	
}

.prod-tabs .tab-btns .tab-btn{
	position:relative;
	display:block;
	float:left;
	font-size:15px;
	color:#3d3d3d;
	text-transform:uppercase;
	font-weight:600;
	padding:10px 30px;
	border:1px solid transparent;
	border-top-width:3px;
	margin-right:3px;
}

.prod-tabs .tab-btns .tab-btn:hover,
.prod-tabs .tab-btns .tab-btn.active-btn{
	border-color:#e0e0e0;
	border-top-color:#3570b3;
	border-bottom-color:#ffffff;
	color:#3570b3;
}

.prod-tabs .tabs-container{
	position:relative;
	border:1px solid #e0e0e0;
	color:#000000;	
}

.prod-tabs .tabs-container .tab{
	position:relative;
	padding:40px 25px;
	display:none;
	
}

.prod-tabs .tabs-container .tab.active-tab{
	display:block;	
}

.prod-tabs .tabs-container .tab p,
.prod-tabs .tabs-container .tab h2,
.prod-tabs .tabs-container .tab h3,
.prod-tabs .tabs-container .tab h4,
.prod-tabs .tabs-container .tab h5,
.prod-tabs .tabs-container .tab h6{
	margin-bottom:15px;	
}


.prod-tabs .tabs-container .tab h3{
	font-size:18px;
	font-weight:700;
	
}

.prod-tabs .tabs-container .tab h4{
	font-size:16px;
	font-weight:700;
	
}

.prod-tabs .reviews-container{
	position:relative;	
}

.prod-tabs .reviews-container .review-box{
	position:relative;
	margin-bottom:30px;
	padding-left:100px;
	min-height:100px;
}

.prod-tabs .reviews-container .rev-thumb{
	position:absolute;
	left:0px;
	top:0px;
	width:82px;
	height:82px;
	border:1px solid #e0e0e0;
	background:#ffffff;
}

.prod-tabs .reviews-container .rev-thumb img{
	display:block;
	width:80px;
	height:80px;	
}

.prod-tabs .reviews-container .rev-content{
	position:relative;
	padding:15px;
	border:1px solid #e0e0e0;
	background:#ffffff;	
}

.prod-tabs .reviews-container .rating{
	color:#ffa500;
	font-size:14px;
	margin-bottom:5px;
}

.prod-tabs .reviews-container .rev-info{
	font-size:12px;
	letter-spacing:1px;
	margin-bottom:10px;
}

.prod-tabs .reviews-container .rev-text{
	font-size:14px;
}

.prod-tabs .add-review{
	position:relative;
	margin:30px 0px 20px;
	font-size:14px;
}

.prod-tabs .add-review .rating{
	position:relative;	
}

.prod-tabs .add-review .rating .rate-box{
	position:relative;
	display:inline-block;
	margin-right:10px;
	font-size:14px;
	color:#5a5a5a;	
}

.prod-tabs .add-review .rating .rate-box:hover,
.prod-tabs .add-review .rating .rate-box:focus,
.prod-tabs .add-review .rating .rate-box:active{
	color:#ffa500;	
}

.prod-tabs .add-review label{
	position:relative;
	display:block;
	font-size:14px;
	margin-bottom:5px;
	font-weight:400;
	color:#303030;	
}

.prod-tabs .add-review h3{
	margin-bottom:20px;	
}

.prod-tabs .add-review .form-group{
	position:relative;
	margin-bottom:20px;	
}

.prod-tabs .add-review .form-group input[type="text"],
.prod-tabs .add-review .form-group input[type="password"],
.prod-tabs .add-review .form-group input[type="tel"],
.prod-tabs .add-review .form-group input[type="email"],
.prod-tabs .add-review .form-group select{
	position:relative;
	display:block;
	width:100%;
	line-height:22px;
	padding:9px 15px;
	color:#222222;
	border:1px solid #e0e0e0;
	transition:all 300ms ease;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
}

.prod-tabs .add-review .form-group textarea{
	position:relative;
	display:block;
	width:100%;
	line-height:22px;
	padding:8px 15px;
	color:#222222;
	border:1px solid #e0e0e0;
	height:200px;
	resize:none;
	transition:all 300ms ease;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
}

.prod-tabs .add-review button{
	position:relative;
	display:inline-block;
	background:#3d3d3d;
	color:#ffffff;
	padding:7px 32px;
	line-height:24px;
	font-size:14px;
	font-weight:500;
}

.prod-tabs .add-review button:before{
	background:#3570b3;
}

.related-products{
	position:relative;
	padding:70px 0px 40px;	
}

/*** 

====================================================================
	Contact Section
====================================================================

***/

.contact-section{
	position:relative;
	padding:70px 0px 0px;
}

.contact-section .column{
	position:relative;
	margin-bottom:50px;
}

.contact-section .default-form button{
	padding:10px 30px;	
}

.contact-form .form-group{
	margin-bottom:30px;	
}
.has-error .form-control,
.contact-form .form-group.has-error,
#openFormId .form-group.has-error input,
.contact-form .form-group.has-error input,
.has-error .select2-container--krajee .select2-selection--single {
	border-color: #ff0000!important;
	color: #ff0000!important;
}
.btn.btn-primary.btn-file {
	background: #384597;
	line-height: 38px;
}
.contact-section .contact-info{
	position:relative;
	margin-bottom:30px;
}

.contact-section .contact-info h3{
	font-size:18px;
	font-weight:700;
	margin-bottom:15px;
	color:#2f2f31;
}

.contact-section .contact-info .icon{
	font-size:18px;
	font-weight:normal;
	padding-right:7px;
	color:#3570b3;
}

.contact-section .contact-info .info-block{
	margin-bottom:25px;	
}

.contact-section .contact-info .text{
	position:relative;
		
	margin-bottom:10px;
	color:#999999;
}

.contact-section .contact-info .hours-list li{
	position:relative;
	margin-bottom:4px;
		
}

.contact-section .contact-info .hours-list .col{
	position:relative;
	display:block;
	float:left;
	width:50%;	
}

/*** 

====================================================================
	Login / Register Section
====================================================================

***/

.register-section{
	position:relative;
	padding:70px 0px 20px;
}

.register-section .form-column{
	margin-bottom:50px;	
}

.styled-form{
	position:relative;	
}

.styled-form .form-group{
	position:relative;
	margin-bottom:30px;
	font-size:14px;	
}

.styled-form .pull-left label,
.styled-form .pull-right label{
	cursor:pointer;
}

.styled-form .form-group .adon-icon{
	position:absolute;
	top:50%;
	margin-top:-10px;
	right:10px;
	width:20px;
	height:20px;
	line-height:20px;
	font-size:14px;
	color:#999999;
	z-index:2;
}

.styled-form input[type="text"],
.styled-form input[type="email"],
.styled-form input[type="password"],
.styled-form input[type="tel"],
.styled-form input[type="number"],
.styled-form input[type="url"],
.styled-form select,
.styled-form textarea{
	position:relative;
	display:block;
	width:100%;
	background:#ffffff;
	line-height:30px;
	padding:8px 20px;
	height:48px;
	border:1px solid #e0e0e0;
	border-radius:5px;
	transition:all 300ms ease;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
}

.styled-form select{
	-webkit-appearance:none;
	-ms-appearance:none;
	-moz-appearance:none;
	-o-appearance:none;
	background:#ffffff url(../images/icons/icon-dropdown.png) right center no-repeat;
	cursor:pointer;
}

.styled-form select option{
	text-indent:20px;	
}

.styled-form textarea{
	resize:none;
	height:110px;	
}

.styled-form input:focus,
.styled-form select:focus,
.styled-form textarea:focus{
	border-color:#3570b3;
}

.styled-form .forgot{
	font-size:14px;	
}

.social-links-two a{
	position:relative;
	display:inline-block;
	font-size:14px;
	width:42px;
	height:42px;
	line-height:42px;
	text-align:center;
	color:#ffffff;
	background:#384597;
	margin:0px 0px 0px 15px;
	transition:all 0.5s ease;
	-moz-transition:all 0.5s ease;
	-webkit-transition:all 0.5s ease;
	-ms-transition:all 0.5s ease;
	-o-transition:all 0.5s ease;
}

.social-links-two a:hover{
	opacity:0.80;
}

.social-links-two .facebook{
	background:#3b5998;	
}

.social-links-two .twitter{
	background:#33ccfe;	
}

.social-links-two .google-plus{
	background:#dd4b39;	
}


/*** 

====================================================================
	Cart Section style
====================================================================

***/

.cart-section{
	position:relative;
	padding:70px 0px;
}

.cart-section .cart-outer{
	position:relative;	
}

.cart-section .table-outer{
	position:relative;
	width:100%;
	overflow-x:	auto;
}

.cart-section .cart-table{
	width:100%;
	min-width:900px;	
}

.cart-table .cart-header{
	position:relative;
	width:100%;
	font-family:'Lora',sans-serif;
	text-transform:uppercase;
	font-size:16px;
	border-radius:7px;
	background:#f5f5f5;
	color:#2f2f31;
}

.cart-table thead tr th{
	line-height:24px;
	padding:20px 15px;
	min-width:120px;
	font-weight:700;
}

.cart-table thead tr th.prod-column{
	text-align:left;
	padding-left:40px;	
}

.cart-table tbody tr td{
	line-height:24px;
	padding:30px 10px 20px;
	min-width:100px;
	
}

.cart-table tbody tr .qty{
	width:120px;
	padding-right:20px;
}

.cart-table tbody tr .qty .quantity-spinner{
	background:#f5f5f5;	
}

.cart-table tbody tr .prod-column .column-box{
	position:relative;
	min-height:90px;
	padding-left:100px;
	padding-top:15px;
	text-align:left;
}

.cart-table tbody tr .prod-column .column-box .prod-thumb{
	position:absolute;
	left:0px;
	top:0px;	
}

.cart-table tbody tr .prod-column .column-box .prod-thumb img{
	 display:block;
	 max-width:100%;
}

.cart-table tbody tr .prod-column .column-box h3{
	font-size:18px;
	color:#2f2f31;
	font-weight:700;
	margin-bottom:5px;	
}

.cart-table tbody tr .sub-total{
	font-weight:700;
	color:#384597;
}

.cart-table tbody tr .remove-btn{
	position:relative;
	font-size:16px;
	color:#282828;
	line-height:30px;
	-webkit-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	transition:all 500ms ease;
}

.cart-table tbody tr .remove-btn .fa{
	position:relative;
	top:2px;
	padding-right:10px;
	font-size:24px;
	line-height:30px;
}

.cart-table tbody tr .remove-btn:hover{
	color:#ec1c33;
}

.cart-table tbody tr{
	border-bottom:1px solid #e9e9e9;	
}

.cart-table tbody tr td{
	vertical-align:middle;	
}

.cart-table tbody tr td .quantity-spinner{
	padding:5px 0px 5px 20px;
	line-height:24px;
	height:34px;
	display:block;
	width:100%;
	position:relative;
}

.cart-table tbody .available-info{
	position:relative;
	padding-left:50px;	
}

.cart-table tbody .available-info .icon{
	position:absolute;
	left:0px;
	top:5px;
	width:40px;
	height:40px;
	line-height:40px;
	text-align:center;
	font-size:18px;
	color:#ffffff;
	background:#384597;
	border-radius:50%;
}

.cart-section .apply-coupon{
	position:relative;
}

.cart-section .apply-coupon .form-group{
	position:relative;
	float:left;
	margin-right:10px;	
}

.cart-section .apply-coupon .form-group input[type="text"]{
	display:block;
	line-height:24px;
	padding:9px 10px;
	border:1px solid #e0e0e0;
	border-radius:3px;
	width:230px;
	background:none;	
}

.cart-section .estimate-form{
	position:relative;
}

.cart-section h3{
	font-size:24px;
	font-weight:700;
	color:#2f2f31;
	margin-bottom:30px;	
}

.cart-section .estimate-form .row{
	margin-left:-7px;
	margin-right:-7px;	
}

.cart-section .estimate-form .row .form-group{
	padding:0px 7px !important;
	margin-bottom:30px;
}

.cart-section .totals-table{
	position:relative;
	border:1px solid #e0e0e0;
	
	border-radius:5px;	
}

.cart-section .totals-table .col{
	position:relative;
	display:block;
	float:left;
	padding:10px 15px;
	line-height:24px;
	width:50%;	
}

.cart-section .totals-table .col-title{
	font-family:'Inter', sans-serif;
	font-size:14px;
	color:#353535;
	border-right:1px solid #e0e0e0;
	font-weight:700;	
}

.cart-section .totals-table li{
	position:relative;
	border-bottom:1px solid #e0e0e0;	
}

.cart-section .totals-table li:last-child{
	border-bottom:none;	
}


/*** 

====================================================================
	Checkout Style
====================================================================

***/

.checkout-section{
	position:relative;
	padding:70px 0px;
}

.checkout-section .cart-table{
	width:100%;
	min-width:500px;	
}

.checkout-section .form-column{
	margin-bottom:50px;	
}

.checkout-section .default-form .form-group{
	margin-bottom:20px;	
}

.checkout-section .default-form .form-group .field-label{
	margin-bottom:10px;
	font-weight:700;
}

.checkout-section .default-form .form-group input,
.checkout-section .default-form .form-group select,
.checkout-section .default-form .form-group textarea{
	border-radius:3px;
	height:48px;
	padding:8px 15px;
	line-height:30px;	
}

.checkout-section .default-form .form-group textarea{
	height:154px;	
}

.checkout-section .totals-table{
	margin-bottom:30px;	
}

.checkout-section .payment-options{
	position:relative;	
}

.checkout-section .payment-options .option-block{
	position:relative;
	margin-bottom:10px;
}

.checkout-section .payment-options .text{
	position:relative;
	padding-left:30px;
	margin-bottom:20px;
	font-size:16px;	
}

.checkout-section .payment-options .option-block .radio-block{
	position:relative;	
}

.checkout-section .payment-options .option-block .radio-block input[type="radio"]{
	position:absolute;
	left:0px;
	top:7px;
	opacity:0;	
}

.checkout-section .payment-options .option-block .radio-label{
	position:relative;
	display:block;
	padding-left:30px;
	line-height:30px;
	font-size:16px;
	font-weight:700;
	color:#2f2f31;
	text-transform:capitalize;
	cursor:pointer;
}

.checkout-section .payment-options .option-block .radio-label:before{
	content:'';
	position:absolute;
	left:0px;
	top:7px;
	display:block;
	width:16px;
	height:16px;
	border:1px solid #e0e0e0;
	background:#ffffff;	
}

.checkout-section .payment-options .option-block .radio-block input[type="radio"]:checked+.radio-label:before{
	border-color:#3570b3;
}

.checkout-section .payment-options .option-block .radio-label:after{
	content:'';
	position:absolute;
	top:11px;
	left:4px;
	display:block;
	width:8px;
	height:8px;
	background:#384597;
	opacity:0;
}

.checkout-section .payment-options .option-block .radio-block input[type="radio"]:checked+.radio-label:after{
	opacity:1;
}



.google-map-wrapper {
  position: relative;
  min-height: 550px;
}
.google-map-wrapper .over-map {
  z-index: 10;
  position: relative;
}

#home-google-map {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
}

/* CUSTOM*/
.tp-banner {
	padding: 70px 0 30px 0;
	text-align: center;
}
.tp-banner:after {
	width: 100%;
	content: "";
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	-webkit-filter: blur(3px);
	-moz-filter: blur(3px);
	-o-filter: blur(3px);
	-ms-filter: blur(3px);
	filter: blur(3px);
	background-image: url('../images/main-slider/2.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.tp-caption {
	margin: 30px auto;
}
.cover-image {
	position: relative;
	z-index: 1;
}
.cover-image img {
	max-width: 300px;
}
.language-flag {
	width: 20px;
}
.default-text-box p a {
 color: #066ced!important;
}
.default-text-box p a.btn {
	color: #fff!important;
}
.iframe-responsive {
	width: 100%;
	max-width: 100%;
	height: 500px;
	box-shadow: 0px 0px 10px #384597;
	margin-bottom: 15px;
}
.social-links li {
	position: relative;
	display: inline-block;
	/* width: 44px; */
	/* height: 44px; */
	padding: 2px 10px;
	font-size: 14px;
	margin: 0px 3px 5px;
	line-height: 42px;
	border-radius: 5px;
	text-align: center;
	border: 1px solid #e1e1e1;
	color: #909090;
	transition: all 300ms ease;
	-webkit-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
}
.post-info li>span::before,
.social-links li>span::before {
	margin-right: 5px;
}
.one-article {
	padding-top: 0;
}
.one-article .featured-news-column .content{
	position:relative;
	padding:30px;
}
.one-article .featured-news-column h3 {
	font-size: 20px;
	margin-bottom: 15px;
}
.author-name-coma {
	position: relative;
	margin-right: 10px;
}
.author-name-coma:after {
	position: absolute;
	content: ",";
	font-size: inherit;
	bottom: -4px;
	right: -4px;
}
.author-name-coma:last-of-type {
	margin-right: 0;
}
.author-name-coma:last-of-type:after {
	content: none;
}
.how-to-cite {
	padding: 5px 7px;
	font-size: 12px;
	background: #fff;
}
.how-to-cite:hover {
	cursor: copy;
}
.margin-top-20>a>b,
.how-to-cite a {
	word-break: break-all;
}
.editorial-flex {
	display: flex;
	display: -ms-flex;
	display: -moz-flex;
	display: -o-flex;
	display: -webkit-flex;
	align-items: center;
	flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
}
.editorial-flex h4 {
	margin: 5px 10px 5px 0;
}
.general-keywords {
	overflow: hidden;
}
.soft-hide {
	height: 50px;
	overflow: hidden;
	/*position: absolute;*/
	left: 0;
	right: 0;
	/*z-index: -1;*/
	/*visibility: hidden;*/
}
.btn-full {
	position: relative;
	/*bottom: -4px;*/
	width: 100%;
	margin: 10px 0 20px 0;
	text-align: center;
}
.btn-full .btn-link {
	color: #ffffff;
}
.btn-full:hover {
	cursor: pointer;
	text-decoration: none;
}
.btn-full:after {
	position: absolute;
	left: 0;
	bottom: 100%;
	width: 100%;
	height: 150px;
	content: "";
	background: -moz-linear-gradient(top, rgba(255,255,255,0.2) 0%, rgba(255,255,255,1) 85%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.6)), color-stop(85%,rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(255,255,255,1) 85%);
	background: -ms-linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(255,255,255,1) 85%);
	background: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%,rgba(255,255,255,1) 85%);
}
.btn-full.no-after:after {
	height: 0;
}
.social-links-one a:hover span svg path,
.social-links-one a:hover span svg circle,
.social-links a:hover span svg path,
.social-links a:hover span svg circle {
	fill: #ffffff;
}
.social-links-one a:hover span svg .st0,
.social-links a:hover span svg .st0 {
	fill: #384597;
}
.main-menu .navigation > li > ul > li.current {
	background: #384597;
}
.default-text-box ul,
.default-text-box ol {
	padding-left:30px ;
	margin-bottom: 20px;

}
.default-text-box ol li,
.default-text-box li ol li {
	list-style: inherit;
}
.default-text-box ul li,
.default-text-box li ul li {
	list-style: initial;
}

.share-options li{
	line-height:34px;
	margin-right:10px;
	float:left;
	margin-bottom: 15px;
}

.share-options li a{
	position:relative;
	display:inline-block;
	font-size:14px;
	width:34px;
	height:34px;
	line-height:32px;
	border:1px solid #e9e9e9;
	text-align:center;
	color:#999999;
	border-radius:5px;
	transition:all 0.5s ease;
	-moz-transition:all 0.5s ease;
	-webkit-transition:all 0.5s ease;
	-ms-transition:all 0.5s ease;
	-o-transition:all 0.5s ease;
}
.share-options li a:hover{
	color:#ffffff;
	background:#3570b3;
}
.share-wrapper {
	margin-bottom: 25px;
}
.share-wrapper .icon{
	position: relative;
	background-color: #ffffff;
	border-radius: 5px;
	margin: 10px 15px 10px 0;;
	width: 30px;
	height: 30px;
	line-height: 30px;
	font-size: 18px;
	display: inline-block;
	align-items: center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	color: #999999;
	text-align: center;
	text-decoration: none;
}
.share-wrapper .icon.not-link {
	width: auto;
	padding: 0 10px;
}
.share-wrapper .icon.not-link:hover {
	cursor: context-menu;
}
.share-wrapper .tooltip {
	position: absolute;
	top: 0;
	line-height: 1.5;
	font-size: 14px;
	background-color: #ffffff;
	color: #ffffff;
	padding: 5px 8px;
	border-radius: 5px;
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
	opacity: 0;
	pointer-events: none;
	transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.share-wrapper .tooltip::before {
	position: absolute;
	content: "";
	height: 8px;
	width: 8px;
	background-color: #ffffff;
	bottom: -3px;
	left: 50%;
	transform: translate(-50%) rotate(45deg);
	transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.share-wrapper .icon:hover .tooltip {
	top: -45px;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.share-wrapper .icon:hover span,
.share-wrapper .icon:hover .tooltip {
	text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}
.share-wrapper .facebook:hover,
.share-wrapper .facebook:hover .tooltip,
.share-wrapper .facebook:hover .tooltip::before {
	background-color: #3b5999;
	color: #ffffff;
}
.share-wrapper .twitter:hover,
.share-wrapper .twitter:hover .tooltip,
.share-wrapper .twitter:hover .tooltip::before {
	background-color: #46c1f6;
	color: #ffffff;
}
.share-wrapper .linkedin:hover,
.share-wrapper .linkedin:hover .tooltip,
.share-wrapper .linkedin:hover .tooltip::before {
	background-color: #0077b5;
	color: #ffffff;
}
.share-wrapper .telegram:hover,
.share-wrapper .telegram:hover .tooltip,
.share-wrapper .telegram:hover .tooltip::before {
	background-color: #0088cc;
	color: #ffffff;
}
.share-wrapper .email:hover,
.share-wrapper .email:hover .tooltip,
.share-wrapper .email:hover .tooltip::before {
	background-color: #ffb607;
	color: #ffffff;
}
.share-wrapper .viber:hover,
.share-wrapper .viber:hover .tooltip,
.share-wrapper .viber:hover .tooltip::before {
	background-color: #7360f2;
	color: #ffffff;
}
.share-wrapper .whatsapp:hover,
.share-wrapper .whatsapp:hover .tooltip,
.share-wrapper .whatsapp:hover .tooltip::before {
	background-color: #25D366;
	color: #ffffff;
}
#searchform-type label {
	display: block;
}
.requirements .table > thead > tr > th,
.requirements .table > tbody > tr > th,
.requirements .table > tfoot > tr > th,
.requirements .table > thead > tr > td,
.requirements .table > tbody > tr > td,
.requirements .table > tfoot > tr > td {
	padding: 12px;
	border: none;
	border-bottom: 1px solid #ddd;
}

input.file-caption-name.form-control.kv-fileinput-caption,
.input-group-btn.input-group-append button {
	height: 52px;
	z-index: 1;
}
.main-header .top-bar .search-box .form-group.field-searchform-type {
	display: none;
}
.product-details .styled-heading.margin-bott-20 h5 {
	font-weight: 700;
}
.author-block {
	padding: 20px;
	box-shadow:  0 1px 4px rgba(0, 0, 0, .3),
	-23px 0 20px -23px rgba(0, 0, 0, .6),
	23px 0 20px -23px rgba(0, 0, 0, .6),
	inset 0 0 40px rgba(0, 0, 0, .1);
	margin-bottom: 30px;
}
#authors-form label {
	font-size: 11px;
	line-height: 1;
}
#authors-form.form-control {
	font-size: 12px;
}
#authors-form .iti.iti--allow-dropdown {
	width: 100%;
}
#authors-form h3 {
	font-size: 20px;
}
#authors-form .styled-heading {
	margin-bottom: 10px;
	padding-bottom: 15px;
}
#authors-form .styled-heading:before {
	width: 70px;
	height: 4px;
}
#authors-form .styled-heading:after {
	font-size: 16px;
	left: 10px;
}
.attention-text {
	text-align: center;
	padding: 25px 15px;
	margin-bottom: 25px;
	font-weight: 500;
	box-shadow: 0 1px 4px rgba(248, 130, 169, .7), -23px 0 20px -23px rgba(248, 130, 169, .9), 23px 0 20px -23px rgba(248, 130, 169, .9), inset 0 0 40px rgba(248, 130, 169, .1);
}
#authors-form textarea {
	width: 100%;
	height: 80px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.references-list ol {
	list-style-type: none; /* Убираем стандартные маркеры */
	padding: 0;
}

.references-list ol li {
	counter-increment: item; /* Увеличиваем счетчик */
	position: relative;
	padding-left: 37px; /* Отступ для текста */
}

.references-list ol li::before {
	content: "[" counter(item) "]"; /* Вставляем счетчик в формате [X] */
	position: absolute;
	left: 0;
	top: 0;
}

/* --- LAYOUT & BACKGROUND --- */

/* Основна обгортка на весь екран */
.nb-app {
	display: flex;
	flex-direction: column;
	min-height: 100vh; /* Притискаємо футер до низу */

	/* ФОН: Робимо патерн "крапочки" (Polka Dot) */
	background-color: var(--color-bg-alt);
	background-image: radial-gradient(var(--color-border) 1px, transparent 1px);
	background-size: 20px 20px; /* Відстань між крапками */
}

/* --- MAIN CONTENT AREA --- */
.nb-main {
	flex: 1; /* Розтягує контент, щоб заповнити простір до футера */
	padding: var(--spacing-md) 0;

	/* У необруталізмі контент часто відділяють чіткою рамкою зліва і справа,
       або роблять його "карткою" по центру */
}

/* Перевизначаємо контейнер, щоб він був "білим аркушем" по центру (Опціонально) */
.nb-main .nb-container {
	background-color: var(--color-bg);
	border: var(--border-main);
	box-shadow: var(--shadow-card); /* Тінь під всім контентом */
	padding: var(--spacing-md);
	min-height: 400px;
}

/* --- FOOTER --- */
.nb-footer {
	background-color: var(--color-primary);
	color: #fff;
	border-top: var(--border-main);
	padding: var(--spacing-md) 0;
	margin-top: auto; /* Гарантує, що футер внизу */
}

.nb-footer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--spacing-md);
}

.nb-copyright {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	opacity: 0.8;
}

/* --- HEADER LAYOUT --- */
.nb-site-header {
	position: sticky;
	top: 0;
	z-index: 9999;
	background: var(--color-bg);
	border-bottom: var(--border-main);
}

.nb-container {
	max-width: 1400px; /* Широкий екран для академічного журналу */
	margin: 0 auto;
	padding: 0 var(--spacing-sm);
}

.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center-y { display: flex; align-items: center; }

/* --- TOP BAR (ISSN) --- */
.nb-top-bar {
	background-color: var(--color-text); /* Чорний фон */
	color: #fff;
	padding: 4px 0;
	font-size: 0.8rem;
	font-family: var(--font-body);
}

.nb-tag {
	display: inline-block;
	padding: 2px 8px;
	background: #fff;
	color: #000;
	font-weight: 700;
	margin-right: 8px;
	border: 1px solid #fff;
}

.nb-tag.is-dark {
	background: #000;
	color: #fff;
}

/* --- MAIN BAR --- */
.nb-main-bar {
	padding: var(--spacing-sm) 0;
	background: var(--color-bg);
}

/* Logo */
.nb-brand-logo {
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: 900;
	text-transform: uppercase;
	color: var(--color-primary);
	text-decoration: none;
	line-height: 1.1;
	margin-right: auto; /* Відштовхує меню вправо */
	max-width: 20%;
	border: none;
}

/* --- NAVIGATION --- */
.nb-desktop-nav {
	margin: 0 var(--spacing-md);
}

.nb-menu-list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 4px; /* Малий відступ, бо елементи мають свої паддінги */
}

.nb-menu-link {
	display: block;
	font-family: var(--font-heading);
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--color-text);
	text-decoration: none;
	padding: 10px 14px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: 0.2s;
	position: relative;
}

.nb-menu-link:hover,
.nb-has-dropdown:hover > .nb-menu-link {
	background-color: var(--color-accent);
	border: 2px solid var(--color-border);
	box-shadow: 4px 4px 0 var(--color-border);
	transform: translate(-2px, -2px);
}

/* Стрілочка для дропдауна */
.arrow-down {
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid var(--color-text);
	margin-left: 5px;
	vertical-align: middle;
}

/* --- DROPDOWNS (Необруталізм) --- */
.nb-has-dropdown {
	position: relative;
}

.nb-dropdown {
	display: none; /* Приховано за замовчуванням */
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 260px;
	background: #fff;
	list-style: none;
	padding: 0;
	margin: 0;
	border: var(--border-main);
	box-shadow: var(--shadow-hard); /* Жорстка тінь */
	z-index: 100;
}

/* Показуємо при наведенні */
.nb-has-dropdown:hover .nb-dropdown {
	display: block;
	animation: slideUp 0.1s ease-out;
}

@keyframes slideUp {
	from { transform: translateY(10px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

.nb-dropdown li {
	border-bottom: 2px solid var(--color-text);
}
.nb-dropdown li:last-child { border-bottom: none; }

.nb-dropdown a {
	display: block;
	padding: 12px 16px;
	color: var(--color-text);
	text-decoration: none;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.95rem;
	transition: 0.2s;
	border-bottom: none;
}

.nb-dropdown a:hover {
	background-color: var(--color-primary);
	color: #fff;
	padding-left: 24px; /* Ефект зсуву при наведенні */
}

/* --- SEARCH & ACTIONS --- */
.nb-header-actions {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

/* Стилізація форми пошуку, що генерується Yii */
.nb-search-wrapper input[type="text"] {
	border: 2px solid var(--color-text);
	padding: 8px;
	font-family: var(--font-body);
	width: 150px; /* Компактний пошук */
	transition: 0.2s;
}
.nb-search-wrapper input[type="text"]:focus {
	width: 200px; /* Розширення при фокусі */
	background: var(--color-bg-alt);
	outline: none;
	box-shadow: 4px 4px 0 var(--color-accent);
}
/* Кнопка пошуку (зазвичай submit button всередині форми) */
.nb-search-wrapper button {
	display: none; /* Часто приховують кнопку, лишаючи Enter, або треба стилізувати */
}

/* --- MOBILE TOGGLE --- */
.nb-mobile-toggle {
	display: none; /* На десктопі не треба */
	background: none;
	border: 2px solid var(--color-text);
	padding: 5px;
	cursor: pointer;
	flex-direction: column;
	gap: 4px;
}
.nb-mobile-toggle .icon-bar {
	display: block;
	width: 24px;
	height: 3px;
	background: var(--color-text);
}

/* --- RESPONSIVE --- */
@media (max-width: 1100px) {
	.nb-desktop-nav, .nb-cta-desktop {
		display: none;
	}
	.nb-mobile-toggle {
		display: flex;
	}
	.nb-logo { font-size: 1rem; }
}

/* --- WIDGET FIXES --- */
/* Стилі для віджета мов, який генерується Yii */
.nb-lang-box ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 10px;
}
.nb-lang-box a {
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
}
.nb-lang-box a:hover, .nb-lang-box li.active a {
	text-decoration: underline;
}

/* --- МОБІЛЬНЕ МЕНЮ (КОНТЕЙНЕР) --- */
.nb-mobile-menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: var(--color-bg);
	/* Патерн для фону мобільного меню (опціонально) */
	background-image: radial-gradient(var(--color-border) 1px, transparent 1px);
	background-size: 20px 20px;

	z-index: 9998; /* Під хедером, але над контентом? Ні, краще перекривати все, крім кнопки */
	/* Але щоб кнопка була видима, ми опустимо меню трохи нижче, або піднімемо кнопку z-index */
	z-index: 900;
	padding-top: 80px; /* Відступ зверху під шапку */

	/* Стан "Закрито" */
	transform: translateX(100%); /* Сховано праворуч */
	opacity: 0;
	transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.3s;
}

/* Стан "Відкрито" */
.nb-mobile-menu.is-active {
	transform: translateX(0);
	opacity: 1;
}

/* Вміст мобільного меню */
.nb-mobile-nav-content {
	height: 100%;
	overflow-y: auto; /* Дозволяє скролити пункти, якщо їх багато */
	padding: var(--spacing-md);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

/* Стилі посилань у мобільному меню */
.nb-mobile-link {
	display: block;
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-text);
	text-decoration: none;
	padding: 15px;
	border: 2px solid var(--color-border);
	background: #fff;
	box-shadow: 4px 4px 0 var(--color-border); /* Жорстка тінь */
	transition: 0.2s;
}

.nb-mobile-link:active {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 var(--color-border);
}

/* --- АНІМАЦІЯ КНОПКИ (ГАМБУРГЕР -> ХРЕСТИК) --- */
.nb-mobile-toggle {
	z-index: 1000; /* Кнопка завжди зверху */
	position: relative;
	/* Попередні стилі кнопки зберігаються... */
}

.nb-mobile-toggle span {
	transition: 0.3s;
	transform-origin: center;
}

/* Перетворення на Хрестик */
.nb-mobile-toggle.is-active span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.nb-mobile-toggle.is-active span:nth-child(2) {
	opacity: 0;
}
.nb-mobile-toggle.is-active span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Допоміжний клас для body */
.nb-no-scroll {
	overflow: hidden;
}

/* --- КНОПКА ЛУПИ В ХЕДЕРІ --- */
.nb-btn-icon {
	background: transparent;
	border: 2px solid transparent; /* Резерв місця під рамку */
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--color-text);
	border-radius: var(--radius-sm);
	transition: 0.2s;
}

.nb-btn-icon:hover {
	background-color: var(--color-accent);
	border: 2px solid var(--color-border);
	box-shadow: 3px 3px 0 var(--color-border);
	transform: translate(-1px, -1px);
}

/* --- FULL SCREEN OVERLAY --- */
.nb-search-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10000; /* Поверх усього */

	/* ФОН: Темний, напівпрозорий з блюром */
	background-color: rgba(149, 153, 146, 0.95); /* Ваш primary колір з прозорістю */
	backdrop-filter: blur(10px); /* Ефект матового скла */

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	/* Анімація появи */
	opacity: 0;
	pointer-events: none; /* Щоб не клікалось коли закрито */
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s;
}

/* Стан "Відкрито" */
.nb-search-overlay.is-active {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}

/* Кнопка закриття */
.nb-search-close {
	position: absolute;
	top: 30px;
	right: 30px;
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	transition: 0.2s;
}
.nb-search-close:hover {
	color: var(--color-accent);
	transform: scale(1.1) rotate(90deg);
}

/* Контент пошуку */
.nb-search-content {
	width: 100%;
	max-width: 800px;
	padding: 0 20px;
	text-align: center;
	transform: translateY(20px);
	transition: transform 0.4s ease;
}

.nb-search-overlay.is-active .nb-search-content {
	transform: translateY(0); /* Ефект випливання */
}

.nb-search-title {
	color: #fff;
	font-size: 2rem;
	margin-bottom: 2rem;
	text-transform: uppercase;
}

.nb-search-hint {
	color: rgba(255,255,255, 0.6);
	margin-top: 1rem;
	font-family: var(--font-body);
}

/* --- СТИЛІЗАЦІЯ ФОРМИ YII ВСЕРЕДИНІ ОВЕРЛЕЯ --- */
/* Тут ми "хакаємо" стандартні стилі інпутів Yii, щоб зробити їх гігантськими */

.nb-search-form-wrapper form {
	position: relative;
	width: 100%;
}

.nb-search-form-wrapper input[type="text"] {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 4px solid #fff; /* Товста лінія знизу */
	color: #fff;
	font-family: var(--font-heading);
	font-size: 3rem; /* Величезний текст */
	font-weight: 700;
	padding: 10px 0;
	text-align: center;
	outline: none;
	border-radius: 0;
}

.nb-search-form-wrapper input[type="text"]::placeholder {
	color: rgba(255,255,255, 0.3);
	text-transform: uppercase;
}

/* Якщо Yii додає кнопку пошуку, приховаємо її або стилізуємо */
.nb-search-form-wrapper button[type="submit"] {
	display: none; /* Зазвичай Enter достатньо для таких великих форм */
}

/* --- WIDGET CONTAINER --- */
.nb-lang-widget {
	position: relative;
	font-family: var(--font-heading); /* Шрифт Unbounded для стилю */
	display: inline-block;
}

/* --- TRIGGER (Те, що видно в шапці) --- */
.nb-lang-current {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	padding: 5px 10px;
	color: #fff; /* Білий текст на чорному фоні */
	font-size: 0.8rem;
	font-weight: 700;
	transition: color 0.2s ease;
	user-select: none;
	text-transform: uppercase;
}

.nb-lang-current:hover {
	color: var(--color-accent); /* Блакитний при наведенні */
}

/* Прапорець */
.nb-lang-flag {
	width: 18px;
	height: auto;
	display: block;
	border: 1px solid rgba(255,255,255, 0.3); /* Тонка рамка навколо прапора */
}

/* Текстовий код (UA, EN) */
.nb-lang-code {
	letter-spacing: 0.5px;
}

/* Стрілочка (CSS Triangle) */
.nb-caret {
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid currentColor; /* Колір береться від тексту */
	margin-left: 2px;
	transition: transform 0.2s ease;
}

/* Поворот стрілочки при наведенні на віджет */
.nb-lang-widget:hover .nb-caret {
	transform: rotate(180deg);
}

/* --- DROPDOWN (Випадаючий список) --- */
.nb-lang-dropdown {
	display: none; /* Приховано за замовчуванням */
	position: absolute;
	top: 100%;
	right: 0; /* Вирівнювання по правому краю */
	min-width: 160px;
	background-color: #fff;
	border: var(--border-main); /* Чорна рамка 3px */
	box-shadow: var(--shadow-hard); /* Жорстка тінь */
	list-style: none;
	padding: 0;
	margin: 5px 0 0 0; /* Відступ зверху */
	z-index: 2000;
}

/* --- ITEMS (Пункти списку) --- */
.nb-lang-dropdown li {
	border-bottom: 2px solid var(--color-border);
}

.nb-lang-dropdown li:last-child {
	border-bottom: none;
}

.nb-lang-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 15px;
	text-decoration: none;
	color: var(--color-text);
	font-size: 0.9rem;
	font-weight: 600;
	transition: 0.2s ease;
}

/* Ефект наведення на пункт меню */
.nb-lang-link:hover {
	color: #000;
	padding-left: 20px; /* Ефект зсуву */
}

/* Прапорець у випадаючому списку */
.nb-lang-link .nb-lang-flag {
	border: 1px solid var(--color-border);
}

/* --- ANIMATION --- */
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(-5px); }
	to { opacity: 1; transform: translateY(0); }
}

/* --- ЛОГІКА ВІДОБРАЖЕННЯ (JS CLASS) --- */

/* Стрілочка повертається, коли додано клас is-open */
.nb-lang-widget.is-open .nb-caret {
	transform: rotate(180deg);
}

/* Меню показується, коли додано клас is-open */
.nb-lang-widget.is-open .nb-lang-dropdown {
	display: block;
	animation: fadeIn 0.1s ease-out;
}

/* --- КОНТЕЙНЕР --- */
.nb-lang-widget {
	position: relative; /* Це важливо, щоб список позиціонувався відносно кнопки */
	display: inline-block;
	z-index: 2000;
}

/* --- КНОПКА (Тригер) --- */
.nb-lang-current {
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 10px;
	color: #fff;
	font-weight: 700;
	user-select: none;
}

.nb-caret {
	border-top: 4px solid #fff;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	transition: transform 0.2s;
}

/* --- ВИПАДАЮЧИЙ СПИСОК (Головне виправлення) --- */
.nb-lang-dropdown {
	/* 1. Ховаємо за замовчуванням */
	display: none !important;

	/* 2. Позиціонування */
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 160px;
	background: #fff;
	border: 3px solid #000; /* Чорна рамка */
	box-shadow: 5px 5px 0 #000; /* Тінь */
	padding: 0;
	margin-top: 5px;
	list-style: none;
	z-index: 2001; /* Поверх усього */
}

/* --- СТАН "ВІДКРИТО" --- */
/* Коли JS додає клас .is-open, ми показуємо меню */
.nb-lang-widget.is-open .nb-lang-dropdown {
	display: block !important; /* Перебиваємо display: none */
}

.nb-lang-widget.is-open .nb-caret {
	transform: rotate(180deg);
}

/* --- ПУНКТИ МЕНЮ --- */
.nb-lang-dropdown li {
	border-bottom: 1px solid #eee;
}
.nb-lang-dropdown li:last-child { border: none; }

.nb-lang-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 15px;
	color: #000;
	text-decoration: none;
	font-size: 0.9rem;
	transition: background 0.2s;
}

.nb-lang-flag {
	width: 20px;
	height: auto;
	border: 1px solid #ddd;
}

.top-bar-block {
	display: flex;
	justify-content: space-between;
	gap: 2rem;
}

/* --- КНОПКА В ТОП-БАРІ (High Contrast) --- */
.nb-btn-top {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	/* Розміри */
	height: 32px; /* Компактна висота для топ-бару */
	padding: 0 16px;

	/* Типографіка */
	font-family: var(--font-heading); /* Unbounded */
	font-weight: 700;
	font-size: 0.75rem; /* 12px - акуратно */
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;

	/* КОЛЬОРИ: */
	/* Яскраво-блакитний фон */
	background-color: var(--color-accent);
	/* Чорний текст (для контрасту з блакитним) */
	color: #000 !important;

	/* БРУТАЛІЗМ НА ЧОРНОМУ: */
	/* Біла рамка, щоб відділити від фону */
	border: 2px solid #ffffff;

	/* Анімація */
	transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
	transform: translate(0, 0);
}

/* ЕФЕКТ НАВЕДЕННЯ */
.nb-btn-top:hover {
	transform: scale(0.95);
	border-bottom: 2px solid #ffffff;
}

/* ЕФЕКТ КЛІКУ */
.nb-btn-top:active {
	background-color: var(--color-accent);
	transform: translate(5px, 5px);
}

/* Адаптив: ховаємо на мобільних, якщо треба */
@media (max-width: 768px) {
	.nb-btn-top {
		display: none;
	}
}

/* --- FOOTER MAIN --- */
.nb-footer {
	background-color: var(--color-primary); /* #01496c */
	color: #ffffff;
	border-top: var(--border-main); /* Чорна лінія зверху */
	padding-top: var(--spacing-lg);
	font-family: var(--font-body);
}

/* --- GRID LAYOUT --- */
.nb-footer-grid {
	display: grid;
	grid-template-columns: 1fr 3fr; /* Ліва колонка вужча, права (посилання) ширша */
	gap: var(--spacing-lg);
	padding-bottom: var(--spacing-md);
}

/* --- INFO COLUMN (Left) --- */
.nb-footer-info {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	padding-right: var(--spacing-md);
	border-right: 2px solid rgba(255,255,255, 0.1); /* Тонкий розділювач */
}

.nb-footer-title {
	font-family: var(--font-heading);
	font-size: 1rem;
	color: var(--color-accent); /* Акцентний блакитний для заголовків */
	margin-bottom: var(--spacing-xs);
	text-transform: uppercase;
}

.nb-address-text {
	font-style: normal;
	opacity: 0.9;
	line-height: 1.6;
}

/* --- LINKS AREA (Right) --- */
.nb-section-title {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	margin-bottom: var(--spacing-md);
	border-bottom: 2px solid var(--color-accent); /* Підкреслення заголовка */
	display: inline-block;
	padding-bottom: 5px;
	color: #fff;
}

.nb-links-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacing-md);
}

.nb-footer-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.nb-footer-list li {
	margin-bottom: 8px;
	font-size: var(--text-md);
}

.nb-footer-list a,
.nb-footer-link {
	color: #ffffff;
	text-decoration: none;
	transition: all 0.2s ease;
	border-bottom: 1px solid transparent; /* Резерв для ховера */
	display: inline-block;
}

/* Ефект наведення на посилання у футері */
.nb-footer-list a:hover,
.nb-footer-link:hover {
	color: var(--color-primary);
	padding-left: 5px; /* Легкий зсув вправо */
}

/* Спеціальний стиль для email */
.nb-footer-link.is-email {
	font-weight: 700;
	border-bottom: 2px solid var(--color-accent);
}
.nb-footer-link.is-email:hover {
	background-color: var(--color-accent);
	color: var(--color-primary);
}

/* --- COPYRIGHT BAR --- */
.nb-copyright-bar {
	border-top: 2px solid rgba(255,255,255, 0.1);
	padding: var(--spacing-md) 0;
	text-align: center;
	font-size: 0.85rem;
	opacity: 0.6;
	margin-top: var(--spacing-md);
}

/* --- RESPONSIVE (Адаптивність) --- */
@media (max-width: 992px) {
	.nb-footer-grid {
		grid-template-columns: 1fr; /* Одна колонка на планшетах */
		gap: var(--spacing-md);
	}

	.nb-footer-info {
		border-right: none;
		border-bottom: 2px solid rgba(255,255,255, 0.1);
		padding-bottom: var(--spacing-md);
	}
}

@media (max-width: 600px) {
	.nb-links-grid {
		grid-template-columns: 1fr; /* Одна колонка посилань на телефонах */
	}
}

/* --- HERO SECTION --- */
.nb-hero {
	background-blend-mode: overlay;
	overflow: hidden;
}

.nb-hero-grid {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr; /* Текст ширший, картинка вужча */
	align-items: center;
	gap: var(--spacing-lg);
}

/* Text Content */
.nb-hero-label {
	display: inline-block;
	font-family: var(--font-heading);
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	background: var(--color-accent); /* Жовтий */
	color: #000;
	padding: 4px 8px;
	border: 2px solid var(--color-border);
	margin-bottom: var(--spacing-sm);
	box-shadow: 2px 2px 0 var(--color-border);
}

.nb-hero-title {
	font-family: var(--font-heading);
	font-size: clamp(2rem, 5vw, 3.5rem); /* Адаптивний шрифт */
	line-height: 1.1;
	color: var(--color-primary);
	margin-bottom: var(--spacing-sm);
	text-transform: uppercase;
}

.nb-hero-desc {
	font-size: 1.1rem;
	max-width: 600px;
	margin-bottom: var(--spacing-md);
	color: #444;
}

/* Buttons */
.nb-hero-actions {
	display: flex;
	gap: var(--spacing-sm);
	flex-wrap: wrap;
}

.nb-btn-hero {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--color-primary);
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 700;
	text-transform: uppercase;
	padding: 16px 32px;
	text-decoration: none;
	border: var(--border-main);
	box-shadow: var(--shadow-hard);
	transition: var(--transition-fast);
}

.nb-btn-hero:hover {
	background: var(--color-accent);
	color: #000;
	box-shadow: var(--shadow-hard-hover);
	transform: translate(2px, 2px);
	border-color: #000;
}

.nb-btn-outline {
	display: inline-flex;
	align-items: center;
	background: transparent;
	color: var(--color-text);
	font-family: var(--font-heading);
	font-weight: 700;
	text-transform: uppercase;
	padding: 16px 32px;
	text-decoration: none;
	border: var(--border-main);
	transition: var(--transition-fast);
	box-shadow: var(--shadow-hard);
}

.nb-btn-outline:hover {
	background: #fff;
	box-shadow: var(--shadow-hard);
	transform: translate(-2px, -2px);
}

/* Visual (Cover) */
.nb-hero-visual {
	position: relative;
	display: flex;
	justify-content: center;
}

.nb-cover-card {
	position: relative;
	z-index: 1;
	transition: transform 0.3s;
}

.nb-cover-card:hover {
	transform: scale(1.02) rotate(1deg);
}

.nb-cover-img {
	display: block;
	max-width: 100%;
	width: 320px; /* Фіксуємо ширину обкладинки */
	height: auto;
	border: var(--border-main);
	box-shadow: 12px 12px 0 var(--color-accent); /* Жовта тінь */
}

.nb-badge-new {
	position: absolute;
	top: -20px;
	right: -20px;
	background: var(--color-error); /* Червоний */
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 900;
	padding: 10px 15px;
	border: var(--border-main);
	transform: rotate(15deg);
	box-shadow: 4px 4px 0 #000;
}

/* --- COMMON SECTIONS --- */
.nb-section {
	padding: var(--spacing-lg) 0;
}
.nb-bg-white { background: var(--color-bg); }

.nb-section-header {
	margin-bottom: var(--spacing-md);
	text-align: left;
}

.nb-section-heading {
	font-size: 2.5rem;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.nb-divider {
	width: 100px;
	height: 6px;
	background: var(--color-accent);
	border: 2px solid #000;
}

/* --- TEXT CONTENT (Styling user content) --- */
.nb-text-content {
	font-size: 1.3rem;
	text-align: justify;
}
.nb-text-content p { margin-bottom: 1rem; }
.nb-text-content strong { color: var(--color-primary); }

/* --- INDEXING GRID (Partners) --- */
.nb-partners-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--spacing-md);
}

.nb-partner-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: var(--border-main);
	padding: 20px;
	text-decoration: none;
	transition: var(--transition-fast);
	height: 140px; /* Фіксована висота картки */
	position: relative;
}

.nb-partner-card:hover {
	box-shadow: var(--shadow-hard);
	transform: translate(-3px, -3px);
	border-color: var(--color-primary);
}

.nb-partner-img-wrapper {
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
}

.nb-partner-img-wrapper img {
	max-height: 100%;
	max-width: 100%;
	filter: grayscale(100%); /* Чорно-білі логотипи за замовчуванням */
	transition: 0.3s;
}

.nb-partner-card:hover img {
	filter: grayscale(0%); /* Колір при наведенні */
}

.nb-partner-name {
	font-family: var(--font-heading);
	font-size: 0.8rem;
	color: var(--color-text);
	text-align: center;
	font-weight: 700;
}

/* --- BACK TO TOP BUTTON --- */
.nb-back-top {
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 50px;
	height: 50px;
	background: var(--color-accent); /* Жовтий */
	border: var(--border-main);
	color: #000;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 900;
	box-shadow: 4px 4px 0 #000;

	/* Animation states */
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: all 0.3s ease;
}

.nb-back-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nb-back-top:hover {
	background: #fff;
	transform: translateY(-5px); /* Стрибає вгору */
	box-shadow: 6px 6px 0 var(--color-primary);
}

/* RESPONSIVE */
@media (max-width: 991px) {
	.nb-hero-grid {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.nb-hero-actions {
		justify-content: center;
	}

	.nb-hero-visual {
		margin-top: 30px;
		order: -1; /* Картинка зверху на мобільному? або 1 якщо знизу */
	}
	.nb-hero-visual { order: 1; } /* Хай буде знизу під текстом */

	.nb-cover-img {
		width: 250px; /* Менша картинка на моб */
	}
}

/* --- ARCHIVE WRAPPER --- */
.nb-archive-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

/* --- YEAR ACCORDION (Interactive) --- */
.nb-year-block {
	border: var(--border-main);
	background: #fff;
	/* Тінь блоку */
	box-shadow: var(--shadow-hard);
}

/* Кнопка року */
.nb-year-toggle {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--color-primary); /* Синій фон */
	color: #fff;
	border: none;
	border-bottom: var(--border-main); /* Розділювач між шапкою і контентом */
	padding: 15px 20px;
	cursor: pointer;
	transition: background 0.2s;
}

.nb-year-toggle:hover {
	background-color: #1a65c9; /* Трохи темніший синій */
}

.nb-year-text {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 900;
}

.nb-year-icon svg {
	transition: transform 0.3s ease;
}

/* Стан закритого року (прибираємо border-bottom, якщо закрито) */
.nb-year-block:not(.is-open) .nb-year-toggle {
	border-bottom: none;
}

/* --- CONTENT AREA (Grid) --- */
.nb-year-content {
	/* Анімація розкриття */
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s cubic-bezier(0, 1, 0, 1);
	background-color: var(--color-bg-alt); /* Світлий фон всередині */
}

/* Стан відкритого */
.nb-year-block.is-open .nb-year-content {
	max-height: 2000px; /* Достатньо велике число */
	transition: max-height 0.4s cubic-bezier(1, 0, 1, 0); /* Плавний ease-in-out */
}

.nb-year-block.is-open .nb-year-icon svg {
	transform: rotate(180deg);
}

.nb-issues-grid {
	display: grid;
	/* Адаптивна сітка: мінімум 220px на картку */
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--spacing-md);
	padding: var(--spacing-md);
}

/* --- ISSUE CARD --- */
.nb-issue-card {
	background: #fff;
	border: var(--border-main);
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease;
}

.nb-issue-card:hover {
	transform: translateY(-5px);
	box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
}

/* Cover Image */
.nb-issue-cover-wrapper {
	position: relative;
	border-bottom: var(--border-main);
	overflow: hidden;
	aspect-ratio: 3/4; /* Стандартна пропорція журналу */
	background: #eee;
}

.nb-issue-cover-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Overlay & Button */
.nb-issue-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(35, 125, 249, 0.8); /* Primary колір з прозорістю */
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s;
}

.nb-issue-cover-link:hover .nb-issue-overlay {
	opacity: 1;
}

.nb-read-btn {
	font-family: var(--font-heading);
	font-weight: 700;
	text-transform: uppercase;
	background: var(--color-accent); /* Жовтий */
	color: #000;
	padding: 10px 20px;
	border: 2px solid #000;
	box-shadow: 4px 4px 0 #000;
}

/* Card Body */
.nb-issue-body {
	padding: 15px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-grow: 1;
}

.nb-issue-title {
	font-family: var(--font-heading);
	font-size: 1rem;
	line-height: 1.3;
	margin: 0;
}
.nb-issue-title a {
	border-bottom: none; /* Прибираємо підкреслення за замовчуванням */
}
.nb-issue-title a:hover {
	background: none;
	color: var(--color-primary);
	text-decoration: underline;
	text-decoration-color: var(--color-accent);
	text-decoration-thickness: 3px;
}

/* Stats Badges */
.nb-issue-stats {
	margin-top: auto; /* Притискаємо до низу */
	display: flex;
	gap: 8px;
	font-size: 0.8rem;
	font-weight: 600;
}

.nb-stat-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	background: #f0f0f0;
	border: 1px solid #000;
	border-radius: 4px; /* Трохи м'якше */
}

.nb-stat-badge.is-yellow {
	background: var(--color-accent); /* Жовтий фон для авторів */
}

.nb-stat-val {
	font-weight: 800;
}

/* --- ISSUE HEADER --- */
.nb-issue-header {
	background-color: #fff;
	border: var(--border-main);
	padding: var(--spacing-md);
	margin-bottom: var(--spacing-lg);
	box-shadow: var(--shadow-card); /* Синя тінь */
}

.nb-issue-grid {
	display: grid;
	grid-template-columns: 350px 1fr; /* Фіксована ширина для PDF */
	gap: var(--spacing-md);
}

/* Visual Side (PDF) */
.nb-issue-visual {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.nb-pdf-wrapper {
	border: var(--border-main);
	background: #000; /* Темний фон під фреймом */
	height: 400px;
	display: flex;
	flex-direction: column;
}

.nb-window-bar {
	height: 30px;
	background: var(--color-primary);
	border-bottom: var(--border-main);
	display: flex;
	align-items: center;
	padding: 0 10px;
	gap: 6px;
}

.dot {
	width: 10px; height: 10px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #000;
}
.bar-title {
	margin-left: auto;
	font-size: 0.7rem;
	color: #fff;
	font-family: var(--font-heading);
}

.nb-iframe {
	flex: 1;
	width: 100%;
	border: none;
	background: #fff;
}

.nb-no-pdf {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-family: var(--font-heading);
}

/* Download Button */
.nb-btn-download {
	display: flex;
	text-decoration: none;
	border: var(--border-main);
	box-shadow: var(--shadow-hard);
	transition: transform 0.2s;
}

.nb-btn-download .icon-box {
	background: var(--color-primary);
	color: #fff;
	width: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	border-right: var(--border-main);
}

.nb-btn-download .text-box {
	background: var(--color-accent); /* Жовтий */
	color: #000;
	flex: 1;
	padding: 15px;
	font-family: var(--font-heading);
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
}

.nb-btn-download:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 #000;
}

/* Info Side */
.nb-issue-info {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.nb-meta-top {
	display: flex;
	align-items: center;
	gap: 15px;
	font-size: 0.9rem;
	color: #666;
}

.nb-badge.is-blue {
	background: var(--color-primary);
	color: #fff;
	padding: 4px 8px;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.8rem;
}

.nb-issue-title {
	font-size: 2rem;
	line-height: 1.2;
	margin: 0;
	color: #000;
}

.nb-doi-box {
	font-family: var(--font-body);
	background: var(--color-bg-alt);
	padding: 5px 10px;
	border-left: 4px solid var(--color-accent);
}

/* Stats */
.nb-stats-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-top: 10px;
	border-top: 2px solid #eee;
	padding-top: 15px;
}

.nb-stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.nb-stat-item .val {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-primary);
}

.nb-stat-item .lbl {
	font-size: 0.8rem;
	text-transform: uppercase;
	color: #777;
}

/* Share */
.nb-share-block {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 15px;
}

.nb-share-icons {
	display: flex;
	gap: 8px;
}

.nb-icon-btn {
	width: 36px; height: 36px;
	display: flex; align-items: center; justify-content: center;
	border: 2px solid #000;
	background: #fff;
	color: #000;
	text-decoration: none;
	transition: 0.2s;
	cursor: pointer;
}

.nb-icon-btn:hover {
	background: var(--color-accent);
	transform: translateY(-2px);
	box-shadow: 2px 2px 0 #000;
}

/* --- ARTICLES LIST --- */
.nb-articles-list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.nb-article-card {
	position: relative;
	border: var(--border-main);
	background: #fff;
	padding: 0;
	display: flex;
	/* Анімація появи */
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.2s;
}

.nb-article-card.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.nb-article-card:hover {
	box-shadow: var(--shadow-hard);
}

.nb-oa-badge {
	position: absolute;
	top: 0; right: 0;
	background: var(--color-success); /* Зелений */
	color: #fff;
	padding: 4px 8px;
	font-weight: 700;
	font-size: 0.8rem;
	border-left: 2px solid #000;
	border-bottom: 2px solid #000;
	z-index: 2;
}

.nb-article-content {
	flex: 1;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.nb-article-title {
	font-size: 1.25rem;
	margin: 0;
	line-height: 1.4;
}

.nb-article-title a {
	color: #000;
	border-bottom: none;
}
.nb-article-title a:hover {
	color: var(--color-primary);
	text-decoration: underline;
}

.nb-article-authors {
	font-style: italic;
	color: #555;
}

.nb-author-link {
	color: #555;
	border-bottom: 1px dotted #999;
}

.nb-author-link:hover {
	border-bottom-style: solid;
}

.nb-tags-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 0.85rem;
}

.nb-tag {
	background: var(--color-bg-alt);
	padding: 2px 8px;
	border: 1px solid #ddd;
}

.nb-article-meta-row {
	margin-top: 5px;
	font-size: 0.85rem;
	display: flex;
	gap: 15px;
	color: #777;
	align-items: center;
}

.nb-doi-link {
	color: var(--color-primary);
	font-weight: 700;
}

/* Citation Toggle */
.nb-citation-box {
	margin-top: 10px;
	border-top: 1px dashed #ccc;
	padding-top: 10px;
}

.nb-citation-toggle {
	background: none;
	border: none;
	color: var(--color-primary);
	font-weight: 700;
	cursor: pointer;
	padding: 0;
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	gap: 5px;
}

.nb-citation-content {
	display: none; /* Сховано */
	margin-top: 10px;
	background: #f9f9f9;
	padding: 10px;
	border: 1px solid #ddd;
	font-size: 0.9rem;
}

.nb-citation-content.is-open {
	display: block;
}

/* Read Action Right Side */
.nb-article-action {
	width: 150px;
	border-left: var(--border-main);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-alt);
}

.nb-btn-read {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	color: #000;
	font-weight: 700;
	text-transform: uppercase;
	border-bottom: none;
	font-size: 0.9rem;
}
.nb-btn-read i { font-size: 1.2rem; }
.nb-btn-read:hover { color: var(--color-primary); }


/* RESPONSIVE */
@media (max-width: 991px) {
	.nb-issue-grid { grid-template-columns: 1fr; }
	.nb-article-card { flex-direction: column; }
	.nb-article-action {
		width: 100%;
		border-left: none;
		border-top: var(--border-main);
		padding: 15px;
		flex-direction: row; /* На мобільному кнопка горизонтальна */
	}
	.nb-btn-read { flex-direction: row; gap: 10px; }
}

/* --- CITATION WIDGET STYLES --- */
.nb-citations-wrapper {
	display: flex;
	flex-direction: column;
	gap: 15px; /* Відступ між картками */
}

.nb-cite-card {
	border: 2px solid #000;
	background: #fff;
	transition: transform 0.2s, box-shadow 0.2s;
	cursor: pointer; /* Вказує, що можна клікнути */
}

/* Ефект наведення на всю картку */
.nb-cite-card:hover {
	box-shadow: 4px 4px 0 var(--color-accent); /* Жовта тінь */
	transform: translate(-1px, -1px);
	border-color: var(--color-primary);
}

/* Шапка картки (Синя) */
.nb-cite-header {
	background-color: var(--color-primary);
	color: #fff;
	padding: 8px 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 2px solid #000;
}

.nb-cite-label {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Кнопка копіювання всередині шапки */
.nb-copy-btn {
	background: none;
	border: none;
	color: #fff;
	font-family: var(--font-heading);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 4px 8px;
	border: 1px solid transparent;
	border-radius: 4px;
	transition: 0.2s;
}

.nb-copy-btn:hover {
	background: rgba(255,255,255, 0.2);
	border-color: #fff;
}

/* Контент цитати */
.nb-cite-content {
	padding: 15px;
	font-size: 0.9rem;
	line-height: 1.5;
	color: #333;
	word-break: break-word; /* Щоб довгі DOI не ламали верстку */
}

/* Посилання DOI всередині тексту */
.nb-cite-doi {
	color: var(--color-primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

/* Стан "Скопійовано" (успіх) */
.nb-cite-card.is-copied {
	border-color: var(--color-success); /* Зелена рамка */
}

.nb-cite-card.is-copied .nb-cite-header {
	background-color: var(--color-success); /* Зелена шапка */
}

/* --- ARTICLE LAYOUT --- */
.nb-article-header {
	margin-bottom: var(--spacing-md);
	padding-bottom: var(--spacing-md);
	border-bottom: var(--border-main);
}

.nb-meta-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 15px;
	font-size: 0.9rem;
	color: #555;
	flex-wrap: wrap;
}

.nb-journal-link {
	font-weight: 700;
	color: var(--color-primary);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}
.nb-journal-link:hover { border-bottom-color: var(--color-accent); }

.nb-article-heading {
	font-size: clamp(1.8rem, 4vw, 3rem);
	line-height: 1.2;
	margin-bottom: 20px;
	color: #000;
}

/* Authors */
.nb-authors-block {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
}

.nb-author-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 2px solid #000;
	padding: 6px 12px;
	text-decoration: none;
	color: #000;
	font-weight: 500;
	border-radius: 99px;
	transition: 0.2s;
}

.nb-author-chip .icon {
	background: var(--color-accent);
	width: 24px; height: 24px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 0.8rem;
	border: 1px solid #000;
}

.nb-author-chip:hover {
	background: #000;
	color: #fff;
	transform: translateY(-2px);
}

/* DOI */
.nb-doi-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--color-bg-alt);
	padding: 5px 10px;
	border: 1px solid #ddd;
	font-size: 0.9rem;
}
.nb-doi-label { font-weight: 700; }
.nb-doi-link { color: var(--color-primary); text-decoration: underline; }
.nb-icon-btn-sm {
	background: none; border: none; cursor: pointer;
	color: #777; transition: 0.2s;
}
.nb-icon-btn-sm:hover { color: #000; transform: scale(1.1); }

/* --- MAIN GRID --- */
.nb-article-grid {
	display: grid;
	grid-template-columns: 300px 1fr; /* Fixed sidebar, fluid content */
	gap: var(--spacing-lg);
	align-items: start; /* Щоб сайдбар не розтягувався */
}

/* Sidebar & Sticky */
.nb-article-sidebar {
	position: relative;
}

.nb-sticky-wrapper {
	position: sticky;
	top: 100px; /* Відступ від верху екрану при скролі */
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.nb-file-card {
	border: var(--border-main);
	background: #fff;
	box-shadow: var(--shadow-hard);
}

.nb-window-header {
	background: #000;
	padding: 5px 10px;
	display: flex;
	align-items: center;
	gap: 5px;
	color: #fff;
	font-size: 0.7rem;
	font-family: var(--font-heading);
}
.nb-window-header .dot { width: 8px; height: 8px; background: #fff; border-radius: 50%; }

.nb-file-preview {
	height: 200px;
	background: #f0f0f0;
	border-bottom: var(--border-main);
	display: flex;
	align-items: center;
	justify-content: center;
}
.nb-mini-iframe { width: 100%; height: 100%; border: none; overflow: hidden; pointer-events: none; }

.nb-file-actions {
	padding: 15px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.nb-btn-full, .nb-btn-outline-full {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 0.9rem;
	transition: 0.2s;
}

.nb-btn-full {
	background: var(--color-primary);
	color: #fff;
	border: 2px solid #000;
	box-shadow: 2px 2px 0 #000;
}
.nb-btn-full:hover { background: var(--color-accent); color: #000; }

.nb-btn-outline-full {
	background: #fff;
	color: #000;
	border: 2px solid #000;
}
.nb-btn-outline-full:hover { background: #000; color: #fff; }

/* Stats & Share */
.nb-stats-row {
	display: flex; gap: 10px;
	background: #fff; border: 2px solid #000; padding: 10px;
	justify-content: center;
}
.nb-stat-box { display: flex; flex-direction: column; align-items: center; }
.nb-stat-box .val { font-weight: 900; font-size: 1.2rem; }
.nb-stat-box .lbl { font-size: 0.75rem; text-transform: uppercase; }

.nb-share-vertical {
	border: 2px solid #000; background: #fff; padding: 15px;
}
.share-title { display: block; font-weight: 700; margin-bottom: 10px; text-align: center; }
.share-grid { display: flex; justify-content: space-between; gap: 5px; }
.nb-soc-btn {
	flex: 1; height: 36px;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid #000; color: #000;
	transition: 0.2s;
}
.nb-soc-btn:hover { background: var(--color-accent); }

/* --- RIGHT CONTENT --- */

/* Timeline */
.nb-timeline-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 40px;
	position: relative;
}
/* Лінія, що з'єднує точки */
.nb-timeline-wrapper::before {
	content: '';
	position: absolute;
	top: 9px; left: 20px; right: 20px;
	height: 2px; background: #ddd;
	z-index: 0;
}

.nb-timeline-item {
	position: relative; z-index: 1;
	display: flex; flex-direction: column; align-items: center;
	background: var(--color-bg);
	padding: 0 10px;
}

.nb-timeline-item .dot {
	width: 20px; height: 20px;
	background: #fff; border: 2px solid #ccc;
	border-radius: 50%;
	margin-bottom: 5px;
}
.nb-timeline-item.is-done .dot {
	background: var(--color-success); border-color: #000;
}

.nb-timeline-item .date { font-weight: 700; font-size: 0.9rem; }
.nb-timeline-item .status { font-size: 0.8rem; color: #666; text-transform: uppercase; }

/* Content Blocks */
.nb-section-block { margin-bottom: 40px; }
.nb-block-title {
	font-size: 1.5rem; border-bottom: 4px solid var(--color-accent);
	display: inline-block; margin-bottom: 20px; padding-right: 10px;
}
.nb-abstract-text { font-size: 1.1rem; line-height: 1.7; text-align: justify; }

.nb-tags-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.nb-tag-pill {
	background: #f0f0f0; padding: 5px 15px;
	border-radius: 4px; border: 1px solid #ddd; font-size: 0.9rem;
}

/* --- TABS --- */
.nb-tabs-wrapper {
	border: var(--border-main);
	background: #fff;
	box-shadow: var(--shadow-hard);
}

.nb-tabs-header {
	display: flex;
	border-bottom: var(--border-main);
	background: #f0f0f0;
}

.nb-tab-btn {
	flex: 1;
	padding: 15px;
	border: none;
	background: none;
	font-family: var(--font-heading);
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
	border-right: 2px solid #000;
	transition: 0.2s;
}
.nb-tab-btn:last-child { border-right: none; }

.nb-tab-btn.active {
	background: var(--color-accent);
	color: #000;
}
.nb-tab-btn:hover:not(.active) { background: #e0e0e0; }

.nb-tabs-content { padding: 30px; }
.nb-tab-pane { display: none; }
.nb-tab-pane.active { display: block; animation: fadeIn 0.3s; }

/* References List Style */
.nb-references-list p {
	margin-bottom: 15px;
	padding-left: 20px;
	text-indent: -20px; /* Висячий відступ */
	font-size: 0.95rem;
	line-height: 1.5;
}

@media (max-width: 991px) {
	.nb-article-grid { grid-template-columns: 1fr; }
	.nb-article-sidebar { order: -1; margin-bottom: 30px; }
	.nb-sticky-wrapper { position: static; }
	.nb-file-preview { display: none; } /* Ховаємо прев'ю на мобільному, лишаємо кнопки */
	.nb-timeline-wrapper { flex-direction: column; align-items: flex-start; gap: 20px; }
	.nb-timeline-wrapper::before {
		width: 2px; height: 100%; top: 0; left: 9px; right: auto;
	}
	.nb-timeline-item { flex-direction: row; gap: 15px; }
}

/* --- STATIC PAGES --- */
.nb-static-header {
	margin-bottom: var(--spacing-md);
}

.nb-static-title {
	font-size: 2.5rem;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: 15px;
}

/* Контейнер тексту (Аркуш) */
.nb-static-content {
	background: #fff;
	border: var(--border-main);
	box-shadow: var(--shadow-card); /* Синя тінь */
	padding: 40px; /* Великі внутрішні відступи */
}

/* --- ТИПОГРАФІКА ВСЕРЕДИНІ КОНТЕНТУ --- */
/* Це дуже важливо для тексту з WYSIWYG редакторів */

.nb-text-body {
	font-family: var(--font-body); /* IBM Plex Sans */
	font-size: 1.1rem;
	line-height: 1.8;
	color: #333;
}

.nb-text-body p {
	margin-bottom: 1.5rem;
}

.nb-text-body h3,
.nb-text-body h4,
.nb-text-body strong {
	font-family: var(--font-heading);
	color: #000;
	font-weight: 700;
	margin-top: 2rem;
	margin-bottom: 1rem;
}

.nb-text-body h3 {
	font-size: 1.5rem;
	border-left: 5px solid var(--color-accent); /* Жовта смужка зліва */
	padding-left: 15px;
}

.nb-text-body ul,
.nb-text-body ol {
	margin-bottom: 1.5rem;
	padding-left: 20px;
}

.nb-text-body li {
	margin-bottom: 10px;
	position: relative;
	padding-left: 10px;
}

/* Стилізація булетів списку */
.nb-text-body ul { list-style: none; }
.nb-text-body ul li::before {
	content: "■"; /* Квадратний булет */
	color: var(--color-primary);
	font-size: 0.8em;
	position: absolute;
	left: -15px;
	top: 2px;
}

.nb-text-body a {
	text-decoration: underline;
	text-decoration-color: var(--color-accent);
	color: var(--color-primary);
}
.nb-text-body a:hover {
	background: var(--color-accent);
	color: #000;
}

/* Адаптив */
@media (max-width: 768px) {
	.nb-static-content { padding: 20px; }
	.nb-static-title { font-size: 1.8rem; }
}

/* --- LAYOUT GRID --- */
.nb-contact-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr; /* Ліва колонка ширша */
	gap: var(--spacing-lg);
	margin-top: var(--spacing-md);
}

/* --- LEFT COLUMN --- */
.nb-lead-text {
	font-size: 1.1rem;
	line-height: 1.7;
	margin-bottom: 40px;
	color: #444;
	max-width: 800px;
}

/* Form Card Style */
.nb-form-card {
	background: #fff;
	border: var(--border-main);
	box-shadow: var(--shadow-card); /* Синя тінь */
	padding: 30px;
}

.nb-card-title {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	margin-bottom: 20px;
	border-bottom: 2px solid #eee;
	padding-bottom: 10px;
}

/* Styling the inputs inside the rendered form (Global override for this block) */
.nb-form-inner form .form-group {
	margin-bottom: 20px;
}

.nb-form-inner label {
	font-family: var(--font-heading);
	font-weight: 700;
	margin-bottom: 8px;
	display: block;
}

.nb-form-inner input[type="text"],
.nb-form-inner input[type="email"],
.nb-form-inner textarea {
	width: 100%;
	padding: 12px;
	border: 2px solid #000;
	background: var(--color-bg-alt);
	font-family: var(--font-body);
	font-size: 1rem;
	transition: 0.2s;
	border-radius: 0; /* Square edges */
}

.nb-form-inner input:focus,
.nb-form-inner textarea:focus {
	outline: none;
	background: #fff;
	border-color: var(--color-primary);
	box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
}

.nb-form-inner button[type="submit"] {
	background: var(--color-accent);
	color: #000;
	border: 2px solid #000;
	padding: 12px 30px;
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 4px 4px 0 #000;
	transition: 0.2s;
}

.nb-form-inner button[type="submit"]:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 #000;
	background: var(--color-primary);
}

/* --- RIGHT COLUMN (SIDEBAR) --- */
.nb-section-heading.is-small {
	font-size: 1.8rem;
}

.nb-info-stack {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Info Cards */
.nb-info-card {
	display: flex;
	gap: 15px;
	background: #fff;
	border: var(--border-main);
	padding: 20px;
	transition: transform 0.2s;
}

.nb-info-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-hard);
}

/* Icons */
.nb-info-icon {
	width: 50px;
	height: 50px;
	flex-shrink: 0; /* Щоб не стискалась */
	background: var(--color-primary); /* Синій */
	color: #fff;
	border: 2px solid #000;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	box-shadow: 2px 2px 0 #000;
}

.nb-info-icon.is-yellow {
	background: var(--color-accent);
	color: #000;
}

.nb-info-icon.is-dark {
	background: #000;
	color: #fff;
}

/* Content */
.nb-info-content {
	flex: 1;
}

.nb-info-label {
	font-family: var(--font-heading);
	font-size: 1rem;
	text-transform: uppercase;
	margin-bottom: 10px;
	color: var(--color-primary);
}

.nb-address-lines p {
	margin-bottom: 10px;
	line-height: 1.4;
	font-style: normal;
}

.nb-sep-dashed {
	border-bottom: 2px dashed #ccc;
	margin: 10px 0;
}

.nb-contact-link {
	font-size: 1.1rem;
	font-weight: 700;
	color: #000;
	text-decoration: underline;
	text-decoration-color: var(--color-accent);
}
.nb-contact-link:hover {
	background: var(--color-accent);
}

.nb-editors-list {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.nb-editor-item {
	font-weight: 600;
	padding-left: 10px;
	border-left: 3px solid var(--color-accent);
}

/* --- RESPONSIVE --- */
@media (max-width: 991px) {
	.nb-contact-grid {
		grid-template-columns: 1fr;
	}

	.nb-contact-sidebar {
		margin-top: 40px;
		order: -1; /* На мобільному контакти можна показати зверху, або прибрати це, щоб були знизу */
	}
}

/* --- UNIVERSAL TABLE STYLES (Neobrutalism) --- */

/* 1. Контейнер для скролу (створюється через JS) */
.nb-table-wrap {
	display: block;
	width: 100%;
	overflow-x: auto; /* Горизонтальний скрол */
	-webkit-overflow-scrolling: touch;
	margin-bottom: 20px;
	border: 3px solid #000; /* Зовнішня рамка контейнера */
	background: #fff;
	box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
}

/* 2. Сама таблиця (Скидаємо все зайве) */
.nb-text-body table {
	width: 100% !important;
	min-width: 600px; /* Мінімальна ширина, щоб не стискалась у кашу */
	max-width: 100% !important;
	border-collapse: collapse !important;
	border: none !important; /* Рамки керуються через td/th */
	margin: 0 !important;
	background-color: #fff !important;
	font-size: 0.95rem !important;
	line-height: 1.4 !important;
}

/* 3. Шапка таблиці (thead і th) */
.nb-text-body thead,
.nb-text-body thead tr {
	background-color: var(--color-primary) !important; /* Синій фон */
	color: #fff !important;
}

.nb-text-body th {
	background-color: var(--color-primary) !important;
	color: #fff !important;
	font-family: var(--font-heading) !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	padding: 12px 15px !important;
	border: 1px solid #000 !important; /* Чорна сітка */
	text-align: left !important;
	vertical-align: middle !important;
}

/* 4. Комірки (td) */
.nb-text-body td {
	padding: 10px 15px !important;
	border: 1px solid #000 !important; /* Чорна сітка */
	color: #000 !important;
	vertical-align: top !important;
	background: transparent; /* Щоб було видно колір рядка */
}

/* 5. Зебра (Смугасті рядки) */
.nb-text-body tr:nth-child(even) {
	background-color: #f2f2f2 !important; /* Світло-сірий */
}
.nb-text-body tr:nth-child(odd) {
	background-color: #ffffff !important;
}

/* 6. Ховер ефект (Жовтий) */
.nb-text-body tr:hover td {
	background-color: var(--color-accent) !important;
	color: #000 !important;
	transition: background-color 0.1s;
}

/* 7. Скидання вбудованих paragraph всередині комірок */
.nb-text-body td p {
	margin: 0 !important;
	padding: 0 !important;
}

.nb-table-responsive {
	width: 100%;
	overflow-x: auto; /* Горизонтальний скрол */
	margin-bottom: 2rem;
	border: 3px solid #000; /* Рамка навколо скрол-зони */
	box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
}

/* Якщо використовуємо обгортку, прибираємо зовнішню рамку з самої таблиці, щоб не дублювати */
.nb-table-responsive table {
	margin: 0;
	border: none;
	box-shadow: none;
}

/* --- ERROR PAGE LAYOUT --- */
.nb-error-page {
	background-color: var(--color-bg);
	/*min-height: 80vh; !* Щоб футер не прилипав, якщо сторінка коротка *!*/
	display: flex;
	align-items: center;
	justify-content: center;
}

.nb-error-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-lg);
	align-items: center;
}

/* --- LEFT SIDE: Content --- */
.nb-error-badge {
	display: inline-block;
	background: var(--color-error); /* Червоний */
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	padding: 5px 10px;
	border: 2px solid #000;
	margin-bottom: 20px;
	font-size: 0.8rem;
	box-shadow: 4px 4px 0 #000;
}

/* Big 404 Typography */
.nb-big-404 {
	font-family: var(--font-heading);
	font-size: clamp(6rem, 15vw, 10rem); /* Адаптивний гігантський розмір */
	line-height: 0.8;
	color: var(--color-primary);
	margin: 0;
	position: relative;
	/* Жорстка жовта тінь */
	text-shadow: 8px 8px 0 var(--color-accent), 10px 10px 0 #000;
}

.nb-error-title {
	font-size: 2rem;
	margin-top: 20px;
	margin-bottom: 15px;
	color: #000;
}

.nb-error-msg {
	font-size: 1.1rem;
	color: #555;
	margin-bottom: 40px;
	max-width: 500px;
}

.nb-error-actions {
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
}

/* Кнопки ви вже маєте (з попередніх кроків),
   але тут nb-btn-outline можна додатково стилізувати */
.nb-btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border: 2px solid #000;
	background: transparent;
	color: #000;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	transition: 0.2s;
}
.nb-btn-outline:hover {
	background: #000;
	color: #fff;
	box-shadow: 4px 4px 0 var(--color-accent);
}

/* --- RIGHT SIDE: Terminal Visual --- */
.nb-terminal-card {
	border: 3px solid #000;
	background: #1e1e1e; /* Темний фон терміналу */
	box-shadow: 12px 12px 0 var(--color-accent); /* Жовта тінь картки */
	border-radius: 6px;
	overflow: hidden;
	max-width: 500px;
	margin: 0 auto;
}

.nb-terminal-header {
	background: #ddd;
	border-bottom: 3px solid #000;
	padding: 10px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.nb-terminal-header .dot {
	width: 12px; height: 12px;
	border-radius: 50%;
	border: 1px solid #000;
}
.dot.red { background: #ff5f56; }
.dot.yellow { background: #ffbd2e; }
.dot.green { background: #27c93f; }

.terminal-title {
	margin-left: auto;
	margin-right: auto;
	font-family: monospace;
	font-weight: 700;
	color: #000;
	font-size: 0.8rem;
}

.nb-terminal-body {
	padding: 20px;
	font-family: 'Courier New', Courier, monospace;
	font-size: 0.95rem;
	line-height: 1.6;
	color: #00ff00; /* Хакерський зелений */
}

.code-line { margin: 5px 0; }
.code-line .cmd { color: #ff00ff; /* Фіолетовий промпт */ font-weight: bold; }
.code-line.error { color: #ff4d4d; }
.code-line.warning { color: #ffe600; }

/* Анімація курсора */
.cursor {
	display: inline-block;
	width: 8px;
	height: 16px;
	background: #00ff00;
	animation: blink 1s infinite;
	vertical-align: text-bottom;
}

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

/* --- RESPONSIVE --- */
@media (max-width: 991px) {
	.nb-error-grid {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.nb-error-actions {
		justify-content: center;
	}

	.nb-terminal-card {
		margin-top: 30px;
		box-shadow: 6px 6px 0 var(--color-accent);
	}

	.nb-big-404 { font-size: 6rem; }
}

/* --- PRIMARY BUTTON STYLE --- */
.nb-btn-primary {
	/* Розміщення контенту */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px; /* Відступ між іконкою та текстом */

	/* Розміри */
	padding: 14px 30px;
	min-width: 160px; /* Щоб кнопка не була надто вузькою */

	/* Типографіка */
	font-family: var(--font-heading); /* Unbounded */
	font-weight: 700;
	font-size: 0.9rem;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;

	/* КОЛЬОРИ (Нормальний стан) */
	background-color: var(--color-primary); /* Синій #237df9 */
	color: #ffffff; /* Білий текст */

	/* БРУТАЛІЗМ (Рамки та Тіні) */
	border: 2px solid #000000;
	box-shadow: 4px 4px 0 #000000; /* Чітка чорна тінь */
	border-radius: 0; /* Гострі кути */

	/* Анімація */
	transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
	cursor: pointer;
	position: relative;
}

/* --- HOVER (Наведення) --- */
.nb-btn-primary:hover {
	background-color: var(--color-accent); /* Стає жовтою #e6b64b */
	color: #000000; /* Текст стає чорним для контрасту */

	/* Ефект "підйому": тінь росте, кнопка рухається вгору-вліво */
	box-shadow: 6px 6px 0 #000000;
	transform: translate(-2px, -2px);
}

/* --- ACTIVE (Натискання) --- */
.nb-btn-primary:active {
	/* Ефект "втискання": тінь зникає, кнопка стає на її місце */
	box-shadow: 0 0 0 #000000;
	transform: translate(4px, 4px);
}

/* --- ICON STYLE --- */
.nb-btn-primary i {
	font-size: 1.1em; /* Іконка трохи більша за текст */
}

/* --- SUBMISSION SECTION LAYOUT --- */
.nb-submission-section {
	max-width: 800px;
	margin: 0 auto;
	padding-bottom: var(--spacing-lg);
}

.nb-submission-header {
	text-align: center;
	margin-bottom: 40px;
}

.nb-section-desc {
	font-size: 1.1rem;
	color: #555;
	max-width: 600px;
	margin: 10px auto 0;
}

/* --- SUBMISSION CARD (Folder Style) --- */
.nb-submission-card {
	position: relative;
	margin: 3rem 0;
}

/* Вкладка папки зверху */
.nb-card-tab {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--color-primary); /* Синій */
	color: #fff;
	padding: 10px 25px;
	border: 3px solid #000;
	border-bottom: none; /* З'єднується з тілом */
	font-family: var(--font-heading);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.9rem;
	margin-left: 20px; /* Зсув вкладки */
	position: relative;
	z-index: 2;
}

/* Тіло форми */
.nb-card-body {
	background: #fff;
	border: 3px solid #000;
	padding: 40px;
	position: relative;
	z-index: 1;
}

/* --- STYLING INNER FORM ELEMENTS --- */
/* Ці стилі подіють на інпути, які генерує ваш render */

.nb-form-context .form-group {
	margin-bottom: 15px;
}

.nb-form-context label {
	display: block;
	font-family: var(--font-heading);
	font-weight: 700;
	margin-bottom: 8px;
	color: #000;
}

.nb-form-context input[type="text"],
.nb-form-context input[type="email"],
.nb-form-context input[type="password"],
.nb-form-context textarea,
.nb-form-context select {
	width: 100%;
	padding: 12px 15px;
	border: 2px solid #000;
	background-color: var(--color-bg-alt); /* Світлий фон */
	font-family: var(--font-body);
	font-size: 1rem;
	border-radius: 0; /* Ніяких заокруглень */
	transition: 0.2s;
}

/* Фокус на полях */
.nb-form-context input:focus,
.nb-form-context textarea:focus,
.nb-form-context select:focus {
	outline: none;
	background-color: #fff;
	border-color: var(--color-primary);
	box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
}

/* Стилізація File Input (Завжди складна тема, робимо брутально) */
.nb-form-context input[type="file"] {
	border: 2px dashed #000;
	padding: 20px;
	background: #f9f9f9;
	width: 100%;
	cursor: pointer;
}

/* Кнопка відправки (Submit) */
.nb-form-context button[type="submit"] {
	display: inline-block;
	width: 100%;
	background-color: var(--color-success); /* Зелений для дії */
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 900;
	text-transform: uppercase;
	border: 3px solid #000;
	cursor: pointer;
	box-shadow: 4px 4px 0 #000;
	transition: 0.2s;
	font-size: 1.5rem;
}

.nb-form-context button[type="submit"]:hover {
	background-color: #fff;
	color: var(--color-success) !important;
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 #000;
}

/* Help Blocks (Помилки валідації Yii) */
.nb-form-context .help-block {
	color: var(--color-error);
	font-size: 0.85rem;
	font-weight: 500;
}

.nb-form-context .has-error input {
	border-color: var(--color-error);
	background-color: #fff0f0;
}

/* Адаптив */
@media (max-width: 768px) {
	.nb-card-body {
		padding: 20px;
	}
	.nb-card-tab {
		margin-left: 0;
		width: 100%;
		text-align: center;
		justify-content: center;
		border-bottom: 3px solid #000;
	}
	.nb-submission-card {
		margin-top: 0;
	}
}

.nb-card-body { position: relative; }

.nb-form-loader {
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	background: rgba(255,255,255, 0.9);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 10;
}

.nb-spinner {
	width: 50px; height: 50px;
	border: 5px solid #000;
	border-top-color: var(--color-accent);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

.nb-loading-text {
	margin-top: 15px;
	font-family: var(--font-heading);
	font-weight: 700;
	text-transform: uppercase;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

/* --- FORM GRID LAYOUT --- */
.nb-fields-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 3 колонки */
	gap: 10px;
}

/* Стиль лейблів (тепер вони видимі) */
.form-group label {
	display: block;
	font-family: var(--font-heading);
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 8px;
	color: #000;
}

/* Стандартні інпути */
.nb-input {
	width: 100%;
	height: 55px; /* Фіксована висота для вирівнювання з віджетами */
	padding: 10px 15px;
	border: 2px solid #000;
	background-color: var(--color-bg-alt);
	font-family: var(--font-body);
	font-size: 1rem;
	border-radius: 0;
	transition: 0.2s;
}

.nb-input:focus {
	outline: none;
	background-color: #fff;
	border-color: var(--color-primary);
	box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
}

/* --- SELECT2 OVERRIDES (Бруталізація) --- */
/* Перебиваємо стандартні стилі Select2 */
.select2-container .select2-selection--single {
	height: 46px !important;
	border: 2px solid #000 !important;
	border-radius: 0 !important;
	background-color: var(--color-bg-alt) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 42px !important;
	padding-left: 15px !important;
	font-family: var(--font-body);
	color: #000 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 44px !important;
	width: 30px !important;
}

/* Відкритий список Select2 */
.select2-dropdown {
	border: 2px solid #000 !important;
	border-radius: 0 !important;
	box-shadow: 4px 4px 0 #000 !important;
}

.select2-results__option--highlighted {
	background-color: var(--color-primary) !important;
	color: #fff !important;
}

/* --- PHONE INPUT OVERRIDES --- */
.iti { width: 100%; }
.iti__flag-container { border-right: 2px solid #000; }
.iti input {
	width: 100%;
	height: 46px;
	border: 2px solid #000 !important;
	background-color: var(--color-bg-alt) !important;
	border-radius: 0 !important;
	padding-left: 50px !important; /* Місце під прапор */
}

/* --- FILE INPUT OVERRIDES (Kartik) --- */
.nb-file-section {
	margin-bottom: 30px;
}

.file-caption-name {
	height: 40px;
	line-height: 38px;
	border: none;
	background: transparent;
	font-family: monospace;
}

/* Кнопки File Input */
.nb-btn-browse, .nb-btn-remove {
	border: 2px solid #000 !important;
	border-radius: 0 !important;
	padding: 8px 16px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	box-shadow: 2px 2px 0 #000 !important;
	margin-left: 5px;
}

.nb-btn-browse {
	background-color: var(--color-primary) !important;
	color: #fff !important;
}

.nb-btn-remove {
	background-color: var(--color-error) !important;
	color: #fff !important;
}

/* --- SUBMIT BUTTON --- */
.nb-form-actions {
	margin-top: 20px;
}

.nb-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 18px;
	background-color: var(--color-success); /* Зелений */
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: 1.1rem;
	text-transform: uppercase;
	border: 3px solid #000;
	cursor: pointer;
	box-shadow: 5px 5px 0 #000;
	transition: all 0.2s;
}

.nb-btn-submit:hover {
	background-color: #fff;
	color: var(--color-success);
	transform: translate(-2px, -2px);
	box-shadow: 7px 7px 0 #000;
}

.nb-btn-submit:active {
	transform: translate(3px, 3px);
	box-shadow: 0 0 0 #000;
}

/* --- RESPONSIVE --- */
@media (max-width: 991px) {
	.nb-fields-grid {
		grid-template-columns: 1fr; /* Одна колонка на мобільних */
		gap: 15px;
	}

	.nb-file-section {
		margin-top: 10px;
	}
}

/* --- AGGRESSIVE FILE INPUT --- */

.nb-file-section {
	margin-bottom: 30px;
}

.nb-file-label {
	display: block;
	font-family: var(--font-heading);
	font-weight: 900;
	text-transform: uppercase;
	font-size: 1rem;
	margin-bottom: 10px;
	color: #000;
	letter-spacing: 1px;
}

/* 2. Поле з назвою файлу (Caption) */
.file-caption {
	margin-bottom: 10px; /* Відступ до кнопок на мобільному, або між блоками */
	width: 100%;
}

.file-caption-name {
	height: 50px !important;
	line-height: 1.5 !important;
	border: 3px solid #000 !important; /* Чорна рамка */
	background: #fff !important;
	border-radius: 0 !important;
	box-shadow: inset 4px 4px 0 rgba(0,0,0,0.1); /* Внутрішня тінь */

	/* Типографіка */
	font-family: 'Courier New', monospace !important; /* Технічний шрифт */
	font-weight: 700 !important;
	font-size: 1.1rem !important;
	color: #000 !important;
	padding-left: 15px !important;
	display: flex; align-items: center;
}

/* Якщо файл не обрано (placeholder) */
.file-caption-name:empty::before {
	content: "NO FILE SELECTED_";
	color: #777;
	animation: blink 1.5s infinite;
}

/* 3. Кнопки (Browse та Remove) */
.input-group-btn {
	display: flex;
	gap: 10px; /* Відступ між кнопками */
}

/* Загальний стиль для кнопок файлу */
.nb-btn-file-browse,
.nb-btn-file-remove {
	padding: 12px 24px !important;
	font-family: var(--font-heading);
	font-weight: 900 !important;
	text-transform: uppercase;
	border: 3px solid #000 !important;
	border-radius: 0 !important; /* Квадратні */
	position: relative;
	cursor: pointer;
	transition: all 0.1s;
	height: 50px; /* Вирівнюємо з інпутом */
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Стиль кнопки BROWSE (Синя) */
.nb-btn-file-browse {
	background-color: var(--color-primary) !important;
	color: #fff !important;
	box-shadow: 4px 4px 0 #000 !important;
	z-index: 2;
}

.nb-btn-file-browse:hover {
	background-color: var(--color-accent) !important; /* Жовта при наведенні */
	color: #000 !important;
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 #000 !important;
}

.nb-btn-file-browse:active {
	transform: translate(2px, 2px);
	box-shadow: 0 0 0 #000 !important;
}

/* Стиль кнопки REMOVE (Червона/Помаранчева) */
.nb-btn-file-remove {
	background-color: #ff4d4d !important; /* Червоний */
	color: #000 !important;
	box-shadow: 4px 4px 0 #000 !important;
}

.nb-btn-file-remove:hover {
	background-color: #000 !important;
	color: #fff !important;
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--color-error) !important;
}

/* Адаптивність */
@media (min-width: 768px) {
	/* На десктопі робимо все в один рядок */
	.nb-file-input-group {
		display: flex;
		gap: 15px;
	}
	.file-caption {
		flex-grow: 1;
		margin-bottom: 0;
	}
	.input-group-btn {
		width: auto;
	}
}

@keyframes blink {
	50% { opacity: 0; }
}

/* --- AGGRESSIVE FILE INPUT OVERRIDE (NUCLEAR OPTION) --- */

/* 1. Скидання стандартних стилів контейнера */

/* 2. Вирівнювання внутрішніх елементів (Input Group) */
.nb-file-section .input-group {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
	gap: 15px !important; /* Відступ між полем і кнопками */
	width: 100% !important;
	box-shadow: none !important; /* Прибираємо тіні бутстрапа */
}

/* 3. Текстове поле (Caption) */
.nb-file-section .file-caption {
	flex-grow: 1 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	height: auto !important;
	width: auto !important; /* Фікс ширини */
}

.nb-file-section .file-caption-name {
	width: 100% !important;
	height: 50px !important; /* Фіксована висота */
	line-height: 46px !important; /* Вертикальне центрування тексту */
	padding: 0 15px !important;
	background: #fff !important;
	border: 3px solid #000 !important; /* Товста рамка */
	color: #000 !important;
	font-family: 'Courier New', monospace !important; /* Технічний шрифт */
	font-size: 1.1rem !important;
	font-weight: 700 !important;
	border-radius: 0 !important;
	box-shadow: inset 4px 4px 0 rgba(0,0,0,0.1) !important;
	pointer-events: none !important; /* Щоб не можна було редагувати текст вручну */
}

/* Іконка файлу всередині поля (якщо є) */
.nb-file-section .file-caption-icon {
	display: none !important; /* Прибираємо стандартну іконку папки зліва */
}

/* 4. Група кнопок */
.nb-file-section .input-group-btn {
	display: flex !important;
	width: auto !important;
	gap: 10px !important;
	margin: 0 !important;
	vertical-align: top !important;
	white-space: nowrap !important;
}

/* 5. Стилізація Кнопок (Browse / Remove) */
.nb-file-section .btn-file,
.nb-file-section .fileinput-remove {
	margin: 0 !important;
	border-radius: 0 !important;
	border: 3px solid #000 !important;
	height: 50px !important; /* Така ж висота як у інпута */
	padding: 0 25px !important;
	font-family: var(--font-heading, sans-serif) !important;
	font-weight: 900 !important;
	text-transform: uppercase !important;
	font-size: 0.9rem !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 0.1s !important;
	z-index: 10 !important;
}

/* --- Кнопка "ОБРАТИ" (Browse) --- */
/* Клас btn-file додається самим віджетом */
.nb-file-section .btn-file {
	background-color: var(--color-primary, #237df9) !important;
	color: #fff !important;
	box-shadow: 4px 4px 0 #000 !important;
}

.nb-file-section .btn-file:hover {
	background-color: var(--color-accent, #e6b64b) !important;
	color: #000 !important;
	transform: translate(-2px, -2px) !important;
	box-shadow: 6px 6px 0 #000 !important;
}

.nb-file-section .btn-file:active {
	transform: translate(2px, 2px) !important;
	box-shadow: 0 0 0 #000 !important;
}

/* --- Кнопка "ОЧИСТИТИ" (Remove) --- */
/* У PHP конфігу ми дали їй клас nb-btn-file-remove, але віджет може додати і свої */
.nb-file-section .nb-btn-file-remove,
.nb-file-section .fileinput-remove-button {
	background-color: #ff4d4d !important; /* Червоний */
	color: #000 !important;
	box-shadow: 4px 4px 0 #000 !important;
}

.nb-file-section .nb-btn-file-remove:hover,
.nb-file-section .fileinput-remove-button:hover {
	background-color: #000 !important;
	color: #fff !important;
	transform: translate(-2px, -2px) !important;
}

/* --- Виправлення для мобільного (Адаптив) --- */
@media (max-width: 768px) {
	.nb-file-section .input-group {
		flex-direction: column !important;
	}

	.nb-file-section .file-caption {
		width: 100% !important;
	}

	.nb-file-section .input-group-btn {
		width: 100% !important;
		justify-content: space-between !important;
	}

	.nb-file-section .btn-file,
	.nb-file-section .fileinput-remove {
		flex: 1 !important; /* Розтягуємо кнопки */
		text-align: center !important;
	}
}

/* --- HEADER AREA --- */
.nb-indexing-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 40px;
	flex-wrap: wrap;
	gap: 20px;
}

/* Search Bar (Brutalist Style) */
.nb-search-wrapper {
	position: relative;
	width: 300px;
}

.nb-search-input {
	width: 100%;
	padding: 12px 15px;
	padding-right: 50px;
	border: 3px solid #000;
	background: #fff;
	font-family: var(--font-body);
	font-size: 1rem;
	color: #000;
	border-radius: 0;
	outline: none;
	transition: 0.2s;
}

.nb-search-input:focus {
	box-shadow: 4px 4px 0 var(--color-accent); /* Жовта тінь */
}

.nb-search-btn {
	position: absolute;
	right: 3px;
	top: 3px;
	height: calc(100% - 6px); /* Вписуємо всередину рамки */
	width: 40px;
	background: var(--color-primary);
	color: #fff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* --- GRID LAYOUT --- */
.nb-indexing-grid {
	display: grid;
	/* Адаптивна сітка: мінімум 260px на картку */
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 30px;
}

/* --- BASE CARD --- */
.nb-base-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 3px solid #000;
	text-decoration: none;
	position: relative;
	transition: transform 0.2s, box-shadow 0.2s;
	height: 220px; /* Фіксована висота */
}

.nb-base-card:hover {
	transform: translate(-4px, -4px);
	box-shadow: 8px 8px 0 #000;
	border-color: #000;
}

/* Status Badge */
.nb-base-status {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 5px;
	color: #999;
	z-index: 2;
}

.status-dot {
	width: 8px; height: 8px;
	background: var(--color-success); /* Зелений */
	border-radius: 50%;
	border: 1px solid #000;
}

/* Logo Area */
.nb-base-logo {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: #fff;
	overflow: hidden;
}

.nb-base-logo img {
	max-width: 80%;
	max-height: 80px;
	object-fit: contain;
	filter: grayscale(100%) contrast(1.2); /* Чорно-білий стиль */
	transition: 0.3s;
	opacity: 0.8;
}

/* Hover Effect on Image */
.nb-base-card:hover .nb-base-logo img {
	filter: grayscale(0%) contrast(1); /* Колір повертається */
	opacity: 1;
	transform: scale(1.05);
}

/* Footer Area */
.nb-base-footer {
	padding: 15px;
	border-top: 3px solid #000;
	background: var(--color-bg-alt); /* Світло-сірий */
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: 0.2s;
}

.nb-base-card:hover .nb-base-footer {
	background: var(--color-primary); /* Синій при наведенні */
	color: #fff;
}

.nb-base-title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 0.9rem;
	font-weight: 700;
	color: inherit;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 180px;
}

.nb-link-arrow {
	font-weight: 900;
	font-size: 1.2rem;
	transform: translateX(0);
	transition: transform 0.2s;
}

.nb-base-card:hover .nb-link-arrow {
	transform: translateX(5px); /* Стрілочка їде вправо */
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
	.nb-indexing-header {
		flex-direction: column;
		align-items: flex-start;
	}
	.nb-search-wrapper {
		width: 100%;
	}
}

/* --- LAYOUT --- */
.nb-editorial-grid {
	display: grid;
	grid-template-columns: 250px 1fr; /* Сайдбар зліва фіксований */
	gap: 40px;
	position: relative;
}

.nb-editorial-sidebar {
	height: 100%; /* Додайте це для гарантії */
}

/* --- SIDEBAR NAV --- */
.nb-sticky-nav {
	position: sticky;
	top: 100px;
	background: #fff;
	border: 3px solid #000;
	box-shadow: 4px 4px 0 #000;
}

.nb-nav-title {
	background: #000;
	color: #fff;
	padding: 10px 15px;
	font-family: var(--font-heading);
	font-size: 1rem;
	text-transform: uppercase;
	margin: 0;
}

.nb-nav-list {
	display: flex;
	flex-direction: column;
}

.nb-nav-link {
	padding: 12px 15px;
	border-bottom: 1px solid #000;
	color: #000;
	text-decoration: none;
	font-weight: 500;
	transition: 0.2s;
}

.nb-nav-link:last-child { border-bottom: none; }

.nb-nav-link:hover,
.nb-nav-link.active {
	background: var(--color-accent); /* Жовтий */
	padding-left: 20px; /* Зсув вправо */
	font-weight: 700;
}

/* --- SECTIONS --- */
.nb-section-group {
	margin-bottom: 60px;
	scroll-margin-top: 120px; /* Відступ для скролу */
}

.nb-group-title {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	margin-bottom: 20px;
	border-left: 6px solid var(--color-primary); /* Синя лінія зліва */
	padding-left: 15px;
	line-height: 1.2;
}

/* --- CHIEF EDITOR (HERO CARD) --- */
.nb-chief-card {
	background: #fff;
	border: 4px solid #000;
	box-shadow: 8px 8px 0 var(--color-accent); /* Велика жовта тінь */
	padding: 0;
	position: relative;
	margin-bottom: 40px;
}

.nb-chief-badge {
	position: absolute;
	top: -15px;
	right: 20px;
	background: var(--color-primary);
	color: #fff;
	padding: 5px 15px;
	font-weight: 900;
	text-transform: uppercase;
	border: 2px solid #000;
	box-shadow: 2px 2px 0 #000;
	font-family: var(--font-heading);
}

.nb-chief-body {
	padding: 30px;
}

.nb-chief-name {
	font-size: 2rem;
	margin-bottom: 15px;
}
.nb-chief-name a {
	color: #000;
	text-decoration: none;
	background-image: linear-gradient(var(--color-accent), var(--color-accent));
	background-size: 100% 10px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: 0.3s;
}
.nb-chief-name a:hover {
	background-size: 100% 100%; /* Заливка при наведенні */
}

.nb-chief-desc {
	font-size: 1.1rem;
	margin-bottom: 25px;
	line-height: 1.6;
}

/* --- REGULAR MEMBERS GRID --- */
.nb-members-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
}

/* --- MEMBER CARD --- */
.nb-member-card {
	background: #fff;
	border: 2px solid #000;
	display: flex;
	flex-direction: column;
	transition: transform 0.2s;
}

.nb-member-card:hover {
	box-shadow: 5px 5px 0 #000;
	transform: translate(-2px, -2px);
}

.nb-member-header {
	background: var(--color-bg-alt);
	padding: 15px;
	border-bottom: 2px solid #000;
}

.nb-member-name {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
}

.nb-member-body {
	padding: 15px;
	flex-grow: 1;
}

.nb-member-desc {
	font-size: 0.9rem;
	color: #555;
}

.nb-member-footer {
	padding: 10px 15px;
	border-top: 1px dashed #ccc;
	background: #fff;
}

/* --- SOCIAL ICONS --- */
.nb-social-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.nb-soc-icon {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #000;
	color: #000;
	transition: 0.2s;
	background: #fff;
	font-size: 1.1rem;
}

/* Кольори для іконок при наведенні */
.nb-soc-icon:hover { transform: translateY(-3px); box-shadow: 2px 2px 0 #000; }
.nb-soc-icon.is-email:hover { background: #ffcc00; }
.nb-soc-icon.is-orcid:hover { background: #a6ce39; color: #fff; } /* Official Orcid Green */
.nb-soc-icon.is-google:hover { background: #4285f4; color: #fff; }
.nb-soc-icon.is-scopus:hover { background: #ff6600; color: #fff; }
.nb-soc-icon.is-wos:hover { background: #5e33bf; color: #fff; }

.nb-social-row.is-small .nb-soc-icon {
	width: 30px; height: 30px; font-size: 0.9rem; border-width: 1px;
}

/* --- RESPONSIVE --- */
@media (max-width: 991px) {
	.nb-editorial-grid {
		grid-template-columns: 1fr;
	}

	.nb-editorial-sidebar {
		display: none; /* Можна сховати або зробити випадаючим меню */
	}

	/* Якщо хочемо залишити навігацію на мобільному як горизонтальний скрол */
	.nb-editorial-sidebar {
		display: block;
		position: static;
		margin-bottom: 30px;
	}
	.nb-sticky-nav {
		position: static;
	}
	.nb-nav-list {
		flex-direction: row;
		overflow-x: auto;
	}
	.nb-nav-link {
		white-space: nowrap;
		border-bottom: none;
		border-right: 1px solid #000;
	}
}

/* --- LAYOUT --- */
.nb-editorial-grid {
	display: grid;
	/* Сайдбар зліва (250px) і контент справа */
	grid-template-columns: 250px 1fr;
	gap: 40px;
	align-items: start; /* Важливо для sticky: елементи вирівняні по верху */
	position: relative;
}

/* --- STICKY SIDEBAR NAV --- */
.nb-sticky-nav {
	/* Робимо липким */
	position: sticky;
	position: -webkit-sticky;

	/* ВАЖЛИВО: Висота вашого хедера (наприклад 100px) + відступ (20px) */
	/* Якщо ваш хедер 80px, ставте тут 100px. Якщо 100px - ставте 120px */
	top: 150px;

	background: #fff;
	border: 3px solid #000;
	box-shadow: 6px 6px 0 #000; /* Жорстка тінь */
	z-index: 10; /* Щоб меню було поверх контенту, але під хедером (якщо у хедера z-index > 10) */
	max-height: calc(100vh - 140px); /* Щоб меню не вилазило за екран, якщо воно довге */
	overflow-y: auto; /* Скрол всередині меню, якщо воно дуже високе */
}

/* Стилізація заголовка меню */
.nb-nav-title {
	background: #000;
	color: #fff;
	padding: 12px 15px;
	font-family: var(--font-heading);
	font-size: 1.1rem;
	text-transform: uppercase;
	margin: 0;
	border-bottom: 3px solid #000;
}

/* Список посилань */
.nb-nav-list {
	display: flex;
	flex-direction: column;
}

.nb-nav-link {
	padding: 12px 15px;
	border-bottom: 2px solid #000; /* Жирні лінії розділення */
	color: #000;
	text-decoration: none;
	font-weight: 600;
	transition: all 0.2s;
	font-size: 0.95rem;
}

.nb-nav-link:last-child { border-bottom: none; }

/* Ховер та Активний стан */
.nb-nav-link:hover,
.nb-nav-link.active {
	background: var(--color-accent); /* Жовтий фон */
	padding-left: 20px; /* Анімація зсуву */
	box-shadow: inset 4px 0 0 #000; /* Чорна смужка зліва */
}

/* --- АДАПТИВНІСТЬ --- */
@media (max-width: 991px) {
	.nb-editorial-grid {
		grid-template-columns: 1fr; /* Одна колонка */
	}

	.nb-editorial-sidebar {
		/* На мобільному прибираємо sticky, бо мало місця */
		position: static;
		margin-bottom: 30px;
		z-index: 1;
	}

	.nb-sticky-nav {
		position: static;
		width: 100%;
		max-height: none;
		box-shadow: 4px 4px 0 #000;
	}
}

/* --- SVG ICON FIX --- */

/* Змушуємо SVG всередині кнопки бути правильного розміру */
.nb-soc-icon svg {
	width: 18px;  /* Оптимальний розмір іконки */
	height: 18px;
	fill: currentColor; /* Щоб SVG змінював колір разом з текстом */
	display: block;
}

/* Якщо ваші віджети огортають SVG у div чи span, прибираємо зайві відступи */
.nb-soc-icon > div,
.nb-soc-icon > span {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

/* Корекція кольорів при наведенні (щоб SVG ставав білим або чорним) */
.nb-soc-icon:hover svg {
	fill: #fff; /* Білий колір іконки на кольоровому фоні */
}

/* Виняток для Email (жовтий фон -> чорна іконка) */
.nb-soc-icon.is-email:hover i {
	color: #000;
}

/* --- LAYOUT --- */
.nb-profile-wrapper {
	margin-bottom: 60px;
}

.nb-profile-top {
	margin-bottom: 40px;
}

.nb-profile-grid {
	display: grid;
	grid-template-columns: 320px 1fr; /* Фіксована колонка зліва */
	gap: 50px;
	align-items: start;
}

/* --- SIDEBAR (Photo & Links) --- */
.nb-photo-frame {
	position: relative;
	border: 4px solid #000;
	background: #fff;
	padding: 10px;
	box-shadow: 8px 8px 0 var(--color-accent); /* Жовта тінь */
	margin-bottom: 30px;
}

.nb-photo-img {
	width: 100%;
	height: auto;
	display: block;
	filter: grayscale(100%); /* Чорно-біле фото */
	transition: 0.5s;
}

/* Ефект "оживлення" при наведенні */
.nb-photo-frame:hover .nb-photo-img {
	filter: grayscale(0%);
}

.nb-no-photo {
	width: 100%;
	height: 300px;
	background: #eee;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 5rem;
	color: #ccc;
}

.nb-role-sticker {
	position: absolute;
	bottom: -15px;
	left: 50%;
	transform: translateX(-50%);
	background: #000;
	color: #fff;
	padding: 5px 15px;
	font-weight: 900;
	font-family: var(--font-heading);
	text-transform: uppercase;
	font-size: 0.9rem;
	letter-spacing: 1px;
	white-space: nowrap;
}

/* Contact Stack */
.nb-contact-stack {
	background: #f4f4f0;
	border: 2px solid #000;
	padding: 20px;
}

.nb-stack-title {
	margin-top: 0;
	margin-bottom: 15px;
	font-size: 0.9rem;
	text-transform: uppercase;
	font-weight: 700;
	border-bottom: 2px solid #000;
	padding-bottom: 10px;
}

.nb-links-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Link Buttons (з SVG) */
.nb-link-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
	background: #fff;
	border: 2px solid #000;
	text-decoration: none;
	color: #000;
	font-weight: 600;
	font-size: 0.9rem;
	transition: 0.2s;
}

.nb-link-btn:hover {
	background: var(--color-primary);
	color: #fff;
	transform: translateX(5px);
	box-shadow: 3px 3px 0 #000;
}

/* Налаштування SVG всередині кнопки */
.nb-link-btn .icon {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nb-link-btn .icon svg {
	width: 20px;
	height: 20px;
	fill: currentColor; /* SVG бере колір тексту (чорний -> білий при ховері) */
}

/* --- MAIN CONTENT --- */
.nb-name-block {
	margin-bottom: 40px;
	border-bottom: 4px solid var(--color-primary);
	padding-bottom: 20px;
}

.nb-person-name {
	font-size: 3rem;
	line-height: 1.1;
	margin-bottom: 15px;
	text-transform: uppercase;
	font-family: var(--font-heading);
}

.nb-person-desc {
	font-size: 1.3rem;
	color: #555;
	font-style: italic;
	font-family: serif; /* Для контрасту з заголовком */
}

/* Bio Section */
.nb-bio-header {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 20px;
}

.nb-bio-header .marker {
	width: 15px; height: 15px;
	background: var(--color-accent); /* Жовтий квадрат */
	border: 2px solid #000;
}

.nb-bio-header h3 {
	margin: 0;
	font-size: 1.5rem;
	text-transform: uppercase;
	font-weight: 700;
}

/* Текст біографії (успадковує стилі nb-text-body з попередніх завдань) */
.nb-text-body {
	font-size: 1.1rem;
	line-height: 1.8;
}

/* --- RESPONSIVE --- */
@media (max-width: 991px) {
	.nb-profile-grid {
		grid-template-columns: 1fr;
	}

	.nb-photo-frame {
		max-width: 300px; /* Обмежуємо ширину фото на мобільному */
		margin: 0 auto 30px auto;
	}

	.nb-contact-stack {
		margin-bottom: 40px;
	}

	.nb-person-name {
		font-size: 2.2rem;
	}
}

/* --- LAYOUT --- */
.nb-search-header {
	margin-bottom: 40px;
}

.nb-search-subtitle {
	font-size: 1.1rem;
	color: #555;
	margin-top: 10px;
}

/* --- SEARCH CONSOLE (Main Box) --- */
.nb-search-console {
	border: 4px solid #000;
	background: #fff;
	margin-bottom: 40px;
}

/* Console Header */
.nb-console-bar {
	background: #000;
	color: #fff;
	padding: 10px 15px;
	display: flex;
	align-items: center;
	font-family: monospace;
	font-weight: 700;
	letter-spacing: 1px;
}

.nb-console-bar .icon { margin-right: 10px; color: var(--color-accent); }
.nb-console-bar .title { flex-grow: 1; text-transform: uppercase; }

.nb-console-bar .controls { display: flex; gap: 6px; }
.nb-console-bar .dot {
	width: 10px; height: 10px;
	background: #555; border-radius: 50%;
}

/* Console Body */
.nb-console-body {
	padding: 40px;
	background-color: #f8f8f8;
	/* Патерн сітки для технічного вигляду */
	background-image: radial-gradient(#ccc 1px, transparent 1px);
	background-size: 20px 20px;
}

/* --- FORM STYLING (Inside Render) --- */
/* Стилізуємо елементи форми, які генеруються Yii */

.nb-form-context .form-group {
	margin-bottom: 0;
}

/* Inputs */
.nb-form-context input[type="text"],
.nb-form-context input[type="search"] {
	width: 100%;
	height: 50px;
	padding: 10px 15px;
	font-size: 1.1rem;
	border: 3px solid #000;
	background: #fff;
	font-family: var(--font-body);
	border-radius: 0;
	transition: 0.2s;
}

.nb-form-context input:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
}

/* Search Button */
.nb-form-context button[type="submit"] {
	display: block;
	width: 5%;
	height: 50px;
	background: var(--color-primary);
	color: #fff;
	border: 3px solid #000;
	font-family: var(--font-heading);
	font-weight: 900;
	text-transform: uppercase;
	font-size: 1.5rem;
	cursor: pointer;
	box-shadow: 4px 4px 0 #000;
	transition: 0.2s;
}

.nb-form-context.application button[type="submit"] {
	display: block;
	width: 100%;
	height: 50px;
	background: var(--color-primary);
	color: #fff;
	border: 3px solid #000;
	font-family: var(--font-heading);
	font-weight: 900;
	text-transform: uppercase;
	font-size: 1.5rem;
	cursor: pointer;
	box-shadow: 4px 4px 0 #000;
	transition: 0.2s;
	padding: 0;
}

.nb-form-context button[type="submit"]:hover {
	background: var(--color-accent);
	color: #000;
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 #000;
}

/* Radio Buttons / Checkboxes (якщо є вибір типу пошуку) */
.nb-form-context label {
	font-weight: 700;
	margin-right: 15px;
	color: #000;
	text-transform: uppercase;
	font-size: 0.9rem;
}

/* --- SEARCH TIPS --- */
.nb-search-tips {
	background: #fff;
	border: 2px dashed #000;
	padding: 20px;
	max-width: 600px;
	margin: 0 auto;
}

.tips-title {
	font-family: var(--font-heading);
	font-weight: 700;
	margin-bottom: 10px;
	color: #000;
}

.tips-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.tips-list li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 5px;
	color: #555;
	font-size: 0.95rem;
}

.tips-list li::before {
	content: ">>";
	position: absolute;
	left: 0;
	color: var(--color-primary);
	font-family: monospace;
	font-weight: bold;
}

/* Responsive */
@media (max-width: 768px) {
	.nb-console-body { padding: 20px; }
}

/* --- SEARCH FORM TERMINAL STYLE --- */

.nb-search-form {
	width: 100%;
}

.nb-search-row {
	display: flex;
	gap: 15px; /* Відступ між інпутом і кнопкою */
	margin-bottom: 25px;
}

/* Обгортка для інпута (щоб field-container не ламав flex) */
.nb-input-wrapper {
	flex-grow: 1;
}

/* --- Input Field --- */
.nb-terminal-input {
	width: 100%;
	height: 54px;
	padding: 10px 20px;
	border: 3px solid #000;
	background-color: #fff;
	font-family: 'Courier New', monospace; /* Технічний шрифт */
	font-size: 1.2rem;
	font-weight: 700;
	color: #000;
	border-radius: 0;
	transition: 0.2s;
}

.nb-terminal-input::placeholder {
	color: #999;
	font-weight: 400;
	text-transform: uppercase;
}

/* --- Submit Button --- */
.nb-terminal-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 54px; /* Така ж висота як у інпута */
	background: var(--color-primary);
	color: #fff;
	border: 3px solid #000;
	font-family: var(--font-heading);
	font-weight: 900;
	text-transform: uppercase;
	font-size: 1.1rem;
	cursor: pointer;
	box-shadow: 4px 4px 0 #000;
	transition: 0.2s;
}

.nb-terminal-submit:hover {
	background: var(--color-accent); /* Жовтий */
	color: #000;
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 #000;
}

.nb-terminal-submit:active {
	transform: translate(2px, 2px);
	box-shadow: 0 0 0 #000;
}

/* --- OPTIONS & RADIO CHIPS --- */
.nb-search-options {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 15px;
	padding-top: 15px;
	border-top: 2px dashed #ccc;
}

.nb-opt-label {
	font-family: monospace;
	font-weight: 700;
	color: #555;
	margin-right: 5px;
}

/* Контейнер радіо-групи (від Yii) */
.nb-radio-group {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* --- CUSTOM RADIO CHIP --- */
.nb-radio-chip {
	position: relative;
	cursor: pointer;
	margin: 0;
}

/* Ховаємо реальний input, але залишаємо його доступним для форм */
.nb-radio-chip input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Вигляд кнопки (Span) */
.chip-face {
	display: inline-block;
	padding: 8px 16px;
	border: 2px solid #000;
	background: #fff;
	font-family: var(--font-heading);
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	transition: 0.2s;
	user-select: none;
}

/* Hover ефект */
.nb-radio-chip:hover .chip-face {
	background: #f0f0f0;
	transform: translateY(-2px);
	box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}

/* CHECKED STATE (Активний стан) */
.nb-radio-chip input:checked + .chip-face {
	background: var(--color-accent); /* Жовтий */
	color: #000;
	box-shadow: 3px 3px 0 #000; /* Чорна тінь */
	transform: translate(-2px, -2px); /* Піднімається */
}

/* RESPONSIVE */
@media (max-width: 600px) {
	.nb-search-row {
		flex-direction: column;
		gap: 10px;
	}
	.nb-terminal-submit {
		width: 100%;
	}
	.nb-search-options {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* --- LOGIN PAGE LAYOUT --- */
.nb-login-page {
	min-height: 80vh; /* Центрування по вертикалі */
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-bg); /* Світло-сірий фон */
	padding: 20px;

	/* Декоративна сітка на фоні */
	background-image:
			linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
			linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
	background-size: 20px 20px;
}

/* --- LOGIN CARD --- */
.nb-login-card {
	width: 100%;
	max-width: 450px;
	background: #fff;
	border: 4px solid #000;
	position: relative;
	transition: transform 0.3s;
}

/* Header (Чорна смуга) */
.nb-card-header {
	background: #000;
	color: #fff;
	padding: 12px 20px;
	display: flex;
	align-items: center;
	font-family: monospace;
	font-weight: 700;
	letter-spacing: 1px;
	font-size: 0.9rem;
}

.nb-card-header .icon { color: var(--color-error); margin-right: 10px; } /* Червоний щит */
.nb-card-header .text { flex-grow: 1; text-transform: uppercase; }

.nb-card-header .dots { display: flex; gap: 5px; }
.nb-card-header .dots span {
	width: 10px; height: 10px;
	background: #555; border-radius: 50%;
	border: 1px solid #fff;
}

/* Body */
.nb-card-body {
	padding: 40px;
}

.nb-login-title {
	font-family: var(--font-heading);
	font-size: 2rem;
	margin-bottom: 25px;
	text-transform: uppercase;
	color: #000;
}

.nb-login-desc {
	color: #666;
	margin-bottom: 30px;
	font-size: 1rem;
}

/* --- FORM ELEMENTS --- */
.nb-form-group {
	margin-bottom: 20px;
}

.nb-form-label {
	display: block;
	font-family: var(--font-heading);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.85rem;
	margin-bottom: 8px;
	color: #000;
}

.nb-input {
	width: 100%;
	height: 50px;
	padding: 10px 15px;
	border: 3px solid #000;
	background: var(--color-bg-alt);
	font-family: monospace; /* Технічний шрифт для паролів виглядає круто */
	font-size: 1.1rem;
	color: #000;
	border-radius: 0;
	transition: 0.2s;
}

.nb-input:focus {
	outline: none;
	background: #fff;
	border-color: var(--color-accent); /* Жовтий */
	box-shadow: 4px 4px 0 #000;
}

.nb-form-error {
	color: var(--color-error);
	font-size: 0.85rem;
	font-weight: 600;
	margin-top: 5px;
	display: block;
}

/* Button */
.nb-form-actions {
	margin-top: 30px;
}

.nb-btn-login {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 54px;
	background: #000;
	color: #fff;
	border: none;
	font-family: var(--font-heading);
	font-weight: 900;
	text-transform: uppercase;
	font-size: 1.1rem;
	cursor: pointer;
	transition: 0.2s;
	border: 3px solid #000; /* Щоб розмір не скакав при зміні кольору */
}

.nb-btn-login:hover {
	background: var(--color-success); /* Зелений */
	color: #000;
	box-shadow: 6px 6px 0 rgba(0,0,0,0.2);
	transform: translateY(-2px);
}

/* Footer */
.nb-card-footer {
	padding: 10px;
	background: #f0f0f0;
	border-top: 3px solid #000;
	text-align: center;
	font-size: 0.8rem;
	font-weight: 600;
	color: #555;
	text-transform: uppercase;
}

/* Responsive */
@media (max-width: 500px) {
	.nb-login-card {
		box-shadow: 6px 6px 0 var(--color-primary);
	}
	.nb-card-body {
		padding: 25px;
	}
}

/* --- AUTHOR DOSSIER CARD --- */
.nb-author-card {
	border: 4px solid #000;
	background: #fff;
	margin-bottom: 60px;
	position: relative;
}

/* System Bar (Black Header) */
.nb-card-system-bar {
	background: #000;
	color: #fff;
	padding: 10px 20px;
	display: flex;
	align-items: center;
	font-family: monospace;
	font-weight: 700;
	letter-spacing: 1px;
	border-bottom: 4px solid #000;
}

.nb-card-system-bar .sys-icon { margin-right: 10px; color: var(--color-accent); }
.nb-card-system-bar .sys-text { flex-grow: 1; text-transform: uppercase; }
.nb-card-system-bar .sys-dots { display: flex; gap: 6px; }
.nb-card-system-bar .sys-dots span {
	width: 10px; height: 10px; background: #555; border-radius: 50%;
}

/* Content Layout */
.nb-card-content {
	padding: 40px;
}

.nb-author-grid {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 40px;
}

/* Avatar / Visual */
.nb-author-visual {
	display: flex;
	justify-content: center;
}

.nb-avatar-placeholder {
	width: 100%;
	height: 200px;
	background: #f4f4f0;
	border: 3px solid #000;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 5rem;
	color: #000;
	box-shadow: 6px 6px 0 #000;
}

/* Info */
.nb-author-name {
	margin-top: 0;
	font-size: 2.5rem;
	font-family: var(--font-heading);
	text-transform: uppercase;
	margin-bottom: 20px;
	line-height: 1.1;
	border-bottom: 2px dashed #000;
	padding-bottom: 15px;
}

.nb-author-bio {
	font-size: 1.1rem;
	margin-bottom: 30px;
	color: #333;
	line-height: 1.6;
}

.nb-muted { color: #777; font-style: italic; }

/* Stats Row */
.nb-stats-row {
	display: flex;
	gap: 20px;
}

.nb-stat-box {
	border: 3px solid #000;
	padding: 15px 25px;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 120px;
	transition: transform 0.2s;
}

.nb-stat-box:hover {
	transform: translateY(-5px);
	box-shadow: 4px 4px 0 #000;
}

.nb-stat-box.is-yellow { background: var(--color-accent); }
.nb-stat-box.is-blue { background: var(--color-primary); color: #fff; }

.nb-stat-box .val {
	font-size: 2rem;
	font-weight: 900;
	font-family: var(--font-heading);
	line-height: 1;
}

.nb-stat-box .lbl {
	font-size: 0.8rem;
	text-transform: uppercase;
	font-weight: 700;
	margin-top: 5px;
}

/* --- ARTICLES SECTION --- */
.nb-articles-section {
	margin-top: 40px;
}

.nb-articles-wrapper {
	display: flex;
	flex-direction: column;
	gap: 30px; /* Відступ між статтями */
}

/* RESPONSIVE */
@media (max-width: 768px) {
	.nb-author-grid {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.nb-avatar-placeholder {
		width: 150px;
		height: 150px;
		margin: 0 auto;
	}

	.nb-stats-row {
		justify-content: center;
	}
}

/* Alert Box */
.nb-alert-box {
	border: 3px solid #000;
	background: #fff0f0; /* Світло-червоний фон */
	padding: 20px;
	display: flex;
	gap: 20px;
	align-items: flex-start;
	margin-bottom: 40px;
	box-shadow: 6px 6px 0 var(--color-error); /* Червона тінь */
}

.alert-icon {
	font-size: 2rem;
	color: var(--color-error);
}

.alert-content h3 {
	margin: 0 0 10px 0;
	font-family: var(--font-heading);
	text-transform: uppercase;
	font-weight: 700;
}

.alert-content p {
	margin: 0;
	font-size: 1.1rem;
}

/* --- RESULTS LIST STATE --- */
.nb-results-meta {
	margin-bottom: 20px;
}

.nb-badge.is-blue {
	background: var(--color-primary);
	color: #fff;
	padding: 5px 10px;
	font-weight: 700;
	text-transform: uppercase;
	display: inline-block;
}

/* Невеликий фікс для мобільного пошуку */
@media (max-width: 768px) {
	.nb-alert-box {
		flex-direction: column;
		text-align: center;
		align-items: center;
	}
}

/* --- AUTHORS DIRECTORY STYLE --- */

.nb-authors-directory {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* Author File Wrapper */
.nb-author-file {
	border: 3px solid #000;
	box-shadow: 8px 8px 0 #ccc; /* Сіра тінь для папки */
	background: #fff;
	transition: transform 0.2s;
}

.nb-author-file:hover {
	box-shadow: 10px 10px 0 var(--color-primary); /* Синя тінь при наведенні */
	transform: translate(-2px, -2px);
	border-color: #000;
}

/* File Header (Tab) */
.nb-file-header {
	background: #000;
	color: #fff;
	padding: 10px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.nb-file-tab {
	font-family: var(--font-heading);
	font-size: 1.2rem;
	font-weight: 700;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 10px;
}

.nb-file-link {
	color: #fff;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: 0.2s;
}

.nb-file-link:hover {
	color: var(--color-accent); /* Жовтий */
	border-bottom-color: var(--color-accent);
}

.nb-file-meta {
	font-family: monospace;
	color: #888;
}

/* File Content Area */
.nb-file-content {
	padding: 25px;
	background: #fcfcfc;
}

/* Empty State inside file */
.nb-empty-file {
	color: #777;
	font-style: italic;
	display: flex;
	align-items: center;
	gap: 10px;
}

/* --- ARTICLES LIST INSIDE FILE --- */
.nb-articles-wrapper {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

/* Single Item Row (Compact Article) */
.nb-file-item {
	display: flex;
	gap: 15px;
	padding: 15px;
	border: 2px solid #ddd;
	background: #fff;
	transition: 0.2s;
}

.nb-file-item:hover {
	border-color: #000;
	box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
}

.item-status {
	font-size: 1.2rem;
	color: #555;
	padding-top: 2px;
}

.item-info {
	flex-grow: 1;
}

.item-title {
	margin: 0 0 8px 0;
	font-size: 1.1rem;
	line-height: 1.4;
	font-weight: 700;
}

.item-title a {
	color: #000;
	text-decoration: none;
}
.item-title a:hover {
	text-decoration: underline;
	color: var(--color-primary);
}

.item-meta {
	font-size: 0.9rem;
	color: #666;
	display: flex;
	gap: 15px;
	align-items: center;
}

.read-link {
	margin-left: auto; /* Притискає кнопку вправо */
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-primary);
	text-decoration: none;
	font-size: 0.85rem;
}

.read-link:hover {
	color: #000;
	text-decoration: underline;
}

/* Reuse No Results styles from previous step */
.nb-no-results-wrapper {
	max-width: 800px;
	margin: 0 auto;
}

.iti__country-list {
	z-index: 10 !important;
}