/* ----------------------------------------------------------------------------------------
* Author        : Awaiken
* Template Name : Labrix - Laboratory & Science Research HTML Template
* File          : CSS File
* Version       : 1.0
* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. Scrolling Ticker css
06. About Us css
07. Our Services css
08. Why Choose Us css
09. What We Do css
10. Case Study css
11. Intro Video css
12. How It Work css
13. Our Pricing css
14. Our FAQs css
15. Our Testimonials css
16. Our Blog css
17. Footer css
18. About Us Page css
19. Services Page css
20. Service Single css
21. Blog Archive css
22. Blog Single css
23. Case Study Page css
24. Case Study Single css
25. Team Page css
26. Team Single css
27. Pricing Page css
28. Testimonials Page css
29. Image Gallery css
30. Video Gallery css
31. FAQs Page css
32. Contact Us Page css
33. 404 Error Page css
34. Responsive css
35. Mega Menu (HIRI addition)
36. Listing-page sidebar (HIRI addition)
37. Listing card (HIRI addition)
38. Global search overlay (HIRI addition)
39. Social icons row (HIRI addition)
40. Partner logo wall (HIRI addition)
41. Researcher card (HIRI addition)
-------------------------------------------------------------------------------------- */

/************************************/
/*** 	 01. Global Variables	  ***/
/************************************/

:root{
	--primary-color				: #07234D;
	--secondary-color			: #F0CACD;
	--bg-color					: #F8F8F8;
	--text-color				: #45566A;
	--accent-color				: #7F0D15;
	--on-accent-color			: var(--secondary-color);
	--white-color				: #FFFFFF;
	--divider-color				: #07234D1A;
	--dark-divider-color		: #FFFFFF1A;
	--error-color				: rgb(230, 87, 87);
	--default-font				: "Manrope", sans-serif;
	--accent-font				: "Sora", sans-serif;
}

/************************************/
/*** 	   02. General css		  ***/
/************************************/

body{
	position: relative;
	font-family: var(--default-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1em;
	color: var(--text-color);
	background: var(--bg-color);
}

::-webkit-scrollbar-track{
	background-color: var(--secondary-color);
	border-left: 1px solid var(--secondary-color);
}
::-webkit-scrollbar{
	width: 7px;
	background-color: var(--secondary-color);
}
::-webkit-scrollbar-thumb{
	background: var(--primary-color);
}

::selection{
	color: var(--primary-color);
	background-color: var(--accent-color);
	filter: invert(1);
}

p{
	line-height: 1.6em;
	margin-bottom: 1.5em;
}

h1,
h2,
h3,
h4,
h5,
h6{
	margin :0;
	font-family: var(--accent-font);
	font-weight: 600;
	line-height: 1.2em;
	color: var(--primary-color);
}

figure{
	margin: 0;
}

img{
	max-width: 100%;
}

a{
	text-decoration: none;
}

a:hover{
	text-decoration: none;
	outline: 0;
}

a:focus{
	text-decoration: none;
	outline: 0;
}

html,
body{
	width: 100%;
	overflow-x: clip;
}

.container{
	max-width: 1300px;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl{
    padding-right: 15px;
    padding-left: 15px;
}

.image-anime{
	position: relative;
	overflow: hidden;
}

.image-anime:after{
	content: "";
	position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255,255,255,.3);
    transform: translate(-50%,-50%) rotate(-45deg);
    z-index: 1;
}

.image-anime:hover:after{
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}

.reveal{
	position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    visibility: hidden;
    overflow: hidden;
}

.reveal img{
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform-origin: left;
    transform-origin: left;
}

.row{
    margin-right: -15px;
    margin-left: -15px;
}

.row > *{
	padding-right: 15px;
	padding-left: 15px;
}

.row.no-gutters{
    margin-right: 0px;
    margin-left: 0px;
}

.row.no-gutters > *{
    padding-right: 0px;
    padding-left: 0px;
}

.btn-default{
	position: relative;
    display: inline-block;
    background: var(--accent-color);
	border-radius: 10px;
	font-family: var(--accent-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1em;
    text-transform: capitalize;
    color: var(--on-accent-color);
    border: none;
    padding: 17px 50px 17px 20px;
    overflow: hidden;
	transition: all 0.4s ease-in-out;
    z-index: 0;
}

.btn-default:hover{
	color: var(--white-color);
}

.btn-default::before{
	content: '';
	position: absolute;
	top: 50%;
    right: 20px;
	width: 20px;
	height: 20px;
	background-image: url('../images/arrow-primary.svg');
	background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	transform: translateY(-50%);
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.btn-default:hover::before{
	transform: translateY(-50%) rotate(45deg);
	filter: brightness(0) invert(1);
}

.btn-default::after{
	content: '';
	position: absolute;
	left: 0;
	bottom: 0%;
	width: 102%;
	height: 100%;
	background-color: var(--primary-color);
	transition: all 0.5s ease-in-out;
	z-index: -1;
	transform: skewY(9.3deg) scaleY(0);
}

.btn-default:hover::after{
	transform: skewY(0deg) scaleY(2);
}

.btn-default.btn-highlighted:hover{
	color: var(--primary-color);
}

.btn-default.btn-highlighted:hover::before{
	filter: none;
}

.btn-default.btn-highlighted::after{
	background-color: var(--white-color);
}

.btn-default.btn-border{
	background: transparent;
	color: var(--white-color);
	border: 1px solid var(--white-color);
	padding: 16px 50px 16px 20px;
}

.btn-default.btn-border:hover{
	color: var(--primary-color);
}

.btn-default.btn-border::before{
	background-image: url('../images/arrow-white.svg');
}

.btn-default.btn-border:hover:before{
	filter: brightness(0) invert(0);
}

.btn-default.btn-border::after{
	background: var(--white-color);
}

.readmore-btn{
	position: relative;
	font-family: var(--accent-font);
	font-size: 16px;
	font-weight: 600;
	line-height: normal;
	text-transform: capitalize;
	color: var(--primary-color);
	padding-right: 26px;
}

.readmore-btn::before{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
	background-image: url('../images/arrow-primary.svg');
	background-repeat: no-repeat;
	background-size: cover;
	width: 20px;
	height: 20px;
    transition: all 0.3s ease-in-out;
}

.readmore-btn:hover::before{
	transform: rotate(45deg);
}

.cb-cursor:before{
	background: var(--accent-color);
}

.preloader{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background: var(--primary-color);
	display: flex;
	align-items: center;
	justify-content: center;
}

.loading-container,
.loading{
	height: 200px;
	position: relative;
	width: 200px;
	border-radius: 100%;
}

.loading-container{
	margin: 40px auto;
}

.loading{
	border: 1px solid transparent;
	border-color: transparent var(--accent-color) transparent var(--accent-color);
	animation: rotate-loading 1.5s linear 0s infinite normal;
	transform-origin: 50% 50%;
}

.loading-container:hover .loading,
.loading-container .loading{
	transition: all 0.5s ease-in-out;
}

#loading-icon{
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 176px;
	transform: translate(-50%, -50%);
}

@keyframes rotate-loading{
	0%{
		transform: rotate(0deg);
	}

	100%{
		transform: rotate(360deg);
	}
}

.bg-section{
	width: 100%;
	max-width: 1820px;
	background-color: var(--secondary-color);
	border-radius: 20px;
	margin: 0 auto;
}

.dark-section{
	background-color: var(--primary-color);
}

.section-row{
	margin-bottom: 80px;
}

.section-row .section-title{
	margin-bottom: 0;
}

.section-row .section-title.section-title-center{
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
}

.section-btn{
	text-align: right;
}

.section-content-btn .section-btn{
	margin-top: 30px;
	text-align: left;
}

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

.section-title-content p:last-child{
	margin-bottom: 0;	
}

.section-title{
	margin-bottom: 40px;
}

.section-title h3{
	position: relative;
	display: inline-block;
	border: 1px solid var(--divider-color);
	border-radius: 100px;
	font-size: 14px;
    font-weight: 500;
	text-transform: capitalize;
    color: var(--primary-color);
	padding: 8px 16px 8px 32px;
    margin-bottom: 10px;
}

.section-title h3::before{
	content: '';
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	background: var(--accent-color);
	border-radius: 50%;
	width: 6px;
	height: 6px;
}

.section-title h1{
	font-size: 60px;
	font-weight: 400;
	line-height: 1.2em;
	letter-spacing: -0.02em;
	margin-bottom: 0;
	cursor: none;
}

.section-title h2{
	font-size: 46px;
	font-weight: 400;
	line-height: 1.2em;
	letter-spacing: -0.02em;
	margin-bottom: 0;
	cursor: none;
}

.section-title p{
	margin-top: 20px;
	margin-bottom: 0;
}

.bg-section .section-title h3{
	border-color: var(--primary-color);
}

.bg-section .section-title h3::before{
	background: var(--primary-color);
}

.dark-section .section-title h3,
.dark-section .section-title h1,
.dark-section .section-title h2,
.dark-section .section-title p,
.dark-section .section-title-content p{
	color: var(--white-color);
}

.dark-section .section-title h3{
	border-color: var(--dark-divider-color);
}

.dark-section .section-title h3::before{
	background: var(--accent-color);
}

.help-block.with-errors ul{
	margin: 0;
	text-align: left;
}

.help-block.with-errors ul li{
	color: var(--error-color);
	font-weight: 500;
	font-size: 14px;
}

/************************************/
/**** 	   03. Header css		 ****/
/************************************/

header.main-header{
	position: absolute;
    top: 0;
    width: 100%;
    border-bottom: 1px solid var(--dark-divider-color);
    z-index: 100;
}

header.main-header .header-sticky{
	position: relative;
	top: 0;
	width: 100%;
	z-index: 100;
}

header.main-header .header-sticky.hide{
	transform: translateY(-100%);
	transition: transform 0.3s ease-in-out;
	border-radius: 0;
}

header.main-header .header-sticky.active{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	border-radius: 0;
    transform: translateY(0);
	background: var(--primary-color);
	border-bottom: 1px solid var(--dark-divider-color);
	padding: 0 15px;
}

.navbar{
	padding: 30px 0;
	align-items: center;
}

.navbar-brand{
	padding: 0;
	margin: 0;
}

.main-menu .nav-menu-wrapper{
	flex: 1;
	text-align: center;
	margin: 0 1.042vw;
}

.main-menu .nav-menu-wrapper > ul{
	align-items: center;
	display: inline-flex;
}

.main-menu ul li{
	margin: 0 5px;
	position: relative;
}

.main-menu ul li a{
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2em;
	padding: 14px 10px !important;
	color: var(--white-color);
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}

.main-menu ul li.submenu > a:after{
	content: '\f107';
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 14px;
	margin-left: 8px;
}

.main-menu ul li a:hover,
.main-menu ul li a:focus{
	color: var(--accent-color);
}

.main-menu ul ul{
	visibility: hidden;
	opacity: 0;
	transform: scale(1,0.8);
	transform-origin: top;
	padding: 0;
	margin: 0;
	list-style: none;
	width: 235px;
	border-radius: 12px;
	position: absolute;
	left: 0;
	top: 100%;
	background: var(--accent-color);
	transition: all 0.3s ease-in-out;
	text-align: left;
}

.main-menu ul li.submenu:first-child ul{
    width: 235px;
}

.main-menu ul ul ul{
	left: 100%;
	top: 0;
	text-align: left;
}

.main-menu ul li:hover > ul{
	visibility: visible;
	opacity: 1;
	transform: scale(1,1);
    padding: 5px 0;
}

.main-menu ul li.submenu ul li.submenu > a:after{
    content: '\f105';
    float: right;
}

.main-menu ul ul li{
	margin: 0;
	padding: 0;
}

.main-menu ul ul li a{
	color: var(--on-accent-color);
	padding: 8px 20px !important;
	transition: all 0.3s ease-in-out;
}

.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus{
	color: var(--on-accent-color);
	background-color: transparent;
	padding: 8px 20px 8px 23px !important;
}

.main-menu ul li.highlighted-menu{
    display: none;
}

.responsive-menu,
.navbar-toggle{
	display: none;
}

.responsive-menu{
	top: 0;
	position: relative;
}

.slicknav_btn{
	background: var(--accent-color);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	border-radius: 8px;
}

.slicknav_icon .slicknav_icon-bar{
	display: block;
	width: 100%;
	height: 3px;
	width: 22px;
	background-color: var(--on-accent-color);
	border-radius: 6px;
	margin: 4px auto !important;
	transition: all 0.1s ease-in-out;
}

.slicknav_icon .slicknav_icon-bar:first-child{
	margin-top: 0 !important;
}

.slicknav_icon .slicknav_icon-bar:last-child{
	margin-bottom: 0 !important;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(1){
    transform: rotate(-45deg) translate(-5px, 5px);
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(2){
    opacity: 0;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(3){
    transform: rotate(45deg) translate(-5px, -5px);
}

.slicknav_menu{
	position: absolute;
    width: 100%;
	padding: 0;
	background: var(--accent-color);
}

.slicknav_menu ul{
	margin: 5px 0;
}

.slicknav_menu ul ul{
	margin: 0;
}

.slicknav_nav .slicknav_row,
.slicknav_nav li a{
	position: relative;
	font-size: 16px;
	font-weight: 600;
	text-transform: capitalize;
	padding: 13px 20px;
	color: var(--on-accent-color);
	line-height: normal;
	margin: 0;
	border-radius: 0 !important;
	border-bottom: 1px solid var(--dark-divider-color);
	transition: all 0.3s ease-in-out;
}

.slicknav_nav li:last-child > a,
.slicknav_nav li:last-child > .slicknav_row{
	border-bottom: none;
}

.slicknav_nav a:hover,
.slicknav_nav a:focus,
.slicknav_nav .slicknav_row:hover{
	background-color: rgba(0, 0, 0, 0.15);
	color: var(--white-color);
}

.slicknav_menu ul ul li a{
    padding: 11px 20px 11px 36px;
    font-weight: 500;
    font-size: 15px;
    background-color: rgba(0, 0, 0, 0.10);
}

.slicknav_arrow{
	font-size: 0 !important;
}

.slicknav_arrow:after{
	content: '\f107';
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 14px;
	margin-left: 8px;
	color: var(--on-accent-color);
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.3s ease-out;
}

.slicknav_open > a .slicknav_arrow:after{
    transform: translateY(-50%) rotate(-180deg);
	color: var(--white-color);
}

/************************************/
/***         04. Hero css	      ***/
/************************************/

.hero{
	position: relative;
	background: url('../images/hero-bg.jpg') no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 250px 0 190px;
}

.hero::before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	background: linear-gradient(270deg, rgba(7, 35, 77, 0.00) 0%, rgba(7, 35, 77, 0.55) 60.83%);
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero.hero-video .hero-bg-video{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.hero.hero-video .hero-bg-video video{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero.hero-slider-layout{
	background: none;
	padding: 0;
}

.hero.hero-slider-layout .hero-slide{
	position: relative;
	padding: 175px 0 150px;
}

.hero.hero-slider-layout .hero-slide::before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(270deg, rgba(7, 35, 77, 0.00) 0%, rgba(7, 35, 77, 0.55) 60.83%);
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero.hero-slider-layout .hero-slide .hero-slider-image{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
}

.hero.hero-slider-layout .hero-slide .hero-slider-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero.hero-slider-layout .hero-pagination{
	position: absolute;
    bottom: 30px;
	text-align: center;
	z-index: 2;
}

.hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet{
    width: 12px;
    height: 12px;
    background: var(--dark-divider-color);
    opacity: 1;
    transition: all 0.3s ease-in-out;
    margin: 0 5px;
}

.hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet-active{
    background-color: var(--accent-color);
}

.hero .container{
	position: relative;
	z-index: 2;
}

.hero-content .section-title p{
	max-width: 730px;
}

.hero-btn{
	display: flex;
	flex-wrap: wrap;
	gap: 15px 40px;
}

.hero-body{
	display: flex;
	flex-wrap: wrap;
	gap: 20px 40px;
	border-top: 1px solid var(--dark-divider-color);
	margin-top: 40px;
	padding-top: 40px;
}

.hero-experience-box{
	width: 24%;
	display: flex;
	align-items: center;
	gap: 10px;
}

.hero-experience-box h2{
	width: 80px;
	font-size: 46px;
	color: var(--white-color);
}

.hero-experience-box p{
	color: var(--white-color);
	margin: 0;
}

.satisfy-client-box{
	display: flex;
	flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.satisfy-client-images{
	display: inline-flex;
	align-items: center;
}

.satisfy-client-image{
	position: relative;
    display: inline-block;
    margin-left: -18px;
	z-index: 1;
}

.satisfy-client-image:first-child{
	margin: 0;
}

.satisfy-client-image figure{
	display: block;
	width: 50px;
	height: 50px;
	border: 1px solid var(--white-color);
	border-radius: 50%;
}

.satisfy-client-image img{
    width: 100%;
	border-radius: 50%;
}

.satisfy-client-image.add-more{
	width: 50px;
	height: 50px;
	background-color: var(--accent-color);
	border: 1px solid var(--white-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.satisfy-client-image.add-more p{
	font-family: var(--accent-font);
	font-size: 14px;
	font-weight: 600;
	color: var(--primary-color);
	margin: 0;
}

.satisfy-client-content p{
	color: var(--white-color);
	margin: 0;
}

.satisfy-client-content h3{
	font-size: 16px;
	font-weight: 600;
	color: var(--white-color);
}

.hero-video-circle{
	text-align: right;
}

.hero-video-circle a{
	display: inline-block;
	border-radius: 50%;
	cursor: none;
}

.hero-video-circle img{
	width: 100%;
	max-width: 120px;
	border-radius: 50%;
	animation: infiniterotate 20s infinite linear;
}

@keyframes infiniterotate{
    from{
        transform: rotate(0deg);
      }
    to{
        transform: rotate(360deg);
    }
}

.hero-video-circle a:hover img{
	animation-play-state: paused;
}

/************************************/
/***   05. Scrolling Ticker css   ***/
/************************************/

.our-scrolling-ticker{
	position: relative;
	background-color: var(--secondary-color);
	padding: 25px 0;
	z-index: 1;
}

.scrolling-ticker-box{
	--gap: 30px;
	position: relative;
	display: flex;
	overflow: hidden;
	user-select: none;
	gap: var(--gap);
	align-items: center;
}

.scrolling-content{
	flex-shrink: 0;
	display: flex;
	gap: var(--gap);
	min-width: 100%;
	animation: scroll 40s linear infinite;
}

.scrolling-content span{
	display: inline-block;
	font-family: var(--accent-font);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2em;
	text-transform: capitalize;
	color: var(--primary-color);
}

.scrolling-content span img{
	width: 100%;
	max-width: 30px;
	margin-right: 30px;
}

@keyframes scroll{
	from{
		transform: translateX(0);
	}

	to{
		transform: translateX(calc(-100% - var(--gap)));
	}
}

/************************************/
/*** 	   06. About Us css 	  ***/
/************************************/

.about-us{
	background-image: url('../images/section-bg-shape-1.png');
    background-repeat: no-repeat;
    background-position: right -40px bottom 100px;
    background-size: auto;
	padding: 100px 0;
}

.about-us .section-row .section-title{
	margin-right: 15px;
}

.customer-rating-box{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 30px;
}

.customer-rating-content{
	border-right: 1px solid var(--divider-color);
	margin-right: 40px;
	padding-right: 40px;
}

.customer-rating-star{
	margin-bottom: 15px;
}

.customer-rating-star i{
	color: var(--accent-color);
	font-size: 16px;
}

.customer-rating-content h3{
	font-size: 20px;
	margin-bottom: 10px;
}

.customer-rating-content p{
	margin: 0;
}

.customer-rating-images{
	background: var(--white-color);
	box-shadow: 0px 0px 20px 0px rgba(23, 44, 69, 0.10);
	border-radius: 100px;
	padding: 10px;
}

.customer-rating-images .satisfy-client-image{
	margin-left: -10px;
}

.customer-rating-images .satisfy-client-image:first-child{
	margin-left: 0;
}

.customer-rating-images .satisfy-client-image.add-more,
.customer-rating-images .satisfy-client-image figure{
	width: 40px;
	height: 40px;
}

.about-us-boxes{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.about-image-content-box-1{
	position: relative;
	width: calc(25% - 20px);
}

.about-image{
	position: relative;
	height: 100%;
	border-radius: 20px;
	overflow: hidden;
}

.about-image::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(180deg, rgba(23, 44, 69, 0.00) 39.29%, var(--primary-color) 100%);
	width: 100%;	
	height: 100%;
}

.about-image figure{
	display: block;
	height: 100%;
}

.about-image img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 0.741;
	object-fit: cover;
}

.about-image-content{
	position: absolute;
	bottom: 40px;
	left: 40px;
	right: 40px;
	z-index: 2;
}

.video-play-button a{
	position: relative;
	background: var(--accent-color);
	border-radius: 100%;
	width: 60px;
	height: 60px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: none;
}

.video-play-button a:after,
.video-play-button a:before{
	content: '';
	position: absolute;
	top: -34%;
	left: -34%;
	width: 160%;
	height: 160%;
	border: 50px solid var(--white-color);
	opacity: 50%;
	border-radius: 50%;
	transform: scale(0.6);
	z-index: -1;
	animation: border-zooming 1.2s infinite linear;
}

.video-play-button a:after{
	animation-delay: .3s;
}

@keyframes border-zooming{
	100%{
		transform: scale(1);
		opacity: 0;
	}
}

.video-play-button a i{
	font-size: 22px;
	color: var(--primary-color);
}

.about-video-title{
	margin-top: 30px;
}

.about-video-title h3{
	font-size: 20px;
	color: var(--white-color);
}

.about-counter-box{
	width: calc(34% - 20px);
	background: var(--primary-color);
	border-radius: 20px;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: space-between;
	padding: 40px;
}

.about-counter-title{
	display: flex;
	align-items: center;
	gap: 10px;
	border-bottom: 1px solid var(--dark-divider-color);
	margin-bottom: 30px;
	padding-bottom: 30px;
}

.about-counter-title h2{
	width: 95px;
	font-size: 46px;
	color: var(--white-color);
}

.about-counter-title h3{
	font-size: 18px;
	color: var(--white-color);
}

.about-counter-content ul{
	padding: 0 0 0 20px;
	margin: 0 0 15px 0;
}

.about-counter-content ul li{
	color: var(--white-color);
	margin-bottom: 10px;
}

.about-counter-content ul li:last-child{
	margin-bottom: 0;
}

.about-counter-content p{
	color: var(--white-color);
	margin-bottom: 20px;
}

.about-counter-content .readmore-btn{
	color: var(--white-color);
}

.about-counter-content .readmore-btn::before{
	background-image: url('../images/arrow-white.svg');
}

.about-image-content-box-2{
	position: relative;
	width: calc(41% - 20px);
}

.about-image-content ul{
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.about-image-content ul li{
	display: inline-block;
	font-size: 14px;
	color: var(--white-color);
	border: 1px solid var(--dark-divider-color);
	background: var(--dark-divider-color);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	border-radius: 30px;
	padding: 7px 20px;
	transition: all 0.4s ease-in-out;
}

.about-image-content ul li:hover{
	background: var(--accent-color);
	color: var(--on-accent-color);
}

/************************************/
/*** 	 07. Our Services css	  ***/
/************************************/

.our-services{
	padding: 100px 0;
}

.service-item{
	position: relative;
	background: var(--white-color);
	border-radius: 20px;
	aspect-ratio: 1 / 1.15;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 40px 35px;
	overflow: hidden;
}

.service-item:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--white-color);
	border-radius: 20px;
	width: 100%;
	height: 100%;
	transition: all 0.5s ease-in-out;
	z-index: 1;
}

.service-item.active::before,
.service-item:hover::before{
	transform: translate(100%, -100%);
}

.service-image{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	transition: all 0.4s ease-in-out;
}

.service-item.active .service-image,
.service-item:hover .service-image{
	opacity: 1;
}

.service-image::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(180deg, rgba(23, 44, 69, 0.00) 39.29%, var(--primary-color) 100%);
	width: 100%;
	height: 100%;	
}

.service-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-body{
	position: relative;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: space-between;
    z-index: 2;
}

.service-body-header{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 30px;
}

.service-body .icon-box{
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--accent-color);
	border-radius: 50%;
}

.service-body .icon-box img{
	width: 100%;
	max-width: 24px;
}

.service-readmore-btn{
	position: absolute;
	top: 5px;
	right: 0px;
	transform: translate(-100%, 100%) rotate(90deg);
	opacity: 0;
	visibility: hidden;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.service-item.active .service-readmore-btn,
.service-item:hover .service-readmore-btn{
	transform: translate(0, 0) rotate(0);
	opacity: 1;
	visibility: visible;
}

.service-readmore-btn a{
	background: var(--primary-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
}

.service-readmore-btn a img{
	max-width: 20px;
	transition: all 0.4s ease-in-out;
}

.service-readmore-btn a:hover img{
	transform: rotate(45deg);
}

.service-content h3{
	font-size: 20px;
	margin-bottom: 10px;
	transition: all 0.4s ease-in-out;
}

.service-content h3 a{
	color: inherit;
}

.service-content p{
	margin-bottom: 0;
	transition: all 0.4s ease-in-out;
}

.service-item.active .service-content h3,
.service-item:hover .service-content h3,
.service-item.active .service-content p,
.service-item:hover .service-content p{
	color: var(--white-color);
}

.section-footer-text{
	margin-top: 30px;
	text-align: center;
}

.section-footer-text p{
	margin: 0;
}

.section-footer-text p span{
	display: inline-block;
	font-size: 14px;
	line-height: 1.1em;
	color: var(--white-color);
	background: var(--primary-color);
	border-radius: 4px;
	padding: 4px 12px;
	margin-right: 10px;
}

.section-footer-text p a{
	font-weight: 600;
	color: var(--primary-color);
	text-decoration: underline;
	transition: all 0.3s ease-in-out;
}

.section-footer-text p a:hover{
	color: var(--white-color);
}

/************************************/
/*** 	 08. Why Choose Us css	  ***/
/************************************/

.why-choose-us{
	background-image: url('../images/section-bg-shape-2.png');
    background-repeat: no-repeat;
    background-position: left -60px bottom 100px;
    background-size: auto;
	padding: 100px 0;
}

.why-choose-image-box{
	position: relative;
	margin-right: 15px;
}

.why-choose-image figure{
	display: block;
	border-radius: 20px;
}

.why-choose-image figure img{
	width: 100%;
	aspect-ratio: 1 / 1.16;
	object-fit: cover;
	border-radius: 20px;
}

.why-choose-image-box .satisfy-client-box{
	position: absolute;
	bottom: 30px;
	left: 30px;
	display: block;
	background: var(--dark-divider-color);
	border: 1px solid var(--dark-divider-color);
	backdrop-filter: blur(25px);
	-webkit-backdrop-filter: blur(25px);
	border-radius: 10px;
	padding: 25px;
}

.why-choose-image-box .satisfy-client-box .satisfy-client-content{
	margin-top: 20px;
}

.why-choose-image-box .satisfy-client-box .satisfy-client-content h3{
	font-size: 18px;
	font-weight: 600;
	color: var(--primary-color);
}

.why-choose-body{
	display: flex;
	flex-wrap: wrap;
	gap: 30px 40px;
}

.why-choose-item-box{
	width: calc(60% - 20px);
}

.why-choose-item{
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 30px;
	margin-bottom: 30px;
	display: flex;
	flex-wrap: wrap;
}

.why-choose-item:last-child{
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

.why-choose-item-header{
	width: 50%;
	display: flex;
	align-items: center;
}

.why-choose-item-header .icon-box{
	position: relative;
	height: 50px;
	width: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--accent-color);
	border-radius: 50%;
	margin-right: 15px;
}

.why-choose-item-header .icon-box::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: var(--primary-color);
	border-radius: 50%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.why-choose-item:hover .why-choose-item-header .icon-box::before{
	transform: scale(1);
}

.why-choose-item-header .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.why-choose-item:hover .why-choose-item-header .icon-box img{
	filter: brightness(0) invert(1);
}

.why-choose-item-title{
	width: calc(100% - 65px);
}

.why-choose-item-title h3{
	font-size: 18px;
	line-height: 1.3em;
}

.why-choose-item-content{
	width: calc(50% - 15px);
	border-left: 1px solid var(--divider-color);
	padding-left: 15px;
	margin-left: 15px;
}

.why-choose-item-content p{
	margin-bottom: 0;
}

.why-choose-body-image{
	width: calc(40% - 20px);
}

.why-choose-btn{
	margin-top: 60px;
}

.why-choose-body-image figure{
	display: block;
	border-radius: 20px;
}

.why-choose-body-image img{
	width: 100%; 
	aspect-ratio: 1 / 1.01;
	object-fit: cover;
	border-radius: 20px;
}

/************************************/
/*** 	  09. What We Do css	  ***/
/************************************/

.what-we-do{
	background-image: url('../images/section-bg-shape-3.png');
    background-repeat: no-repeat;
    background-position: right -20px bottom -10px;
    background-size: auto;
	padding: 100px 0;
}

.what-we-contant{
	margin-right: 15px;
}

.what-we-counter-box{
	max-width: 300px;
	margin-top: 60px;
}

.what-we-counter-box h2{
	font-size: 80px;
    line-height: 1em;
    font-weight: 600;
    color: var(--primary-color);
    background: var(--accent-color);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-stroke: 2px transparent;
	border-bottom: 1px solid var(--dark-divider-color);
	padding-bottom: 20px;
	margin-bottom: 20px;
}

.what-we-counter-box h3{
	font-size: 20px;
	color: var(--white-color);
	margin-bottom: 5px;
}

.what-we-counter-box p{
	color: var(--white-color);
	margin: 0;
}

.what-we-item{
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--dark-divider-color);
	margin-bottom: 40px;
	padding-bottom: 40px;
}

.what-we-item:last-child{
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

.what-we-item .icon-box{
	position: relative;
	height: 50px;
	width: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--accent-color);
	border-radius: 50%;
	margin-right: 20px;
}

.what-we-item .icon-box::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: var(--white-color);
	border-radius: 50%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.what-we-item:hover .icon-box::before{
	transform: scale(1);
}

.what-we-item .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	z-index: 1;
}

.what-we-content{
	width: calc(100% - 70px);
}

/* HIRI paired-colour: default .what-we-content text to navy / body-grey
   so it reads on any light section background. Labrix originally hard-
   coded white because they only used .what-we-content inside .dark-section
   (navy); we now use the same component on plain .what-we-do and
   .what-we-do.bg-section (both light) on /research-themes/. The
   .dark-section override below keeps the home page (which IS on navy)
   readable. */
.what-we-content h3{
	font-size: 20px;
	color: var(--primary-color);
	margin-bottom: 10px;
}

.what-we-content p{
	color: var(--text-color);
	margin: 0;
}

.dark-section .what-we-content h3,
.dark-section .what-we-content p{
	color: var(--white-color);
}

/************************************/
/*** 	  10. Case Study css	  ***/
/************************************/

.case-study{
	background-image: url('../images/section-bg-shape-2.png');
    background-repeat: no-repeat;
    background-position: right -20px bottom 120px;
    background-size: auto;
	padding: 100px 0 60px;
}

.case-study-item{
	height: calc(100% - 40px);
	margin-bottom: 40px;
}

.case-study-image{
	position: relative;
	border-radius: 20px;
	margin-bottom: 20px;
	overflow: hidden;
}

.case-study-image::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	transform: scale(0);
    background: var(--primary-color);
	border-radius: 20px;
	opacity: 40%;
    width: 100%;
    height: 100%;
	transition: all 0.4s ease-in-out;
    z-index: 1;
}

.case-study-item:hover .case-study-image::before{
	transform: scale(1);
}

.case-study-image figure{
	display: block;
}

.case-study-image figure img{
	width: 100%;
	aspect-ratio: 1 / 0.77;
	object-fit: cover;
	border-radius: 20px;
	transition: all 0.4s ease-in-out;
}

.case-study-item:hover .case-study-image figure img{
	transform: scale(1.1);
}

.case-study-btn{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0);
	opacity: 0;
	visibility: hidden;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.case-study-item:hover .case-study-btn{
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, -50%) scale(1);
}

.case-study-btn a{
	background: var(--accent-color);
	border-radius: 50%;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.4s ease-in-out;
}

.case-study-btn a:hover{
	background: var(--white-color);
}

.case-study-btn a img{
	width: 100%;
	max-width: 24px;
	transition: 0.4s ease-in-out;
}

.case-study-btn a:hover img{
	transform: rotate(45deg);
}

.case-study-content h2{
	font-size: 20px;
	line-height: 1.4em;
}

.case-study-content h2 a{
	color: inherit;
}

/************************************/
/*** 	  11. Intro Video css	  ***/
/************************************/

.intro-video{
	position: relative;
	overflow: hidden;
}

.intro-video .container-fluid{
	padding: 0;
}

.intro-video-box{
    position: relative;
	text-align: center;
	align-content: center;
    height: 800px;
}

.intro-video-box{
	position: relative;
}

.intro-video-image{
	position: absolute;
    top: 0;
    left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.intro-video-image::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--primary-color);
	opacity: 60%;
	width: 100%;
	height: 100%;
}

.intro-video-image figure{
	width: 100%;
	height: 100%;
	display: block;
    border-radius: 20px;
}

.intro-video-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.video-play-border-button{
	position: relative;
    z-index: 1;
}

.video-play-border-button a{
	position: relative;
	background: transparent;
	border: 1px solid var(--white-color);
	border-radius: 100%;
	width: 100px;
	height: 100px;
	color: var(--white-color);
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: none;
	transition: all 0.4s ease-in-out;
}

.video-play-border-button a:hover{
	font-size: 20px;
	letter-spacing: 0.05em;
}

/************************************/
/*** 	 12. How It Work css	  ***/
/************************************/

.how-it-work{
	background-image: url('../images/section-bg-shape-4.png');
    background-repeat: no-repeat;
    background-position: left -30px bottom 100px;
    background-size: auto;
	padding: 100px 0;
}

.how-work-image-box{
	position: relative;
	margin-right: 15px;
}

.how-work-image figure{
	display: block;
	border-radius: 20px;
}

.how-work-image figure img{
	width: 100%;
	aspect-ratio: 1 / 1.257;
	object-fit: cover;
	border-radius: 20px;
}

.how-work-image-box .satisfy-client-box{
    position: absolute;
    bottom: 40px;
    left: 40px;
    display: block;
	width: 290px;
    background: var(--dark-divider-color);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 20px;
    padding: 25px;
	z-index: 1;
}

.how-work-image-box .satisfy-client-box .satisfy-client-content{
	margin-top: 40px;
}

.how-work-image-box .satisfy-client-box .satisfy-client-content h3{
	font-size: 20px;
	color: var(--primary-color);
	margin-bottom: 10px;
}

.how-work-image-box .satisfy-client-box .satisfy-client-content p{
	color: var(--primary-color);
}

.work-steps-item{
	display: flex;
	align-items: start;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 40px;
	padding-bottom: 40px;
}

.work-steps-item:last-child{
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

.work-step-no{
	display: inline-block;
	background: var(--accent-color);
	border-radius: 6px;
	padding: 7px 16px;
	margin-right: 25px;
	transition: all 0.4s ease-in-out;
}

.work-steps-item:hover .work-step-no{
	background: var(--primary-color);
}

.work-step-no h3{
	font-family: var(--default-font);
	font-size: 16px;
	font-weight: 500;
	transition: all 0.4s ease-in-out;
}

.work-steps-item:hover .work-step-no h3{
	color: var(--white-color);
}

.work-step-content{
	width: calc(100% - 125px);
}

.work-step-content h3{
	font-size: 20px;
	margin-bottom: 10px;
}

.work-step-content p{
	margin: 0;
}

/************************************/
/*** 	  13. Our Pricing css	  ***/
/************************************/

.our-pricing{
	background-image: url('../images/section-bg-shape-5.png');
	background-repeat: no-repeat;
	background-position: bottom -20px left -20px;
	background-size: auto;
	padding: 100px 0;
}

.our-pricing-content{
	position: sticky;
	top: 50px;
	margin-right: 20px;
}

.our-pricing-btn .btn-default{
	background: var(--white-color);
}

.pricing-item{
	background: var(--white-color);
	border-radius: 20px;
	margin-bottom: 30px;
	padding: 40px;
}

.pricing-item:last-child{
	margin-bottom: 0;
}

.pricing-header{
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 30px;
	padding-bottom: 30px;
}

.pricing-header h3{
	font-size: 20px;
}

.pricing-body{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.pricing-content{
	width: calc(55% - 15px);
}

.pricing-list{
	width: calc(45% - 15px);
}

.pricing-price{
	margin-bottom: 40px;
}

.pricing-price h2{
	font-size: 34px;
	margin-bottom: 20px;
}

.pricing-price h2 sub{
	font-size: 20px;
	text-transform: capitalize;
	bottom: 0;
}

.pricing-price p{
	margin-bottom: 0;
}

.pricing-list ul{
	list-style: disc;
	margin: 0;
	padding: 0 0 0 20px;
}

.pricing-list ul li{
	margin-bottom: 20px;
	line-height: 1.5em;
}

.pricing-list ul li:last-child{
	margin-bottom: 0;
}

.pricing-list ul li::marker{
	color: var(--primary-color);
}

/************************************/
/*** 	   14. Our FAQs css 	  ***/
/************************************/

.our-faqs{
	background-image: url('../images/section-bg-shape-2.png');
    background-position: right -20px bottom 130px;
    background-repeat: no-repeat;
    background-size: auto;
	padding: 100px 0;
}

.faqs-content{
	position: sticky;
	top: 50px;
}

.faq-accordion{
	background: var(--secondary-color);
	border-radius: 20px;
	margin-left: 20px;
	padding: 40px;
}

.faq-accordion .accordion-item{
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 30px;
    padding-bottom: 30px;
}

.faq-accordion .accordion-item:last-child{
    margin-bottom: 0;
	padding-bottom: 0;
    border-bottom: none;
}

.faq-accordion .accordion-header .accordion-button{
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2em;
    color: var(--primary-color);
    padding-right: 25px;
    transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-button:not(.collapsed){
    padding-bottom: 20px;
}

.faq-accordion .accordion-item .accordion-button::after,
.faq-accordion .accordion-item .accordion-button.collapsed::after{
	content: '\2b';
	font-family: "FontAwesome";
	position: absolute;
	right: 0;
	top: 0;
	transform: rotate(45deg);
	font-size: 18px;
	font-weight: 400;
    line-height: normal;
    color: var(--primary-color);
	transition: all 0.4s ease-in-out;
}

.faq-accordion .accordion-item .accordion-button.collapsed::after{
	transform: rotate(0deg);
}

.faq-accordion .accordion-item .accordion-body{
    padding-right: 25px;
}

.faq-accordion .accordion-item:last-child .accordion-body{
    padding-bottom: 0;
}

.faq-accordion .accordion-item .accordion-body p{
    margin-bottom: 15px;
}

.faq-accordion .accordion-item .accordion-body p:last-child{
    margin-bottom: 0;
}

/************************************/
/***   15. Our Testimonials css	  ***/
/************************************/

.our-testimonials{
	padding: 100px 0;
}

.testimonial-slider .swiper-wrapper{
	cursor: none;
}

.testimonial-item{
	display: flex;
	flex-wrap: wrap;
	border-radius: 20px;
	overflow: hidden;
}

.author-image{
	position: relative;
	width: 42%;
}

.author-image figure{
	display: block;
	height: 100%;
}

.author-image figure::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--primary-color);
	opacity: 40%;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.author-image figure img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 1 / 1.28;
	transition: all 0.4s ease-in-out;
}

.testimonial-item:hover .author-image figure img{
	transform: scale(1.1);
}

.author-image .video-play-button{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}

.testimonial-content{
	width: 58%;
	background: var(--white-color);
	align-content: center;
	padding: 30px;
}

.testimonial-quote{
	margin-bottom: 30px;
}

.testimonial-quote img{
	width: 100%;
	max-width: 32px;
}

.testimonial-info{
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.testimonial-info p{
	margin-bottom: 0;
}

.author-content h3{
	font-size: 20px;
	margin-bottom: 10px;
}

.author-content p{
	margin-bottom: 0;
}

.testimonial-pagination{
	text-align: center;
	margin-top: 60px;
}

.testimonial-pagination .swiper-pagination-bullet{
	position: relative;
    height: 10px;
    width: 10px;
    background: var(--dark-divider-color);
	border-radius: 100px;
    margin: 0 3px;
    opacity: 1;
    transition: all 0.4s ease-in-out;
}

.testimonial-pagination .swiper-pagination-bullet-active{
    width: 30px;
    background-color: var(--white-color);
}

/************************************/
/*** 	 	16. Our Blog css	  ***/
/************************************/

.our-blog{
	position: relative;
	padding: 100px 0 70px;
	z-index: 1;
}

.post-item{
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.post-featured-image{
	margin-bottom: 20px;
}

.post-featured-image a{
    cursor: none;
    display: block;
	border-radius: 20px;
    overflow: hidden;
}

.post-featured-image figure{
	display: block;
}

.post-featured-image img{
	width: 100%;
    aspect-ratio: 1 / 0.71;
    object-fit: cover;
    transition: all 0.5s ease-in-out;
}

.post-item:hover .post-featured-image img{
	transform: scale(1.1);
}

.post-item-content{
	margin-bottom: 20px;
}

.post-item-content h2{
    font-size: 18px;
	line-height: 1.4em;
}

.post-item-content h2 a{
	display: inline-block;
    color: inherit;
}

/************************************/
/*** 	 	17. Footer css		  ***/
/************************************/

.main-footer{
	padding: 100px 0 0;
	margin-bottom: 50px;
}

.about-footer{
	margin-right: 30px;
}

.footer-logo{
	margin-bottom: 20px;
}

.footer-logo img{
	width: 100%;
	max-width: 130px;
}

.about-footer-content{
	margin-bottom: 30px;
}

.about-footer-content p{
	color: var(--white-color);
	margin-bottom: 0;
}

.footer-newsletter-box h3{
	font-size: 20px;
	color: var(--white-color);
	margin-bottom: 20px;
}

.footer-newsletter-form .form-group{
	position: relative;
    display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.footer-newsletter-form .form-group:last-child{
	margin-bottom: 0;
}

.footer-newsletter-form .form-group .form-control{
	width: 100%;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2em;
	color: var(--white-color);
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--dark-divider-color);
	border-radius: 0;
	outline: none;
	box-shadow: none;
	padding: 8px 40px 18px 0;
}

.footer-newsletter-form .form-group .form-control::placeholder{
	color: var(--white-color);
}

.footer-newsletter-form .form-group .newsletter-btn{
	position: absolute;
    top: 0;
    right: 0;
	width: 30px;
	height: 30px;
    background: var(--accent-color);
	border: none;
	border-radius: 4px;
    padding: 0;
	transition: all 0.3s ease-in-out;
}

.footer-newsletter-form .form-group .newsletter-btn:hover{
	background: var(--white-color);
}

.footer-newsletter-form .form-group .newsletter-btn img{
	width: 18px;
	transition: all 0.3s ease-in-out;
}

.footer-newsletter-form .form-group .newsletter-btn:hover img{
    transform: rotate(45deg);
}

.footer-newsletter-form .form-group input[type="checkbox" i]{
	width: 20px;
	height: 20px;
	box-shadow: none;
	margin-right: 10px;
}

.footer-newsletter-form .form-group .form-label{
	font-size: 14px;
	color: var(--white-color);
	margin: 0;
}

.footer-newsletter-form .form-group .form-label a{
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	transition: all 0.3s ease-in-out;
}

.footer-newsletter-form .form-group .form-label a:hover{
	color: var(--accent-color);
}

.footer-links-box{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
	margin: 0 1.563vw;
}

.footer-links h3{
    font-size: 20px;
    color: var(--white-color);
    text-transform: capitalize;
    margin-bottom: 20px;
}

.footer-links ul{
    list-style: disc;
    margin: 0;
    padding-left: 20px;
}

.footer-links ul li{
    color: var(--white-color);
	line-height: 1.5em;
	text-transform: capitalize;
	margin-bottom: 15px;
}

.footer-links ul li:last-child{
	margin-bottom: 0;
}

.footer-links ul li::marker{
    color: var(--accent-color);
	transition: all 0.3s ease-in-out;
}

.footer-links ul li:hover::marker{
	color: var(--white-color);
}

.footer-links ul li a{
	color: inherit;
	transition: all 0.3s ease-in-out;
}

.footer-links ul li a:hover{
    color: var(--accent-color);
}

.footer-working-hour-box ul{
	list-style: none;
	padding: 0;
}

.footer-working-hour-box ul li{
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

.footer-copyright-text{
	text-align: center;
	border-top: 1px solid var(--dark-divider-color);
	margin-top: 60px;
	padding: 40px 0 60px;
}

.footer-copyright-text p{
	color: var(--white-color);
	margin-bottom: 0;
}

/************************************/
/*** 	 18. About Us Page css	  ***/
/************************************/

.page-header{
    position: relative;
    background: url('../images/page-header-bg.jpg') no-repeat;
    background-position: center center;
    background-size: cover;
	padding: 225px 0 115px;
    overflow: hidden;
}

.page-header::before{
   content: '';
    position: absolute;
    top: 0;
    right: 0;
	bottom: 0;
	left: 0;
    background: linear-gradient(270deg, rgba(23, 44, 69, 0.80) 0%, rgba(23, 44, 69, 0.80) 60.83%);
	height: 100%;
	width: 100%;
}

.page-header-box{
    position: relative;
	text-align: center;
    z-index: 2;
}

.page-header-box h1{
	display: inline-block;
	font-size: 60px;
	font-weight: 400;
	color: var(--white-color);
	cursor: none;
    margin-bottom: 10px;
}

.page-header-box ol{
	margin: 0;
	padding: 0;
	justify-content: center;
}

.page-header-box ol li.breadcrumb-item{
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5em;
	text-transform: capitalize;
	color: var(--white-color);
}

.page-header-box ol li.breadcrumb-item a{
    color: inherit;
}

.page-header-box ol li.breadcrumb-item.active{
    color: var(--white-color);
}

.page-header-box ol .breadcrumb-item+.breadcrumb-item::before{
    color: var(--white-color);
}

.our-approach{
	padding: 100px 0;
}

.approach-image{
	height: 100%;
	margin-right: 15px;
}

.approach-image figure{
	display: block;
	height: 100%;
	border-radius: 20px;
}

.approach-image img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1.061;	
	object-fit: cover;
	border-radius: 20px;
}

.approach-content{
	background-color: var(--white-color);
	border-radius: 20px;
	padding: 40px;
}

.mission-vision-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-bottom: 40px;
}

.mission-vision-item{
	width: calc(50% - 15px);
}

.mission-vision-item .icon-box{
	position: relative;
	width: 50px;
	height: 50px;
	background-color: var(--accent-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 40px;
}

.mission-vision-item .icon-box:before{
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--primary-color);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
}

.mission-vision-item:hover .icon-box:before{
	transform: scale(1);
}

.mission-vision-item .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.mission-vision-item:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.mission-vision-content h3{
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 15px;
}

.mission-vision-content p{
	margin: 0;
}

.our-core-value{
	background-image: url('../images/section-bg-shape-6.png');
    background-repeat: no-repeat;
    background-position: right -20px top 100px;
    background-size: auto;
	padding: 100px 0;
}

.value-image-box-1{
	padding-right: 80px;
}

.value-image-box-1 figure{
	display: block;
	border-radius: 20px;
}

.value-image-box-1 img{
	width: 100%;
	aspect-ratio: 1/0.528;
	object-fit: cover;
	border-radius: 20px;
}

.value-image-box-2{
	display: flex;
	align-items: end;
}

.about-experience-box{
	width: 220px;
	background-color: var(--primary-color);
	border-radius: 20px;
	padding: 30px;
	margin: 20px 20px 0 0;
}

.about-experience-box .icon-box{
	position: relative;
	width: 60px;
	height: 60px;
	background-color: var(--accent-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.about-experience-box .icon-box:before{
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--white-color);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
}

.about-experience-box:hover .icon-box:before{
	transform: scale(1);
}

.about-experience-box .icon-box img{
	position: relative;
	width: 100%;
	max-width: 30px;
	z-index: 1;
}

.experience-box-content h2{
	color: var(--white-color);
	font-size: 46px;
	margin-bottom: 5px;
}

.experience-box-content p{
	color: var(--white-color);
	font-weight: 500;
	text-transform: capitalize;
	margin: 0;
}

.value-img-2{
	width: calc(100% - 240px);
	margin-top: -120px;
}

.value-img-2 figure{
	border: 10px solid var(--white-color);
	border-radius: 20px;
}

.value-img-2 img{
    width: 100%;
	aspect-ratio: 1 / 0.905;
    object-fit: cover;
}

.core-value-content{
	margin-left: 15px;
}

.our-experiment-item{
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 40px;
	padding-bottom: 40px;
}

.our-experiment-item:last-child{
	margin-bottom: 0px;
	padding-bottom: 0px;
	border-bottom: none;
}

.our-experiment-item h3{
	position: relative;
	font-size: 20px;
	text-transform: capitalize;
	padding-left: 30px;
	margin-bottom: 15px;
}

.our-experiment-item h3:before{
	content: '\f058';
    font-family: 'Font Awesome 6 Free';
    position: absolute;
    font-weight: 900;
    font-size: 18px;
    color: var(--primary-color);
    top: 0;
    left: 0;
}

.our-experiment-item p{
	margin: 0;
}

.our-team{
	padding: 100px 0 70px;
}

.team-item{
    height: calc(100% - 30px);
    margin-bottom: 30px;
}

.team-image{
	position: relative;
	margin-bottom: 20px;
}

.team-image a,
.team-image figure{
	display: block;
	cursor: none;
	border-radius: 20px;
	overflow: hidden;
}

.team-image img{
    width: 100%;
	aspect-ratio: 1 / 1.356;
    object-fit: cover;
	transition: all 0.4s ease-in-out;
}

.team-item:hover .team-image img{
	transform: scale(1.07);
}

.team-social-icon{
	position: absolute;
	right: 40px;
	bottom: 0;
	left: 40px;
	opacity: 0;
	visibility: hidden;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.team-item:hover .team-social-icon{
	bottom: 40px;
	opacity: 1;
	visibility: visible;
}

.team-social-icon ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 15px;
}

.team-social-icon ul li a{
	width: 36px;
	height: 36px;
	background: var(--primary-color);
	color: var(--white-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.4s ease-in-out;
}

.team-social-icon ul li a:hover{
	background: var(--accent-color);
	color: var(--on-accent-color);
}

.team-social-icon ul li a i{
	font-size: 18px;
	color: inherit;
}

.team-content{
	text-align: center;
}

.team-content h3{
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 5px;
}

.team-content h3 a{
	color: inherit;
}

.team-content p{
	text-transform: capitalize;
	margin: 0;
}

/************************************/
/*** 	 19. Services Page css	  ***/
/************************************/

.page-services{
	padding: 100px 0 70px;
}

/************************************/
/*** 	 20. Service Single css	  ***/
/************************************/

.page-service-single{
	padding: 100px 0;
}

.page-single-sidebar{
	position: sticky;
	top: 30px;
	margin-right: 15px;
}

.page-category-list{
	border-radius: 20px;
    margin-bottom: 60px;
	overflow: hidden;
}

.page-category-list h3{
    font-size: 20px;
    color: var(--white-color);
    text-transform: capitalize;
	background: var(--primary-color);
    padding: 25px 40px;
}

.page-category-list ul{
	background: var(--white-color);
    list-style: none;
    margin: 0;
    padding: 30px 40px;
}

.page-category-list ul li{
	line-height: 1.5em;
	font-weight: 500;
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.page-category-list ul li:last-child{
    margin: 0;
    padding: 0;
    border-bottom: none;
}

.page-category-list ul li a{
    position: relative;
    display: block;
    text-transform: capitalize;
    color: var(--text-color);
    padding-right: 25px;
    transition: all 0.4s ease-in-out;
}

.page-category-list ul li:hover a{
    color: var(--primary-color);
}

.page-category-list ul li a::before{
	content: '';
    position: absolute;
    top: 2px;
    right: 0;
	background: url('../images/arrow-primary.svg') no-repeat;
	background-size: cover;
	background-position: right center;
    width: 20px;
    height: 20px;
	transition: all 0.4s ease-in-out;
}

.page-category-list ul li a:hover::before{
	transform: rotate(45deg);
}

.sidebar-cta-box{
	position: relative;
	background: url('../images/sidebar-cta-bg.jpg') no-repeat;
	background-position: center center;
	background-size: cover;
	border-radius: 20px;    
	padding: 40px;
    overflow: hidden;
}

.sidebar-cta-box:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
    background: var(--primary-color);
	opacity: 60%;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.sidebar-cta-logo,
.sidebar-cta-content{
	position: relative;
	z-index: 1;
}

.sidebar-cta-logo{
	margin-bottom: 70px;
}

.sidebar-cta-logo img{
	width: 100%;
	max-width: 130px;
}

.sidebar-cta-content P{
	color: var(--white-color);
	margin-bottom: 20px;
}

.page-single-image{
    margin-bottom: 40px;
}

.page-single-image figure{
    display: block;
    border-radius: 20px;
}

.page-single-image img{
    width: 100%;
    aspect-ratio: 1 / 0.581;
    object-fit: cover;
    border-radius: 20px;
}

.service-entry{
    margin-bottom: 60px;
}

.service-entry p{
    margin-bottom: 20px;
}

.service-entry p:last-child{
    margin-bottom: 0;
}

.service-entry h2{
	font-size: 46px;
    font-weight: 400;
    letter-spacing: -0.02em;
	margin-bottom: 20px;
}

.service-entry ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.service-entry ul li{
	position: relative;
	line-height: 1.5em;
	padding-left: 30px;
	margin-bottom: 15px;
}

.service-entry ul li:last-child{
	margin-bottom: 0;
}

.service-entry ul li::before{
	content: '\f058';
	font-family: 'Font Awesome 6 Free';
	position: absolute;
	top: 0;
	left: 0;
	font-size: 18px;
	font-weight: 900;
	color: var(--primary-color);
}

.service-discover-box,
.service-result-box,
.service-partnership-box{
	margin-top: 60px;
}

.service-discover-list{
	margin-top: 40px;
}

.service-discover-list ul{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.service-discover-list ul li{
	width: calc(50% - 15px);
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	padding: 20px 15px 20px 45px;
	margin: 0;
}

.service-discover-list ul li::before{
	top: 20px;
	left: 20px;
}

.service-discover-image-content{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 40px;
}

.service-discover-image,
.service-discover-content{
	width: calc(50% - 15px);
}

.service-discover-image figure{
	display: block;
	border-radius: 20px;
}

.service-discover-image img{
	width: 100%;
	aspect-ratio: 1 / 0.68;
	object-fit: cover;
	border-radius: 20px;
}

.service-result-box ul{
	margin-top: 40px;
}

.service-result-list{
	background: var(--secondary-color);
	border-radius: 20px;
	margin-top: 40px;
	padding: 40px;
}

.service-result-item{
	display: flex;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 40px;
	padding-bottom: 40px;
}	

.service-result-item:last-child{
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.service-result-item .icon-box{
	position: relative;
	width: 60px;
	height: 60px;
	background: var(--primary-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 20px;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
}

.service-result-item:hover .icon-box{
	background: var(--white-color);
}

.service-result-item .icon-box img{
	width: 100%;
	max-width: 30px;
	transition: all 0.4s ease-in-out;
}

.service-result-item:hover .icon-box img{
	filter: brightness(0) invert(0);
}

.service-result-content{
	width: calc(100% - 80px);
}

.service-result-content h3{
	font-size: 20px;
	margin-bottom: 10px;
}

.service-result-content p{
	margin-bottom: 0;
}

.service-partnership-content{
	margin-top: 40px;
}

.service-partnership-content .our-experiment-item{
	margin-bottom: 30px;
	padding: 0;
	border: none;
}

.service-partnership-image{
	margin-top: 40px;
}

.service-partnership-image figure{
	display: block;
	border-radius: 20px;
}

.service-partnership-image img{
	width: 100%;
	aspect-ratio: 1 / 0.395;
	object-fit: cover;
	border-radius: 20px;
}

.page-single-faqs .faq-accordion{
	margin: 0;
}

/************************************/
/*** 	 21. Blog Archive css	  ***/
/************************************/

.page-blog{
	padding: 100px 0;
}

.page-blog .post-item{
	height: calc(100% - 40px);
	margin-bottom: 40px;
}

.page-pagination{
    margin-top: 30px;
    text-align: center;
}

.page-pagination ul{
    justify-content: center;
    padding: 0;
    margin: 0;
}

.page-pagination ul li a,
.page-pagination ul li span{
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    background: var(--secondary-color);
    color: var(--primary-color);
	border-radius: 10px;
    width: 40px;
    height: 40px;
    margin: 0 5px;
    font-weight: 600;
	line-height: 1em;
    transition: all 0.3s ease-in-out;
}

.page-pagination ul li.active a, 
.page-pagination ul li a:hover{
    background: var(--primary-color);
    color: var(--white-color);
}

/************************************/
/*** 	  22. Blog Single css	  ***/
/************************************/

.page-single-post{
	padding: 100px 0;
}

.post-single-meta{
	margin-top: 5px;
}

.post-single-meta ol li{
	font-size: 18px;
	color: var(--white-color);
	margin-right: 15px;
}

.post-single-meta ol li:last-child{
	margin-right: 0;
}

.post-single-meta ol li i{
    font-size: 18px;
    color: var(--white-color);
    margin-right: 5px;
}

.post-image{
	position: relative;
	margin-bottom: 30px;
}

.post-image figure{
	display: block;	
	border-radius: 20px;
	overflow: hidden;
}

.post-image img{
	width: 100%;
	aspect-ratio: 1 / 0.50;
	object-fit: cover;
	border-radius: 20px;
}

.post-content{
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}

.post-entry{
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 30px;
    margin-bottom: 30px;
}

.post-entry:after{
    content: '';
    display: block;
    clear: both;
}

.post-entry a{
    color: var(--accent-color);
}

.post-entry h1,
.post-entry h2,
.post-entry h3,
.post-entry h4,
.post-entry h5,
.post-entry h6{
	font-weight: 600;
	line-height: 1.2em;
	margin: 0 0 0.435em;
}

.post-entry h1{
	font-size: 60px;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.post-entry h2{
	font-size: 46px;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.post-entry h3{
	font-size: 40px;
}

.post-entry h4{
	font-size: 30px;
}

.post-entry h5{
	font-size: 24px;
}

.post-entry h6{
	font-size: 20px;
}

.post-entry p{
	margin-bottom: 20px;
}

.post-entry p:last-child{
	margin-bottom: 0;
}

.post-entry p strong{
	color: var(--primary-color);
	font-size: 18px;
	font-weight: 600;
}

.post-entry ol{
    margin: 0 0 30px;
}

.post-entry ul{
	padding: 0;
	margin: 20px 0 20px;
	padding-left: 20px;
}

.post-entry ol li,
.post-entry ul li{
    position: relative;
	font-size: 16px;
    font-weight: 500;
    line-height: 1.6em;
    color: var(--text-color);
    margin-bottom: 15px;
}

.post-entry ul li:last-child{
	margin-bottom: 0;
}

.post-entry ul ul,
.post-entry ul ol,
.post-entry ol ol,
.post-entry ol ul{
    margin-top: 20px;
    margin-bottom: 0;
}

.post-entry ul ul li:last-child,
.post-entry ul ol li:last-child,
.post-entry ol ol li:last-child,
.post-entry ol ul li:last-child{
    margin-bottom: 0;
}

.post-entry blockquote{
	background: url('../images/icon-blockquote.svg'), var(--secondary-color);
	background-repeat: no-repeat;
	background-position: 30px 30px;
    background-size: 45px;
	border-radius: 20px;
    padding: 30px 30px 30px 90px;
    margin-bottom: 30px;
}

.post-entry blockquote p{
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4em;
	color: var(--primary-color);
}

.post-entry blockquote p:last-child{
	margin-bottom: 0;
}

.tag-links{
	font-family: var(--accent-font);
    font-size: 20px;
	font-weight: 500;
    text-transform: capitalize;
	color: var(--primary-color);
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
}

.post-tags .tag-links a{
    display: inline-block;
	font-family: var(--default-font);
    font-size: 16px;
    font-weight: 700;
    text-transform: capitalize;
    line-height: 1em;
	background: var(--accent-color);
    color: var(--on-accent-color);
	border-radius: 10px;
    padding: 12px 20px;
	transition: all 0.3s ease-in-out;
}

.post-tags .tag-links a:hover{
	background: var(--primary-color);
	color: var(--accent-color);
}

.post-social-sharing{
    text-align: right;
}

.post-social-sharing ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.post-social-sharing ul li{
    display: inline-block;
    margin-right: 10px;
}

.post-social-sharing ul li:last-child{
	margin-right: 0;
}

.post-social-sharing ul li a{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
	background: var(--accent-color);
    color: var(--on-accent-color);
	border-radius: 10px;
    width: 40px;
    height: 40px;
    transition: all 0.3s ease-in-out;
}

.post-social-sharing ul li:hover a{
	background: var(--primary-color);
	color: var(--accent-color);
}

.post-social-sharing ul li a i{
    font-size: 18px;
    color: inherit;
}

/************************************/
/*** 	23. Case Study Page css	  ***/
/************************************/

.page-case-study{
	padding: 100px 0 70px;
}

/************************************/
/***   24. Case Study Single css  ***/
/************************************/

.page-case-study-single{
	padding: 100px 0;
}

.case-study-category-list ul li{
	display: flex;
	width: 100%;
	justify-content: space-between;
	color: var(--primary-color);
	font-weight: 500;
}

.case-study-category-list ul li span{
	width: 68%;
	color: var(--text-color);
	font-weight: 400;
}

.case-study-entry{
    margin-bottom: 60px;
}

.case-study-entry p{
    margin-bottom: 20px;
}

.case-study-entry p:last-child{
    margin-bottom: 0;
}

.case-study-entry h2{
	font-size: 46px;
    font-weight: 400;
    letter-spacing: -0.02em;
	margin-bottom: 20px;
}

.case-study-entry ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.case-study-entry ul li{
	position: relative;
	line-height: 1.5em;
	padding-left: 30px;
	margin-bottom: 15px;
}

.case-study-entry ul li:last-child{
	margin-bottom: 0;
}

.case-study-entry ul li::before{
	content: '\f058';
	font-family: 'Font Awesome 6 Free';
	position: absolute;
	top: 0;
	left: 0;
	font-size: 18px;
	font-weight: 900;
	color: var(--primary-color);
}

.empowering-agriculture-box,
.field-trials-box,
.shaping-future-box{
	margin-top: 60px;
}

.empowering-box-list{
	margin-top: 40px;
}

.empowering-box{
	background: var(--secondary-color);
	border-radius: 20px;
	margin-bottom: 40px;
	padding: 40px;
}

.empowering-box:last-child{
	margin-bottom: 0;
}

.empowering-item{
	display: flex;
	margin-bottom: 40px;
}

.empowering-item .icon-box{
	margin-right: 20px;
}

.empowering-item .icon-box img{
	width: 100%;
	max-width: 60px;
}

.empowering-item-content{
	width: calc(100% - 80px);
}

.empowering-item-content h3{
	font-size: 20px;
	margin-bottom: 10px;
}

.field-trials-step-list{
	display: flex;
	flex-wrap: wrap;
	gap: 40px 30px;
	margin-top: 40px;
}

.field-trials-step-item{
	width: calc(50% - 15px);
	display: flex;
}

.field-trials-step-no{
	position: relative;
	width: 60px;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--secondary-color);
	border-radius: 50%;
	margin-right: 20px;
}

.field-trials-step-no::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: var(--primary-color);
	border-radius: 50%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.field-trials-step-item:hover .field-trials-step-no::before{
	transform: scale(1);
}

.field-trials-step-no h3{
	position: relative;
	font-size: 24px;
	transition: all 0.3s ease-in-out;
	z-index: 1;
}

.field-trials-step-item:hover .field-trials-step-no h3{
	color: var(--white-color);
}

.field-trials-content{
	width: calc(100% - 80px);
}

.field-trials-content h3{
	font-size: 20px;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.shaping-future-image-content{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	padding: 40px;
	margin-top: 40px;
}

.shaping-future-content,
.shaping-future-image{
	width: calc(50% - 15px);
}

.shaping-future-item{
	display: flex;
	margin-top: 30px;
}

.shaping-future-item h3{
	width: calc(48% - 15px);
	font-size: 20px;
	border-right: 1px solid var(--divider-color);
	margin-right: 15px;
	padding-right: 15px;
}

.shaping-future-item p{
	width: 52%;
}

.shaping-future-image figure{
	display: block;
	border-radius: 20px;
}

.shaping-future-image img{
	width: 100%;
	aspect-ratio: 1 / 0.795;
	object-fit: cover;
	border-radius: 20px;
}

/************************************/
/*** 	   25. Team Page css	  ***/
/************************************/

.page-team{
	padding: 100px 0 70px;
}

/************************************/
/*** 	 26. Team Single css	  ***/
/************************************/

.page-team-single{
	padding: 100px 0;
}

.team-about-box,
.team-member-skill-box{
	margin-bottom: 60px;
}

.team-about-box{
	display: flex;
	flex-wrap: wrap;
	gap: 30px 60px;
}

.team-single-image,
.team-about-content{
	width: calc(50% - 30px);
}

.team-single-image figure{
	display: block;
	height: 100%;
	border-radius: 20px;
}

.team-single-image img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 0.98;
	object-fit: cover;
	border-radius: 20px;
}

.team-about-content{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	padding: 40px;
}

.member-social-list{
	margin-bottom: 40px;
}

.member-social-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 15px;
}

.member-social-list ul li a{
	width: 40px;
	height: 40px;
	color: var(--primary-color);
	border: 1px solid var(--primary-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease-in-out;
}

.member-social-list ul li a:hover{
	background: var(--primary-color);
	color: var(--accent-color);
}

.member-social-list ul li a i{
	color: inherit;
	font-size: 20px;
}

.team-contact-item{
	display: flex;
	margin-bottom: 30px;
}

.team-contact-item:last-child{
	margin-bottom: 0;
}

.team-contact-item .icon-box{
	position: relative;
	height: 60px;
	width: 60px;
	background-color: var(--accent-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 25px;
}

.team-contact-item .icon-box::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--primary-color);
	border-radius: 50%;
	width: 100%;
	height: 100%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
}

.team-contact-item:hover .icon-box::before{
	transform: scale(1);
}

.team-contact-item .icon-box img{
	position: relative;
	width: 100%;
	max-width: 30px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.team-contact-item:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.team-contact-content{
	width: calc(100% - 85px);
}

.team-contact-content p{
	text-transform: capitalize;
	margin-bottom: 5px;
}

.team-contact-content h3{
	font-size: 20px;
}

.team-member-skill-box,
.team-member-contact-box{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	display: flex;
	flex-wrap: wrap;
	gap: 30px 140px;
	border-radius: 20px;
	padding: 40px;
}

.team-skill-content{
	width: calc(45% - 70px);
}

.team-skill-content .section-title{
	margin-bottom: 0;
}

.team-skill-list{
	width: calc(55% - 70px);
}

.skills-progress-bar{
	margin-bottom: 30px;
}

.skills-progress-bar:last-child{
	margin-bottom: 0px;
}

.skills-progress-bar .skill-data{
	display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.skills-progress-bar .skill-data .skill-title,
.skills-progress-bar .skill-data .skill-no{
	line-height: normal;
	font-weight: 500;
	text-transform: capitalize;
}

.skills-progress-bar .skillbar .skill-progress{
	position: relative;
	width: 100%;
	height: 16px;
	background: var(--secondary-color);
	border-radius: 100px;
    overflow: hidden;
}

.skills-progress-bar .skillbar .skill-progress .count-bar{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	background: var(--primary-color);
	border-radius: 100px;
}

.team-member-contact-box{
	gap: 30px;
}

.team-member-contact-info{
	width: calc(42% - 15px);
}

.team-member-contact-info .section-title{
	position: sticky;
	margin-bottom: 0;
	top: 50px;
}

.team-member-contact-box .contact-us-form{
	width: calc(58% - 15px);
	border-radius: 20px;
}

/************************************/
/*** 	 27. Pricing Page css	  ***/
/************************************/

.page-pricing{
	padding: 100px 0 70px;
}

.page-pricing .pricing-item{
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.page-pricing .pricing-item .pricing-content,
.page-pricing .pricing-item .pricing-list{
	width: 100%;
}

/************************************/
/***   28. Testimonials Page css  ***/
/************************************/

.page-testimonials{
	padding: 100px 0 70px;
}

.page-testimonials .testimonial-item{
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

/************************************/
/*** 	 29. Image Gallery css	  ***/
/************************************/

.page-gallery{
	padding: 100px 0 70px;
}

.page-gallery-box .photo-gallery{
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.page-gallery-box .photo-gallery a{
	cursor: none;
}

.page-gallery-box .photo-gallery figure{
	display: block;
	border-radius: 20px;
}

.page-gallery-box .photo-gallery img{
	width: 100%;
	aspect-ratio: 1 / 0.829;
	object-fit: cover;
	border-radius: 20px;
}

/************************************/
/*** 	 30. Video Gallery css	  ***/
/************************************/

.page-video-gallery{
	padding: 100px 0 70px;
}

.video-gallery-image{
	height: calc(100% - 30px);
	margin-bottom: 30px;
	overflow: hidden;
}

.video-gallery-image a{
	position: relative;
	display: block;
	cursor: none;
}

.video-gallery-image a::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--primary-color);
	border-radius: 20px;
    opacity: 0%;
    visibility: hidden;
    width: 100%;
    height: 100%;
    z-index: 1;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
}

.video-gallery-image:hover a::before{
    opacity: 40%;
    visibility: visible;
    transform: scale(1);
}

.video-gallery-image a::after{
    content: '\f04b';
	font-family: 'FontAwesome';
    position: absolute;
    top: 50%;
    left: 50%;
    right: 0;
    transform: translate(-50%, -50%);
	font-size: 20px;
	background: var(--accent-color);
	color: var(--on-accent-color);
    border-radius: 50%;
    height: 60px;
    width: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-in-out;
    z-index: 1;
}

.video-gallery-image:hover a::after{
    opacity: 1;
    visibility: visible;
}

.video-gallery-image img{
	width: 100%;
	aspect-ratio: 1 / 0.829;
	object-fit: cover;
	border-radius: 20px;
}

/************************************/
/*** 	  31. FAQs Page css 	  ***/
/************************************/

.page-faqs{
	padding: 100px 0;
}

.page-faqs .page-faq-accordion{
    margin-bottom: 60px;
}

.page-faqs .page-faq-accordion:last-child{
    margin-bottom: 0px;
}

/************************************/
/***    32. Contact Us Page css	  ***/
/************************************/

.page-contact-us{
	padding: 100px 0 50px;
}

.contact-us-box{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	background-color: var(--secondary-color);
	border-radius: 20px;
	padding: 40px;
}

.contact-us-content{
	width: calc(50% - 15px);
	background-color: var(--white-color);
	border-radius: 20px;
	padding: 40px;
}

.contact-info-item{
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 40px;
	padding-bottom: 40px;
}

.contact-info-item:last-child{
	margin-bottom: 0px;
	padding-bottom: 0px;
	border-bottom: none;
}

.contact-info-item .icon-box{
	position: relative;
	height: 60px;
	width: 60px;
	background-color: var(--accent-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 25px;
}

.contact-info-item .icon-box::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--primary-color);
	border-radius: 50%;
	width: 100%;
	height: 100%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
}

.contact-info-item:hover .icon-box::before{
	transform: scale(1);
}

.contact-info-item .icon-box img{
	position: relative;
	width: 100%;
	max-width: 30px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.contact-info-item:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.contact-item-content{
	width: calc(100% - 85px);
}

.contact-item-content p{
	text-transform: capitalize;
	margin-bottom: 5px;
}

.contact-item-content h3{
	font-size: 20px;
}

.contact-item-content h3 a{
	color: inherit;
	transition: all 0.3s ease-in-out;
}

.contact-item-content h3 a:hover{
	color: var(--accent-color);
}

.contact-us-image{
	position: relative;
	width: calc(50% - 15px);
}

.contact-us-img{
	height: 100%;
}

.contact-us-img figure{
	height: 100%;
	display: block;
	border-radius: 20px;
}

.contact-us-img img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1.24;
	object-fit: cover;
	border-radius: 20px;
}

.working-hours-box{
	position: absolute;
	bottom: 30px;
	left: 30px;
	background-color: var(--dark-divider-color);
	border: 1px solid var(--dark-divider-color);
	border-radius: 20px;
	padding: 30px;
	backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
	z-index: 1;
}

.working-hours-header{
	margin-bottom: 30px;
}

.working-hours-header h3{
	color: var(--white-color);
	font-size: 20px;
	text-transform: capitalize;
}

.working-hours-body ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.working-hours-body ul li{
	font-size: 16px;
	color: var(--white-color);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px 70px;
	margin-bottom: 20px;
}

.working-hours-body ul li:last-child{
	margin-bottom: 0;
}

.contact-form-map{
	padding: 50px 0 100px;
}

.contact-form-box{
	display: flex;
	flex-wrap: wrap;
	border-radius: 20px;
	overflow: hidden;
}

.contact-form-box .contact-us-form,
.google-map{
	width: 50%;
}

.contact-us-form{
	background-color: var(--primary-color);
	padding: 40px;
}

.contact-us-form .section-title h2,
.contact-us-form .section-title p{
	color: var(--white-color);
}

.contact-form form .form-control{
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--text-color);
    background-color: var(--white-color);
    border: none;
    border-radius: 20px;
    padding: 18px 20px;
    outline: none;
    box-shadow: none;
}

.contact-form form .form-control::placeholder{
    color: var(--text-color);
}

.contact-form form .btn-default{
    width: 100%;
	padding: 17px;
}

.contact-form form .btn-default::before{
    display: none;
}

.google-map iframe{
	width: 100%;
	height: 100%;
}

/************************************/
/*** 	 33. 404 Error Page css	  ***/
/************************************/

.error-page{
	padding: 100px 0;
}

.error-page-image{
	text-align: center;
	margin-bottom: 30px;
}

.error-page-image img{
	width: 100%;
	max-width: 50%;
}

.error-page-content{
	text-align: center;
}

.error-page-content .section-title{
	margin-bottom: 15px;
}

/************************************/
/***      34. Responsive css      ***/
/************************************/


@media only screen and (max-width: 1820px){
	
	.bg-section{
		max-width: calc(100% - 40px);
		margin: 0 20px;
	}

	.hero-content-box .section-title{
		margin-right: 0;
	}

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


@media only screen and (max-width: 1024px){

	.main-menu ul li{
		margin: 0;
	}
}

@media only screen and (max-width: 991px){
	
	.btn-default{
		padding: 15px 40px 15px 15px;
	}
	
	.btn-default::before{
		right: 15px;
		width: 18px;
        height: 18px;
	}

	.btn-default.btn-border{
		padding: 14px 40px 14px 15px;
	}
	
	.navbar{
		padding: 18px 0;
	}

	/* HIRI: tighten the header logo a touch on mobile so the
	   navbar isn't dominated by the lockup. */
	.navbar-brand img{
		width: 120px !important;
		height: 54px !important;
	}

	.slicknav_nav li,
	.slicknav_nav ul{
        display: block;
    }

	.responsive-menu,
    .navbar-toggle{
		display: block;
    }

	/* Labrix hides the desktop CTA on mobile; we keep that —
	   the same CTA is provided inside the drawer below
	   (see the .mobile-drawer-cta block in the HTML). */
	.header-btn{
		display: none;
	}

	.bg-section{
		max-width: 100%;
		border-radius: 0;
		margin: 0;
	}
	
	.section-row{
		margin-bottom: 40px;
	}

	.section-row .section-title.section-title-center{
		max-width: 100%;
	}

	.section-content-btn .section-btn{
		margin-top: 20px;
	}
	
	.section-title{
		margin-bottom: 30px;
	}

	.section-title h3{
		padding: 6px 14px 6px 26px;
	}

	.section-title h3::before{
		left: 14px;
	}

	.section-title h1{
		font-size: 45px;
	}

	.section-title h2{
		font-size: 36px;
	}

	.section-title p{
		margin-top: 10px;
	}

	.section-title-content{
        margin-top: 10px;
    }

	.section-btn{
        text-align: left;
        margin-top: 15px;
	}

	.hero{
		padding: 170px 0 80px;
	}

	.hero.hero-slider-layout .hero-slide{
		padding: 170px 0 80px;
	}

	.hero-video-circle{
		display: none;
	}

	.hero-body{
		margin-top: 30px;
		padding-top: 30px;
	}

	.hero-experience-box h2{
		width: 65px;
		font-size: 36px;
	}

	.our-scrolling-ticker{
		padding: 20px 0;
	}

	.scrolling-ticker-box{
		--gap: 20px;
	}

	.scrolling-content span{
		font-size: 24px;
	}

	.scrolling-content span img{
		max-width: 26px;
		margin-right: 20px;
	}

	.about-us{
		background-size: 140px auto;
		background-position: right -10px bottom 50px;
		padding: 50px 0;
	}

	.about-us .section-row .section-title{
		margin-right: 0px;
	}

	.customer-rating-content{
		margin-right: 30px;
		padding-right: 30px;
	}

	.about-image-content-box-1{
		width: calc(50% - 15px);
	}

	.about-image-content-box-2{
		width: 100%;
	}

	.about-image-content-box-2 .about-image img{
		aspect-ratio: 1 / 0.5;
	}

	.about-image-content{
		bottom: 30px;
		left: 30px;
		right: 30px;
	}

	.about-counter-box{
		width: calc(50% - 15px);
		padding: 30px;
	}

	.about-counter-title h2{
		width: 85px;
		font-size: 36px;
	}

	.our-services{
		padding: 50px 0;
	}

	.service-item{
		aspect-ratio: 1 / 1.03;
		padding: 30px;
	}

	.section-footer-text{
		margin-top: 10px;
	}

	.why-choose-us{
		background-size: 140px auto;
		background-position: left -40px bottom 50px;
		padding: 50px 0;
	}

	.why-choose-image-box{
		margin: 0 0 30px;
	}

	.why-choose-image figure img{
		aspect-ratio: 1 / 0.8;
	}

	.why-choose-image-box .satisfy-client-box{
		bottom: 20px;
		left: 20px;
		padding: 20px;
	}

	.what-we-do{
		background-size: 140px auto;
		background-position: right -20px bottom -10px;
		padding: 50px 0;
	}

	.what-we-contant{
		margin: 0 0 30px;
	}

	.what-we-counter-box{
		max-width: 300px;
		margin-top: 30px;
	}

	.what-we-counter-box h2{
		font-size: 60px;
		margin-bottom: 10px;
		padding-bottom: 10px;
	}

	.what-we-item{
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

	.case-study{
		background-size: 140px auto;
		background-position: right -20px bottom 50px;
		padding: 50px 0 20px;
	}

	.case-study-item{
		height: calc(100% - 30px);
		margin-bottom: 30px;
	}

	.case-study-image{
		margin-bottom: 15px;
	}

	.case-study-content h2{
		font-size: 18px;
	}

	.intro-video-box{
		height: 500px;
	}

	.video-play-border-button a{
		width: 80px;
		height: 80px;
	}

	.video-play-border-button a:hover{
		font-size: 18px;
	}

	.how-it-work{
		background-size: 130px auto;
		background-position: left -20px bottom 0;
		padding: 50px 0;
	}

	.how-work-image-box{
		margin: 0 0 30px;
	}

	.how-work-image figure img{
		aspect-ratio: 1 / 0.8;
	}

	.how-work-image-box .satisfy-client-box{
		bottom: 30px;
		left: 30px;
		width: 290px;
		padding: 20px;
	}

	.how-work-image-box .satisfy-client-box .satisfy-client-content{
		margin-top: 30px;
	}

	.work-steps-item{
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

	.our-pricing{
		background-size: 140px auto;
		background-position: left -10px bottom -10px;
		padding: 50px 0;
	}

	.our-pricing-content{
		position: initial;
		margin: 0 0 30px;
	}

	.pricing-item{
		padding: 30px;
	}

	.pricing-header{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.pricing-price{
		margin-bottom: 30px;
	}

	.pricing-price h2{
		font-size: 28px;
		margin-bottom: 15px;
	}

	.pricing-price h2 sub{
		font-size: 18px;
	}

	.pricing-list ul li{
		margin-bottom: 15px;
	}

	.our-faqs{
		padding: 50px 0;
	}

	.faqs-content{
		position: initial;
		margin: 0 0 30px;
	}

	.faq-accordion{
		padding: 30px;
		margin-left: 0;
	}

	.faq-accordion .accordion-item{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.faq-accordion .accordion-button:not(.collapsed){
		padding-bottom: 15px;
	}

	.our-testimonials{
		padding: 50px 0;
	}

	.author-image figure img{
		aspect-ratio: 1 / 0.99;
	}

	.testimonial-content{
		padding: 20px;
	}

	.testimonial-quote{
		margin-bottom: 20px;
	}

	.testimonial-pagination{
		margin-top: 20px;
	}

	.our-blog{
		padding: 50px 0 20px;
	}

	.post-featured-image{
		margin-bottom: 15px;
	}

	.main-footer{
        padding: 50px 0 0;
    }

	.about-footer{
		margin: 0 0 40px;
	}

	.footer-logo{
		margin-bottom: 15px;
	}

	.about-footer-content{
		margin-bottom: 20px;
	}

	.footer-newsletter-form .form-group{
		margin-bottom: 15px;
	}
	
	.footer-links-box{
		margin: 0;
	}

	.footer-links h3{
		margin-bottom: 15px;
	}

	.footer-links ul li{
		margin-bottom: 10px;
	}

	.footer-copyright-text{
		margin-top: 30px;
		padding: 30px 0;
	}

	.page-header{
		padding: 170px 0 80px;
	}

	.page-header-box h1{
		font-size: 45px;
		margin-bottom: 5px;
	}

	.our-approach{
		padding: 50px 0;
	}

	.approach-image{
		height: auto;
		margin-right: 0;
		margin-bottom: 30px;
	}

	.approach-image img{
		height: auto;
		aspect-ratio: 1 / 0.7;
	}

	.approach-content{
		padding: 30px;
	}

	.mission-vision-list{
		margin-bottom: 30px;
	}

	.mission-vision-item .icon-box{
		margin-bottom: 30px;
	}

	.mission-vision-content h3{
		margin-bottom: 10px;
	}

	.our-core-value{
		background-size: 100px auto;
		background-position: right -10px top 50px;
		padding: 50px 0;
	}

	.core-value-image{
		max-width: 80%;
        margin: 0 auto;
		margin-bottom: 30px;
	}

	.about-experience-box{
		padding: 20px;
	}

	.experience-box-content h2{
		font-size: 36px;
	}

	.core-value-content{
		margin-left: 0px;
	}

	.our-experiment-item{
	    margin-bottom: 30px;
	    padding-bottom: 30px;
	}

	.our-experiment-item h3{
		padding-left: 25px;
		margin-bottom: 10px;
	}

	.our-experiment-item h3:before{
		font-size: 16px;
	}

	.our-team{
		padding: 50px 0 20px;
	}

	.team-image img{
		aspect-ratio: 1 / 1.1;
	}

	.team-social-icon{
    	right: 30px;
    	left: 30px;
	}

	.team-item:hover .team-social-icon{
    	bottom: 30px;
	}

	.team-image{
		margin-bottom: 15px;
	}

	.page-services{
		padding: 50px 0 20px;
	}

	.page-service-single{
		padding: 50px 0;
	}

	.page-single-sidebar{
		position: initial;
		margin: 0 0 30px;
	}

	.page-category-list{
		margin-bottom: 30px;
	}

	.page-category-list h3,
	.page-category-list ul{
		padding: 15px 30px;
	}

	.page-category-list ul li{
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.sidebar-cta-box{
		padding: 30px;
	}

	.sidebar-cta-logo{
		margin-bottom: 40px;
	}

	.page-single-image{
		margin-bottom: 30px;
	}

	.service-entry{
		margin-bottom: 40px;
	}

	.service-entry p{
		margin-bottom: 15px;
	}

	.service-entry h2{
		font-size: 36px;
		margin-bottom: 15px;
	}

	.service-entry ul li{
		padding-left: 25px;
		margin-bottom: 10px;
	}

	.service-entry ul li::before{
		font-size: 16px;
	}

	.service-discover-box,
	.service-result-box,
	.service-partnership-box{
		margin-top: 40px;
	}

	.service-discover-list{
		margin-top: 30px;
	}

	.service-discover-list ul{
		gap: 20px;
	}

	.service-discover-list ul li{
		width: calc(50% - 10px);
		font-size: 14px;
		border-radius: 12px;
		padding: 12px 12px 12px 35px;
		margin-bottom: 0;
	}

	.service-discover-list ul li::before{
		top: 14px;
		left: 12px;
	}

	.service-discover-image-content{
		gap: 20px;
		margin-top: 30px;
	}

	.service-discover-image,
	.service-discover-content{
		width: calc(50% - 10px);
	}

	.service-discover-content .why-choose-item{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.service-discover-content .why-choose-item:last-child{
		margin-bottom: 0;
		padding: 0;
	}

	.service-discover-content .why-choose-item .why-choose-item-content p{
		font-size: 14px;
	}

	.service-result-box ul{
		margin-top: 30px;
	}

	.service-result-list{
		margin-top: 30px;
		padding: 30px;
	}

	.service-result-item{
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

	.service-partnership-content .our-experiment-item{
		margin-bottom: 20px;
	}

	.service-partnership-image{
		margin-top: 30px;
	}

	.page-blog{
		padding: 50px 0;
	}

	.page-blog .post-item{
		height: calc(100% - 30px);
		margin-bottom: 30px;
	}

	.page-pagination{
		margin-top: 10px;
	}

	.page-single-post{
		padding: 50px 0;
    }
    
    .post-image{
        margin-bottom: 20px;
    }
    
    .post-entry h1,
    .post-entry h2,
    .post-entry h3,
    .post-entry h4,
    .post-entry h5,
    .post-entry h6{
        margin: 0 0 0.42em;
    }
    
    .post-entry h2{
        font-size: 36px;
    }
    
    .post-entry p{
        margin-bottom: 15px;
    }
    
    .post-entry ol li,
    .post-entry ul li{
        margin-bottom: 10px;
    }
    
    .post-entry blockquote{
        background-position: 20px 20px;
        background-size: 40px;
        padding: 20px 20px 20px 70px;
        margin-bottom: 20px;
    }
    
    .post-entry blockquote p{
        font-size: 18px;
    }
    
    .post-tags{
        margin-bottom: 20px;
    }

	.tag-links{
		gap: 10px;
	}
    
    .post-tags .tag-links a{
        padding: 10px 15px;
    }
    
    .post-social-sharing ul{
        text-align: left;
    }

	.page-case-study{
		padding: 50px 0 20px;
	}

	.page-case-study-single{
		padding: 50px 0;
	}

	.case-study-entry{
		margin-bottom: 40px;
	}

	.case-study-entry p{
		margin-bottom: 15px;
	}

	.case-study-entry h2{
		font-size: 36px;
		margin-bottom: 15px;
	}

	.case-study-entry ul li{
		padding-left: 25px;
		margin-bottom: 10px;
	}

	.case-study-entry ul li::before{
		font-size: 16px;
	}

	.empowering-agriculture-box,
	.field-trials-box,
	.shaping-future-box{
		margin-top: 40px;
	}

	.empowering-box-list{
		margin-top: 30px;
	}

	.empowering-box{
		padding: 30px;
		margin-bottom: 30px;
	}

	.empowering-item{
		margin-bottom: 30px;
	}

	.empowering-item .icon-box{
		margin-right: 15px;
	}

	.empowering-item .icon-box img{
		max-width: 50px;
	}

	.empowering-item-content{
		width: calc(100% - 65px);
	}

	.field-trials-step-list{
		gap: 30px;
		margin-top: 30px;
	}

	.field-trials-step-no{
		height: 50px;
		width: 50px;
		margin-right: 15px;
	}

	.field-trials-step-no h3{
		font-size: 20px;
	}

	.field-trials-content{
		width: calc(100% - 65px);
	}

	.field-trials-content h3{
		font-size: 18px;
		margin-bottom: 10px;
		padding-bottom: 10px;
	}

	.shaping-future-image-content{
		margin-top: 30px;
		padding: 30px;
	}

	.shaping-future-item{
		margin-top: 20px;
	}

	.page-team{
		padding: 50px 0 20px;
	}

	.page-team-single{
		padding: 50px 0;
	}

	.team-about-box,
	.team-member-skill-box{
		margin-bottom: 40px;
	}

	.team-single-image,
	.team-about-content{
		width: 100%;
	}

	.team-single-image img{
		height: auto;
		aspect-ratio: 1 / 0.85;
	}

	.team-about-content{
		padding: 30px;
	}

	.member-social-list{
		margin-bottom: 30px;
	}

	.team-contact-item .icon-box{
		width: 50px;
		height: 50px;
		margin-right: 15px;
	}

	.team-contact-item .icon-box img{
		max-width: 24px;
	}

	.team-contact-content{
		width: calc(100% - 65px);
	}

	.team-member-skill-box,
	.team-member-contact-box{
		gap: 30px;
		padding: 30px;
	}

	.team-skill-content,
	.team-skill-list{
		width: 100%;
	}

	.skills-progress-bar{
		margin-bottom: 20px;
	}

	.skills-progress-bar .skill-data{
		margin-bottom: 15px;
	}

	.team-member-contact-info,
	.team-member-contact-box .contact-us-form{
		width: 100%;
	}

	.team-member-contact-info .section-title{
		position: initial;
	}

	.page-pricing{
		padding: 50px 0 20px;
	}

	.page-testimonials{
		padding: 50px 0 20px;
	}

	.page-gallery{
		padding: 50px 0 20px;
	}

	.page-video-gallery{
		padding: 50px 0 20px;
	}

	.page-faqs{
		padding: 50px 0;
	}

	.page-faqs .page-faq-accordion{
		margin-bottom: 40px;
	}

	.page-contact-us{
    	padding: 50px 0 25px;
	}

	.contact-us-box{
		padding: 30px;
	}

	.contact-us-content,
	.contact-us-image{
		width: 100%;
	}

	.contact-us-content{
		padding: 30px;
	}

	.contact-info-item{
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

	.contact-info-item .icon-box{
		margin-right: 15px;
	}

	.contact-item-content{
		width: calc(100% - 75px);
	}

	.contact-us-img img{
		aspect-ratio: 1 / 0.9;
	}

	.working-hours-box{
		bottom: 20px;
		left: 20px;
		padding: 20px;
	}

	.working-hours-header{
		margin-bottom: 20px;
	}

	.contact-form-map{
		padding: 25px 0 50px;
	}

	.contact-form-box .contact-us-form,
	.google-map{
		width: 100%;
	}

	.contact-us-form{
		padding: 30px;
	}

	.contact-form form .form-control{
		padding: 12px 15px;
		border-radius: 12px;
	}

	.contact-form form .btn-default{
		padding: 15px;
	}

	.google-map iframe{
		height: 450px;
	}

	.error-page{
		padding: 50px 0;
	}
	
	.error-page-image{
		margin-bottom: 20px;
	}

	.error-page-image img{
		max-width: 80%;
	}
}

@media only screen and (max-width: 767px){

	.section-row{
		margin-bottom: 30px;
	}

	.section-title h1{
		font-size: 28px;
	}

	.section-title h2{
		font-size: 26px;
	}

	.hero-btn{
		gap: 15px;
	}

	.hero-experience-box{
		width: 100%;
	}

	.hero-experience-box h2{
        width: 50px;
        font-size: 26px;
    }

	.satisfy-client-box{
		gap: 10px;
	}

	.satisfy-client-image figure{
		width: 45px;
		height: 45px;
	}

	.our-scrolling-ticker{
		padding: 15px 0;
	}

	.scrolling-ticker-box{
        --gap: 15px;
    }

	.scrolling-content span{
        font-size: 20px;
    }

	.scrolling-content span img{
        max-width: 22px;
        margin-right: 15px;
    }

	.customer-rating-box{
		align-items: start;
		justify-content: space-between;
		gap: 10px;
	}

	.customer-rating-content{
		border-right: none;
        margin-right: 0px;
        padding-right: 0px;
    }

	.customer-rating-content h3{
		font-size: 18px;
		margin-bottom: 5px;
	}

	.customer-rating-content p{
		font-size: 14px;
	}

	.customer-rating-images{
		padding: 6px;
	}

	.about-us-boxes{
		gap: 20px;
	}

	.about-image-content-box-1{
        width: 100%;
    }

	.about-image-content{
        bottom: 20px;
        left: 20px;
        right: 20px;
    }

	.about-video-title h3{
		font-size: 18px;
	}

	.about-counter-box{
		width: 100%;
		padding: 20px;
	}

	.about-counter-title{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.about-counter-title h2{
        width: 65px;
        font-size: 26px;
    }

	.about-image-content-box-2 .about-image img{
        aspect-ratio: 1 / 0.741;
    }

	.about-image-content ul{
		gap: 10px;
	}

	.about-image-content ul li{
		font-size: 12px;
		padding: 5px 15px;
	}

	.service-content h3{
		font-size: 18px;
		margin-bottom: 6px;
	}

	.why-choose-image figure img{
        aspect-ratio: 1 / 1.1;
    }

	.why-choose-image-box .satisfy-client-box .satisfy-client-content{
		margin-top: 10px;
	}

	.why-choose-image-box .satisfy-client-box .satisfy-client-content h3{
		font-size: 16px;
	}

	.why-choose-item-box{
		width: 100%;
	}

	.why-choose-item{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.why-choose-item-header .icon-box{
		width: 45px;
		height: 45px;
		margin-right: 10px;
	}

	.why-choose-item-title{
		width: calc(100% - 55px);
	}

	.why-choose-item-title h3{
		font-size: 16px;
	}

	.why-choose-item-content{
		width: calc(50% - 10px);
		padding-left: 10px;
		margin-left: 10px;
	}

	.why-choose-item-content p{
		font-size: 14px;
	}

	.why-choose-btn{
		margin-top: 30px;
	}

	.why-choose-body-image{
		width: 100%;
	}

	.why-choose-body-image img{
		aspect-ratio: 1 / 0.8;
	}

	.what-we-counter-box{
		max-width: 100%;
	}

	.what-we-counter-box h2{
		font-size: 40px;
	}

	.what-we-counter-box h3{
		font-size: 18px;
	}

	.what-we-item{
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

	.what-we-item .icon-box{
		margin-right: 10px;
	}

	.what-we-content{
		width: calc(100% - 60px);
	}

	.what-we-content h3{
		font-size: 18px;
	}

	.what-we-content p{
		font-size: 14px;
	}

	.intro-video-box{
        height: 300px;
    }

	.how-work-image figure img{
        aspect-ratio: 1 / 1.1;
    }

	.how-work-image-box .satisfy-client-box{
        bottom: 20px;
        left: 20px;
        padding: 15px;
    }

	.how-work-image-box .satisfy-client-box .satisfy-client-content{
        margin-top: 20px;
    }

	.how-work-image-box .satisfy-client-box .satisfy-client-content h3{
		font-size: 18px;
	}

	.how-work-image-box .satisfy-client-box .satisfy-client-content p{
		font-size: 14px;
	}

	.work-steps-item{
		display: block;
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

	.work-step-no{
		margin: 0 0 15px;
	}

	.work-step-content{
		width: 100%;
	}

	.work-step-content h3{
		font-size: 18px;
		margin-bottom: 5px;
	}

	.pricing-item{
		padding: 20px;
	}

	.pricing-header{
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

	.pricing-header h3{
		font-size: 18px;
	}

	.pricing-body{
		gap: 20px;
	}

	.pricing-content,
	.pricing-list{
		width: 100%;
	}

	.pricing-price{
        margin-bottom: 20px;
    }

	.pricing-price h2{
		font-size: 22px;
		margin-bottom: 10px;
	}

	.pricing-price h2 sub{
		font-size: 14px;
	}

	.pricing-list ul li{
		margin-bottom: 10px;
	}

	.faq-accordion{
		padding: 20px;
	}

	.faq-accordion .accordion-button:not(.collapsed){
		padding-bottom: 10px;
	}

	.faq-accordion .accordion-item .accordion-body{
		padding: 0;
	}

	.faq-accordion .accordion-item .accordion-body p{
		font-size: 14px;
	}

	.author-image,
	.testimonial-content{
		width: 100%;
	}

	.author-image figure,
	.author-image figure img{
		height: auto;
	}

	.testimonial-quote{
        margin-bottom: 15px;
    }

	.testimonial-info{
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.author-content h3{
		font-size: 18px;
		margin-bottom: 5px;
	}

	.about-footer{
        margin: 0 0 30px;
    }

	.footer-newsletter-box h3{
		font-size: 18px;
		margin-bottom: 15px;
	}

	.footer-links-box{
		gap: 0;
	}

	.footer-links{
		width: 100%;
		margin-bottom: 30px;
	}

	.footer-links h3{
		font-size: 18px;
	}

	.footer-copyright-text{
		margin: 0;
		padding: 15px 0;
	}

	.page-header-box h1{
		font-size: 28px;
	}

	.approach-image img{
        aspect-ratio: 1 / 0.9;
    }

	.approach-content{
		padding: 30px 20px;
	}

	.mission-vision-item{
		width: 100%;
	}

	.mission-vision-item .icon-box{
        margin-bottom: 20px;
    }

	.mission-vision-content h3{
		font-size: 18px;
        margin-bottom: 5px;
    }

	.core-value-image{
		max-width: 100%;
	}

	.value-image-box-1{
		padding-right: 0;
	}

	.value-image-box-2{
		margin-top: 10px;
		align-items: start;
	}

	.about-experience-box{
		width: 145px;
        padding: 12px;
		margin: 5px 10px 0 0;
    }

	.about-experience-box .icon-box{
		width: 50px;
		height: 50px;
		margin-bottom: 10px;
	}

	.about-experience-box .icon-box img{
		max-width: 26px;
	}

	.experience-box-content h2{
		font-size: 26px;
	}

	.experience-box-content p{
		font-size: 14px;
	}

	.value-img-2{
		width: calc(100% - 155px);
		margin-top: 0px;
	}

	.value-img-2 figure{
		border-width: 5px;
	}

	.our-experiment-item{
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

	.our-experiment-item h3{
		font-size: 18px;
	}

	.team-content h3{
		font-size: 18px;
	}

	.page-category-list h3,
	.page-category-list ul,
	.sidebar-cta-box{
        padding: 20px;
    }

	.page-category-list h3{
		font-size: 18px;
	}

	.page-single-image{
        margin-bottom: 20px;
    }

	.service-entry h2{
		font-size: 26px;
	}

	.service-discover-list ul{
		gap: 10px;
	}

	.service-discover-list ul li{
		width: 100%;
		padding: 8px 12px 8px 35px;
	}
	
	.service-discover-list ul li::before{
		top: 10px;
	}

	.service-discover-image,
	.service-discover-content{
		width: 100%;
	}

	.service-result-list{
		padding: 20px;
	}

	.service-result-item{
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
	
	.service-result-item .icon-box{
		width: 50px;
		height: 50px;
		margin-right: 15px;
	}

	.service-result-item .icon-box img{
		max-width: 26px;
	}

	.service-result-content{
		width: calc(100% - 65px);
	}

	.service-result-content h3{
		font-size: 18px;
		margin-bottom: 5px;
	}

	.service-result-content p{
		font-size: 14px;
	}

	.service-partnership-image{
		margin-top: 20px;
	}

	.service-partnership-image img{
		aspect-ratio: 1 / 0.54;
	}

	.post-single-meta ol li{
        font-size: 16px;
    }
    
    .post-single-meta ol li i{
        font-size: 16px;
    }
    
    .post-image img{
        aspect-ratio: 1 / 0.7;
    }
    
    .post-entry blockquote{
        background-position: 15px 15px;
        padding: 60px 15px 15px 15px;
    }
    
    .post-entry blockquote p{
        font-size: 16px;
    }
    
    .post-entry h2{
        font-size: 26px;
    }

	.tag-links{
		font-size: 18px;
	}

	.case-study-entry h2{
		font-size: 26px;
	}

	.empowering-box{
		padding: 20px;
	}

	.empowering-item{
        margin-bottom: 20px;
    }

	.empowering-item-content h3{
		font-size: 18px;
		margin-bottom: 5px;
	}

	.field-trials-step-item{
		width: 100%;
	}

	.shaping-future-image-content{
		padding: 20px;
	}

	.shaping-future-content,
	.shaping-future-image{
		width: 100%;
	}

	.shaping-future-item h3{
		width: calc(45% - 5px);
		font-size: 18px;
		margin-right: 5px;
		padding-right: 5px;
	}

	.shaping-future-item p{
		width: 56%;
	}

	.team-single-image img{
		aspect-ratio: 1 / 1.2;
	}

	.team-about-content{
		padding: 20px;
	}

	.member-social-list{
		margin-bottom: 20px;
	}

	.team-contact-content h3{
		font-size: 18px;
	}

	.team-member-skill-box,
	.team-member-contact-box{
		padding: 20px;
	}

	.contact-us-box{
        padding: 20px;
    }

	.contact-us-content{
        padding: 20px;
    }

	.contact-info-item{
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

	.contact-info-item .icon-box{
		height: 50px;
		width: 50px;
	}

	.contact-info-item .icon-box img{
		max-width: 26px;
	}

	.contact-item-content{
        width: calc(100% - 65px);
    }

	.contact-item-content h3{
		font-size: 18px;
	}

	.contact-us-img img{
        aspect-ratio: 1 / 1.1;
    }

	.working-hours-header h3{
		font-size: 18px;
	}

	.working-hours-box{
        bottom: 15px;
        left: 15px;
        padding: 15px;
    }

	.working-hours-body ul li{
		font-size: 14px;
		gap: 10px 20px;
		margin-bottom: 10px;
	}

	.contact-us-form{
        padding: 20px;
    }

	.google-map iframe{
		height: 350px;
	}
}

/************************************/
/*** 	 35. Mega Menu (HIRI)	  ***/
/************************************/

/* HIRI addition. Wide full-bleed dropdown panels on the main nav,
   replacing Labrix's narrow 235-px submenus. Triggered by the
   "mega-menu" class on the inner <ul>. Reuses Labrix's default
   .main-menu ul li:hover > ul open behaviour — we only restyle the
   panel.

   Approach: the panel breaks out to 100vw via left:50% +
   margin-left:-50vw (full-bleed-from-centered-parent trick). Inner
   content is centred via horizontal padding that scales: large on
   narrow viewports (40px), automatic on wide ones so the content
   sits in a ~1320-px column. Items use auto-fit grid so they
   distribute evenly across the width regardless of count.

   Mobile (≤991px) reverts to Slicknav's stacked accordion — see
   the @media query at the bottom of this block.
*/

.main-menu ul ul.mega-menu{
	/* Bounded, page-centred panel — opens in the same spot regardless
	   of which nav item the user hovers. position: fixed detaches
	   from the trigger li's coordinate space. */
	position: fixed;
	top: 120px;          /* flush against the navbar's bottom divider */
	left: 50%;
	right: auto;
	margin-left: 0;
	width: min(80vw, 1280px);
	/* "Top of a capsule" — flat top (merges with the header line),
	   rounded bottom (no longer a floating card-within-card). */
	border-radius: 0 0 16px 16px;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-top: none;
	box-shadow: 0px 16px 32px 0px rgba(7, 35, 77, 0.12);
	/* layout — two regions joined by a vertical divider, no gap */
	display: flex;
	gap: 0;
	align-items: stretch;
	padding: 0;
	overflow: hidden;    /* clip the blush right column to the panel's rounded bottom */
	/* open/close — small slide-down + fade from header line */
	transform: translateX(-50%) translateY(-8px) scaleY(0.95);
	transform-origin: top center;
	transition: transform 0.2s ease-out, opacity 0.2s ease-out, visibility 0.2s ease-out;
	z-index: 200;
}

/* Invisible hover-bridge: tiny ::before above the panel filling
   any gap between trigger word and panel so the cursor doesn't
   lose :hover crossing the gap. */
.main-menu ul ul.mega-menu::before{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -12px;
	height: 12px;
}

.main-menu ul li.submenu:hover > ul.mega-menu{
	transform: translateX(-50%) translateY(0) scaleY(1);
}

/* Items region — white background, fills available width */
.main-menu ul ul.mega-menu .mega-menu-item-wrap{
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	padding: 36px 40px;
	margin: 0;
}

.main-menu ul ul.mega-menu .mega-menu-items{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
}

/* Featured region — shaded right column with a vertical divider on
   the left edge. Not a nested rounded card any more; it's a region
   of the same panel, separated by a 1-px divider line. */
.main-menu ul ul.mega-menu .mega-menu-featured-wrap{
	display: block;
	flex: 0 0 320px;
	padding: 36px 32px;
	margin: 0;
	background: var(--secondary-color);
	border-left: 1px solid var(--divider-color);
}

/* News & Events variant: only 2 items — narrower items area so the
   featured tile gets more breathing room and items don't stretch
   too wide. */
.main-menu ul ul.mega-menu.mega-menu-sm .mega-menu-items{
	grid-template-columns: repeat(2, minmax(220px, 280px));
	justify-content: start;
}

/* Item card — icon block + text column, Labrix's icon-box convention */
.main-menu ul ul.mega-menu a.mega-menu-item{
	display: flex !important;
	align-items: flex-start;
	gap: 16px;
	padding: 14px 16px !important;
	border-radius: 12px;
	color: var(--primary-color);
	background: transparent;
	transition: background-color 0.2s ease-in-out;
	text-align: left;
}

.main-menu ul ul.mega-menu a.mega-menu-item:hover,
.main-menu ul ul.mega-menu a.mega-menu-item:focus{
	background-color: var(--secondary-color);
	color: var(--primary-color);
	padding: 14px 16px !important;
}

/* Suppress Labrix's submenu chevron-after on mega items */
.main-menu ul li.submenu ul.mega-menu li > a:after,
.main-menu ul li.submenu ul.mega-menu a.mega-menu-item:after{
	content: none !important;
}

/* Icon block — Labrix's "icon-box" pattern: coloured square backplate
   with the SVG icon inside. Default = red backplate + blush icon
   (matches service-card icons elsewhere on the page). */
.mega-menu-icon{
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--accent-color);
	border-radius: 50%;
	transition: background-color 0.2s ease-in-out;
	overflow: hidden;
}

.mega-menu-icon img{
	width: 100%;
	max-width: 24px;
	height: auto;
	transition: filter 0.2s ease-in-out;
}

/* Hover: backplate flips to navy (primary) — icon stays blush since
   SVG fills are already blush; both colour pairings keep contrast. */
.main-menu ul ul.mega-menu a.mega-menu-item:hover .mega-menu-icon{
	background-color: var(--primary-color);
}

/* Title + description column */
.mega-menu-text{
	display: flex;
	flex-direction: column;
	gap: 4px;
	line-height: 1.4;
	min-width: 0;
	padding-top: 2px;
}

.mega-menu-text strong{
	font-family: var(--accent-font);
	font-size: 15px;
	font-weight: 700;
	color: var(--primary-color);
	text-transform: none;
	line-height: 1.2;
}

.mega-menu-text span{
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-color);
	font-weight: 400;
}

/* Featured tile — pure layout container; the shaded background +
   vertical divider live on .mega-menu-featured-wrap above. */
.mega-menu-featured{
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
}

.mega-menu-featured h6{
	font-family: var(--accent-font);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--accent-color);
	margin: 0;
}

.mega-menu-featured p{
	font-size: 14px;
	line-height: 1.55;
	color: var(--primary-color);
	margin: 0;
	flex: 1;
}

.main-menu ul ul.mega-menu .mega-menu-featured a.featured-cta{
	align-self: flex-start;
	display: inline-block;
	font-family: var(--accent-font);
	font-size: 14px;
	font-weight: 700;
	color: var(--accent-color);
	text-decoration: none;
	margin-top: 6px;
	padding: 0 !important;
	background: transparent;
}

.main-menu ul ul.mega-menu .mega-menu-featured a.featured-cta:hover,
.main-menu ul ul.mega-menu .mega-menu-featured a.featured-cta:focus{
	background: transparent !important;
	padding: 0 !important;
	text-decoration: underline;
}

/* Mobile (≤991px) — strip desktop panel styling. Slicknav renders the
   nav as a stacked accordion; only the text links survive. */
@media (max-width: 991px){
	.main-menu ul ul.mega-menu,
	.main-menu ul ul.mega-menu.mega-menu-sm{
		width: auto;
		max-width: none;
		left: 0;
		margin-left: 0;
		padding: 0;
		background: var(--accent-color);
		border: none;
		box-shadow: none;
		transform: none;
		display: block;
		gap: 0;
	}
	.main-menu ul ul.mega-menu .mega-menu-items,
	.main-menu ul ul.mega-menu.mega-menu-sm .mega-menu-items{
		display: block;
		grid-template-columns: none;
	}
	.main-menu ul ul.mega-menu a.mega-menu-item{
		display: block !important;
		padding: 8px 20px !important;
		background: transparent;
		color: var(--on-accent-color);
	}
	.mega-menu-icon{ display: none; }
	/* Slicknav clones #menu into .slicknav_nav so the featured-tile
	   <li> is reproduced inside the drawer. !important + the
	   cloned-tree selector ensure both copies are hidden on mobile,
	   and the * descendant rule kills any leakage of <h6>/<p>/<a>
	   markup Slicknav might render outside the wrap's bounding box. */
	.mega-menu-featured-wrap,
	.mega-menu-featured-wrap *,
	.slicknav_nav .mega-menu-featured-wrap,
	.slicknav_nav .mega-menu-featured-wrap *{
		display: none !important;
	}
	.mega-menu-text strong{ color: var(--on-accent-color); }
	.mega-menu-text span{ display: none; }
}

/* HIRI mobile polish (≤575px) — small phones, additional logo + nav
   trim on top of the existing ≤991px mobile mega-menu collapse. */
@media (max-width: 575px){
	.navbar-brand img{
		width: 104px !important;
		height: 47px !important;
	}
	.navbar{
		padding: 14px 0;
	}
	/* Tighten drawer rows slightly to keep the menu shorter on
	   small viewports while still respecting a ≥44px touch target. */
	.slicknav_nav .slicknav_row,
	.slicknav_nav li a{
		padding: 12px 18px;
		font-size: 15px;
	}
	.slicknav_menu ul ul li a{
		padding: 10px 18px 10px 32px;
		font-size: 14px;
	}
}

/* HIRI: 'Get in touch' CTA pinned to the bottom of the mobile
   drawer. Only renders ≤991px (handled inline in the HTML), so
   no media query needed here — these are presentational rules
   for the block when it appears. */
.mobile-drawer-cta{
	display: none;   /* hidden by default; the ≤991 rule below flips it on */
}

@media (max-width: 991px){
	/* Both the original .mobile-drawer-cta <li> and Slicknav's
	   clone need to flip on. Higher-specificity selectors prefixed
	   with .slicknav_nav win over .slicknav_nav li a (the rule
	   that styles drawer rows) without needing !important on
	   every property. */
	.mobile-drawer-cta,
	.slicknav_nav .mobile-drawer-cta{
		display: block !important;
		padding: 16px 20px !important;
		border-top: 1px solid var(--dark-divider-color);
		background-color: rgba(0, 0, 0, 0.10);
		border-bottom: none;
	}
	.mobile-drawer-cta a,
	.slicknav_nav .mobile-drawer-cta a,
	.slicknav_nav li.mobile-drawer-cta a{
		display: block !important;
		padding: 12px 18px !important;
		text-align: center;
		font-family: var(--accent-font);
		font-size: 15px;
		font-weight: 700;
		text-transform: none !important;
		color: var(--accent-color) !important;
		background-color: var(--on-accent-color);
		border-radius: 8px;
		border-bottom: none !important;
		text-decoration: none;
		transition: background-color 0.2s ease-in-out;
	}
	.mobile-drawer-cta a:hover,
	.mobile-drawer-cta a:focus,
	.slicknav_nav .mobile-drawer-cta a:hover,
	.slicknav_nav .mobile-drawer-cta a:focus,
	.slicknav_nav li.mobile-drawer-cta a:hover,
	.slicknav_nav li.mobile-drawer-cta a:focus{
		background-color: var(--white-color) !important;
		color: var(--accent-color) !important;
	}
}

/* Respect user motion preferences — disable scroll-trigger
   animations + the preloader spin for users who opt into
   reduced motion at the OS level (WCAG 2.3.3 / SC 2.3.3 motion). */
@media (prefers-reduced-motion: reduce){
	*,
	*::before,
	*::after{
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}


/************************************/
/***  36. Listing-page sidebar (HIRI) ***/
/************************************/

/* Sidebar used on listing pages (/projects/, /resource-library/*, etc.).
   Two layouts ship in this block:
     - `.listing-sidebar` — the <aside> column container
     - `.listing-sidebar-block` — one card per block (Search, Filter group, Filter group…)
     - `.listing-sidebar-search` — the search-input row inside the Search block
     - `.listing-filter-list` — the link list inside a Filter block, with chevron arrow
   Brand: white cards, navy headings + links, red active state, soft-blush divider lines.
   Built outside Labrix's vocab because Labrix's blog.html sidebar is a different shape. */

.listing-sidebar{
	display: flex;
	flex-direction: column;
	gap: 24px;
	position: sticky;
	top: 110px;   /* clear the sticky header */
}

.listing-sidebar-block{
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 24px 22px;
}

.listing-sidebar-heading{
	font-family: var(--accent-font);
	font-size: 20px;
	font-weight: 700;
	color: var(--primary-color);
	margin: 0 0 16px;
	text-transform: none;
}

/* Search box ------------------------------------------------------- */

.listing-sidebar-search{
	position: relative;
}

.listing-sidebar-search input.form-control{
	width: 100%;
	height: 48px;
	padding: 10px 48px 10px 16px;
	font-family: var(--default-font);
	font-size: 15px;
	color: var(--primary-color);
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.listing-sidebar-search input.form-control:focus{
	outline: none;
	border-color: var(--accent-color);
	box-shadow: 0 0 0 3px rgba(127, 13, 21, 0.10);
}

.listing-sidebar-search input.form-control::placeholder{
	color: var(--text-color);
	opacity: 0.7;
}

.listing-sidebar-search-btn{
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	color: var(--primary-color);
	font-size: 16px;
	cursor: pointer;
	border-radius: 6px;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.listing-sidebar-search-btn:hover,
.listing-sidebar-search-btn:focus{
	background-color: var(--secondary-color);
	color: var(--accent-color);
}

/* Filter list (Status / Theme / etc.) ----------------------------- */

.listing-filter-list{
	list-style: none;
	padding: 0;
	margin: 0;
}

.listing-filter-list li{
	border-bottom: 1px solid var(--divider-color);
}

.listing-filter-list li:last-child{
	border-bottom: none;
}

.listing-filter-list li a{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 4px;
	font-family: var(--accent-font);
	font-size: 16px;
	font-weight: 600;
	color: var(--primary-color);
	text-transform: none;
	text-decoration: none;
	transition: color 0.2s ease-in-out;
}

.listing-filter-list li a::after{
	content: '\f061';   /* fa-arrow-right */
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 14px;
	color: var(--primary-color);
	transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
	flex-shrink: 0;
}

.listing-filter-list li a:hover,
.listing-filter-list li a:focus{
	color: var(--accent-color);
}

.listing-filter-list li a:hover::after,
.listing-filter-list li a:focus::after{
	color: var(--accent-color);
	transform: translateX(4px);
}

/* Active state — used on the currently-selected filter (e.g. "All"). */
.listing-filter-list li a.active,
.listing-filter-list li a[aria-current="true"]{
	color: var(--accent-color);
}

.listing-filter-list li a.active::after,
.listing-filter-list li a[aria-current="true"]::after{
	color: var(--accent-color);
}

/* Mobile: the sticky-positioned sidebar collapses to a regular flow
   item above the cards (Bootstrap col stacking handles the order). */
@media (max-width: 991px){
	.listing-sidebar{
		position: static;
		top: auto;
		gap: 16px;
	}
	.listing-sidebar-block{
		padding: 18px 18px;
	}
}


/************************************/
/***  37. Project card (HIRI)      ***/
/************************************/

/* HIRI "listing-card" — one cohesive unit where the image is the
   top half of the card (flush with corners, no inner padding),
   tags are overlaid on the image (top-left, stacked), a circular
   funding-year badge overlaps the image/content boundary on the
   right, and the content area carries just the title + short
   description. Used on /projects/ today; designed to be reusable
   on other listing pages (publications, reports, etc.) later.

   Spec inspired by user references im2.png + im3.png:
     - im3: overlaid pill tags top-left, news-card feel
     - im2: circular date/badge overlapping image-content edge
   Combined here ("hybrid C") with simplified content (no meta line,
   no "Read More" link — whole card is a single <a>).
*/

/* The clickable card itself */
a.listing-card{
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--white-color);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(7, 35, 77, 0.06);
	text-decoration: none;
	color: inherit;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	/* Vertical gap between wrapped rows is provided by Bootstrap's
	   `gy-5` utility on the parent .row (in the HTML), NOT by a
	   margin here — keeps spacing consistent with Bootstrap's
	   gutter system and avoids the wrapping-edge cases. */
}

a.listing-card:hover,
a.listing-card:focus{
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(7, 35, 77, 0.14);
	text-decoration: none;
	color: inherit;
}

/* IMAGE area — flush with the card's rounded corners.
   Outer .listing-card-image has NO overflow:hidden so the year badge
   can extend below it into the content area (the sticker effect).
   The inner .listing-card-image-frame carries overflow:hidden so the
   hover-zoom on the <img> stays inside the image area. */
.listing-card-image{
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--secondary-color);  /* fallback whilst image loads */
}

.listing-card-image-frame{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.listing-card-image-frame img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

a.listing-card:hover .listing-card-image-frame img{
	transform: scale(1.05);
}

/* Overlaid tags top-left (theme + status, stacked) */
.listing-card-tags{
	position: absolute;
	top: 12px;
	left: 12px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	z-index: 2;
}

.listing-card-tag{
	display: inline-block;
	padding: 5px 12px;
	background: var(--white-color);
	color: var(--primary-color);
	font-family: var(--accent-font);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(7, 35, 77, 0.10);
	line-height: 1.2;
}

/* Status variants — colour-codes Ongoing vs Completed */
.listing-card-tag--ongoing{
	background: var(--accent-color);
	color: var(--on-accent-color);
}

.listing-card-tag--completed{
	background: var(--primary-color);
	color: var(--white-color);
}

/* Circular funding-year badge — sits at the image/content seam,
   overlapping into the content area by 24px. Full circle visible
   because .listing-card-image (the badge's positioned ancestor)
   no longer has overflow:hidden; only the inner image-frame does. */
.listing-card-badge{
	position: absolute;
	right: 16px;
	bottom: -24px;
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--accent-color);
	color: var(--on-accent-color);
	border: 4px solid var(--white-color);
	border-radius: 50%;
	font-family: var(--accent-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	z-index: 2;
	box-shadow: 0 4px 12px rgba(7, 35, 77, 0.18);
}

/* Date variant — same footprint as the circle, but rounded square
   to hold stacked "DAY" / "MON" lines (events) or "MON" / "YYYY"
   lines (news). Use .listing-card-badge.listing-card-badge--date
   on the wrapping <span> and split the content into <span class="badge-day">
   + <span class="badge-month">. */
.listing-card-badge--date{
	flex-direction: column;
	border-radius: 12px;
	padding: 6px 0;
	line-height: 1;
}

.listing-card-badge--date .badge-day{
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0;
	margin-bottom: 2px;
}

.listing-card-badge--date .badge-month{
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.95;
}

/* CONTENT area — title + short description + Project Details CTA */
.listing-card-content{
	padding: 32px 22px 22px;     /* extra top padding to clear the badge overlap */
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.listing-card-title{
	font-family: var(--accent-font);
	font-size: 19px;
	font-weight: 700;
	color: var(--primary-color);
	margin: 0;
	line-height: 1.3;
	text-transform: none;
}

a.listing-card:hover .listing-card-title,
a.listing-card:focus .listing-card-title{
	color: var(--accent-color);
}

.listing-card-description{
	font-family: var(--default-font);
	font-size: 14px;
	line-height: 1.55;
	color: var(--text-color);
	margin: 0;
	flex: 1 1 auto;   /* push CTA to bottom of card */
	text-transform: none;
}

/* "Project Details →" CTA at the bottom of each card.
   The whole card is already a single <a>, but the explicit CTA
   gives a clear affordance and a hover-animated arrow. */
.listing-card-cta{
	margin-top: 14px;
	color: var(--accent-color);
	font-family: var(--accent-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.listing-card-cta::after{
	content: '\f061';   /* fa-arrow-right */
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 12px;
	transition: transform 0.2s ease;
}

a.listing-card:hover .listing-card-cta::after,
a.listing-card:focus .listing-card-cta::after{
	transform: translateX(4px);
}

/* Hide cards filtered out by data-attributes. The listing-filter.js
   script toggles the [hidden] attribute on .listing-card-col when a
   sidebar filter or search excludes the card. */
.listing-card-col[hidden]{
	display: none !important;
}

/* Empty-state callout shown when filters exclude every card.
   Injected dynamically by listing-filter.js (no markup in the page
   templates). */
.listing-empty-state{
	margin: 16px 0 32px;
	padding: 22px 24px;
	background: var(--secondary-color);
	border-radius: 12px;
	color: var(--primary-color);
	font-family: var(--default-font);
	font-size: 15px;
	text-align: center;
}

.listing-empty-state[hidden]{
	display: none;
}

.listing-empty-state a{
	color: var(--accent-color);
	text-decoration: underline;
	font-weight: 700;
}

.listing-empty-state a:hover,
.listing-empty-state a:focus{
	color: var(--primary-color);
}


/************************************/
/***  38. Global search overlay (HIRI) ***/
/************************************/

/* Header search trigger — replaces the old "Get in touch" red button.
   Uses Labrix's .btn-default.btn-highlighted styling but adds a leading
   magnifying-glass icon. */
.header-btn .search-trigger,
.search-trigger.btn-default{
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.search-trigger .fa-magnifying-glass{
	font-size: 14px;
}

/* The overlay itself — full-screen modal with a dark navy backdrop
   and a centred input + result panel.
   - .search-overlay is the backdrop / dialog root
   - [hidden] hides it; JS toggles by removing the attribute */
.search-overlay{
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(7, 35, 77, 0.92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 80px 20px 40px;
	overflow-y: auto;
	animation: search-overlay-fade-in 0.18s ease-out;
}

.search-overlay[hidden]{
	display: none;
}

@keyframes search-overlay-fade-in{
	from { opacity: 0; }
	to   { opacity: 1; }
}

.search-overlay-inner{
	width: min(720px, 100%);
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.search-overlay-title{
	font-family: var(--accent-font);
	font-size: 14px;
	font-weight: 700;
	color: var(--secondary-color);
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	text-align: center;
	opacity: 0.85;
}

.search-overlay-input-wrap{
	position: relative;
}

.search-overlay-input-icon{
	position: absolute;
	left: 22px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--primary-color);
	font-size: 18px;
	pointer-events: none;
}

.search-overlay-input{
	width: 100%;
	height: 64px;
	padding: 0 22px 0 56px;
	background: var(--white-color);
	color: var(--primary-color);
	font-family: var(--default-font);
	font-size: 18px;
	border: 2px solid transparent;
	border-radius: 12px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-overlay-input:focus{
	outline: none;
	border-color: var(--accent-color);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25),
	            0 0 0 4px rgba(127, 13, 21, 0.20);
}

.search-overlay-input::placeholder{
	color: var(--text-color);
	opacity: 0.65;
}

.search-overlay-hint{
	font-family: var(--default-font);
	font-size: 12px;
	color: var(--secondary-color);
	opacity: 0.75;
	text-align: center;
	margin: 0;
}

.search-overlay-hint kbd{
	display: inline-block;
	min-width: 22px;
	padding: 2px 6px;
	margin: 0 2px;
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.20);
	border-radius: 4px;
	font-family: var(--accent-font);
	font-size: 11px;
	color: var(--white-color);
	text-align: center;
}

.search-overlay-results{
	margin-top: 6px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: calc(100vh - 260px);
	overflow-y: auto;
	padding: 2px;     /* keep focus ring visible */
}

.search-overlay-empty{
	color: var(--secondary-color);
	font-family: var(--default-font);
	font-size: 14px;
	text-align: center;
	padding: 40px 12px;
	opacity: 0.75;
}

.search-overlay-result{
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 20px;
	background: var(--white-color);
	border: 1px solid transparent;
	border-radius: 10px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, transform 0.15s ease,
	            box-shadow 0.15s ease;
}

.search-overlay-result:hover,
.search-overlay-result:focus,
.search-overlay-result.active{
	border-color: var(--accent-color);
	transform: translateX(4px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
	text-decoration: none;
	color: inherit;
	outline: none;
}

.search-overlay-result-type{
	display: inline-block;
	align-self: flex-start;
	padding: 2px 10px;
	background: var(--secondary-color);
	color: var(--accent-color);
	font-family: var(--accent-font);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 999px;
}

.search-overlay-result-title{
	font-family: var(--accent-font);
	font-size: 17px;
	font-weight: 700;
	color: var(--primary-color);
	margin: 0;
	line-height: 1.3;
}

.search-overlay-result-desc{
	font-family: var(--default-font);
	font-size: 14px;
	color: var(--text-color);
	margin: 0;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.search-overlay-result mark{
	background: var(--secondary-color);
	color: var(--primary-color);
	padding: 1px 2px;
	border-radius: 3px;
}

/* Close (X) button — top right of the overlay */
.search-overlay-close{
	position: absolute;
	top: 20px;
	right: 24px;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.30);
	border-radius: 50%;
	color: var(--white-color);
	font-size: 18px;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.search-overlay-close:hover,
.search-overlay-close:focus{
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--on-accent-color);
	outline: none;
}

/* Lock the body scroll while the overlay is open (toggled by JS). */
body.search-open{
	overflow: hidden;
}

/* Mobile tuning */
@media (max-width: 575px){
	.search-overlay{
		padding: 64px 14px 24px;
	}
	.search-overlay-input{
		height: 56px;
		font-size: 16px;
	}
	.search-overlay-close{
		top: 12px;
		right: 12px;
		width: 40px;
		height: 40px;
	}
}


/************************************/
/***  39. Social icons row (HIRI)  ***/
/************************************/

/* Reusable social-icon strip used in the footer's "Connect with
   HIRI" block and on the contact page. One <ul> of <li><a><i></i></a>.
   Default colours suit a light card background; the
   `.dark-section .hiri-social-icons a` override below swaps to a
   subtle white-on-navy bubble for the footer's navy ground. */

.hiri-social-icons{
	display: flex;
	flex-wrap: nowrap;   /* keep the 3 icons on one row in the footer column */
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hiri-social-icons li{
	margin: 0;
}

.hiri-social-icons a{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--primary-color);
	color: var(--white-color);
	font-size: 16px;
	transition: background-color 0.2s ease, color 0.2s ease,
	            transform 0.2s ease;
	text-decoration: none;
}

.hiri-social-icons a:hover,
.hiri-social-icons a:focus{
	background: var(--accent-color);
	color: var(--on-accent-color);
	transform: translateY(-2px);
	text-decoration: none;
	outline: none;
}

/* Footer / dark backgrounds: subtle white bubble, accent on hover */
.dark-section .hiri-social-icons a{
	background: rgba(255, 255, 255, 0.10);
	color: var(--white-color);
}

.dark-section .hiri-social-icons a:hover,
.dark-section .hiri-social-icons a:focus{
	background: var(--accent-color);
	color: var(--on-accent-color);
}

/* Small "Follow us" label shown above the icons */
.hiri-social-label{
	font-family: var(--accent-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 14px 0 10px;
	opacity: 0.85;
}

/* Footer "Connect with HIRI" block — HIRI-specific list that keeps
   the label + value inline (Labrix's `.footer-working-hour-box ul li`
   uses justify-content: space-between, which pushes 'info@hiri.ac.ug'
   to the far right and wraps 'Makerere University, …'). The HIRI
   layout instead reads as `Email: info@hiri.ac.ug` with the value
   directly after the label, falling back to the next line only when
   the column is genuinely narrower than the line. */
.footer-connect-list{
	list-style: none;
	padding: 0;
	margin: 0 0 6px;
}

.footer-connect-list li{
	color: var(--white-color);
	margin-bottom: 10px;
	line-height: 1.5;
	text-transform: none;
}

.footer-connect-list li:last-child{
	margin-bottom: 0;
}

.footer-connect-list li strong{
	color: var(--white-color);
	font-weight: 700;
	margin-right: 4px;
}

.footer-connect-list li a{
	color: var(--white-color);
	transition: color 0.2s ease;
}

.footer-connect-list li a:hover,
.footer-connect-list li a:focus{
	color: var(--accent-color);
}

/* Drop the red disc markers Labrix renders on the Quick Links +
   Resource Library footer columns. The marker rule lives at
   `.footer-links ul li::marker { color: var(--accent-color); }`;
   we keep the rule but switch the parent to list-style: none so
   no marker is drawn. Padding-left also goes back to 0. */
.footer-links ul{
	list-style: none;
	padding-left: 0;
}

/* Collapse the double-padding gap between an .about-us intro and the
   listing section that follows it on /projects/, /news-events/*/, and
   /resource-library/*/. Without this override, .about-us {padding: 100px 0}
   + .page-case-study {padding-top: 100px} (or .page-blog) stacks to a
   200-px void between the intro paragraph and the first row of cards.
   Adjacent-sibling selector keeps the rule purely additive (doesn't
   touch either Labrix rule). */
.about-us + .page-case-study,
.about-us + .page-blog,
.about-us + .page-services,
.about-us + .page-researchers,
.about-us + .our-services{
	padding-top: 0;
}

/* And shrink .about-us' OWN bottom padding when it's about to be
   followed by one of these listing sections. Drops the total gap
   from 100 + 30 = 130px down to 30 + 30 = 60px. Uses CSS :has()
   (Chrome 105+, Safari 15.4+, Firefox 121+) — gracefully degrades
   to the 130px fallback in older browsers. */
.about-us:has(+ .page-case-study),
.about-us:has(+ .page-blog),
.about-us:has(+ .page-services),
.about-us:has(+ .page-researchers),
.about-us:has(+ .our-services){
	padding-bottom: 0;
}

/* Collapse the .section-row {margin-bottom: 80px} Labrix default
   inside the .about-us intro when it precedes one of these sections.
   The 80px gap is needed when .section-row separates content within
   the same section; here, the row IS the section's body and the next
   section provides its own breathing room. Safe to compress without
   affecting column widths (margin only moves what's below). */
.about-us:has(+ .page-case-study) .section-row,
.about-us:has(+ .page-blog) .section-row,
.about-us:has(+ .page-services) .section-row,
.about-us:has(+ .page-researchers) .section-row,
.about-us:has(+ .our-services) .section-row{
	margin-bottom: 10px;
}

/* HIRI: the collapse above is for an intro paragraph sitting directly on top
   of a card grid. When the following .our-services is a full, distinct
   section (home "Explore HIRI"), mark it .our-services--spaced to restore the
   normal section gap. Additive; does not affect the resource/news listings. */
.about-us + .our-services.our-services--spaced{
	padding-top: 100px;
}
.about-us:has(+ .our-services--spaced){
	padding-bottom: 100px;
}
.about-us:has(+ .our-services--spaced) .section-row{
	margin-bottom: 80px;
}

/* HIRI: preloader rotating ring → white (Labrix sets it to
   --accent-color red). Additive override; the rule above on
   .loading stays for the animation + sizing. */
.loading{
	border-color: transparent var(--white-color) transparent var(--white-color);
}


/************************************/
/***  40. Partner logo wall (HIRI) ***/
/************************************/

/* Categorised grid of partner / funder logos used on
   /who-we-are/partners/. One <div class="partners-category"> per
   group, with a small uppercase label heading and a CSS grid of
   .partner-logo cards (logo + institution name).
   Reusable on /research-themes/, /projects/, or anywhere a
   logo-wall pattern is wanted. */

.partners-category{
	margin-bottom: 60px;
}

.partners-category:last-child{
	margin-bottom: 0;
}

.partners-category-heading{
	display: inline-block;
	font-family: var(--accent-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent-color);
	margin: 0 0 22px;
	padding: 6px 14px;
	background: var(--secondary-color);
	border-radius: 999px;
}

.partners-logo-grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 20px;
}

.partner-logo{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 14px;
	padding: 24px 18px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	transition: transform 0.2s ease, box-shadow 0.2s ease,
	            border-color 0.2s ease;
	text-decoration: none;
	color: inherit;
	height: 100%;
}

.partner-logo:hover,
.partner-logo:focus{
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(7, 35, 77, 0.10);
	border-color: var(--accent-color);
	color: inherit;
	text-decoration: none;
	outline: none;
}

.partner-logo-image{
	width: 100%;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.partner-logo-image img{
	max-width: 100%;
	max-height: 80px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.partner-logo-name{
	font-family: var(--accent-font);
	font-size: 13px;
	font-weight: 600;
	color: var(--primary-color);
	text-align: center;
	line-height: 1.4;
	text-transform: none;
	margin: 0;
	min-height: 36px;     /* keeps card heights consistent across grid */
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Smaller screens: tighter 2-up grid */
@media (max-width: 575px){
	.partners-logo-grid{
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
	.partner-logo{
		padding: 18px 12px 14px;
		gap: 10px;
	}
	.partner-logo-image{
		height: 60px;
	}
	.partner-logo-image img{
		max-height: 60px;
	}
	.partner-logo-name{
		font-size: 12px;
		min-height: 32px;
	}
	.partners-category{
		margin-bottom: 40px;
	}
}

/* Partner-page "Become a partner" CTA — stacked primary + secondary
   actions inside the right column of the .our-pricing row. The primary
   button is the loud accent pill with an arrow; the secondary is an
   underlined mailto so the email address itself is visible without a
   click. */
.partner-cta-actions{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
}

.partner-cta-primary{
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.partner-cta-primary i{
	font-size: 14px;
	transition: transform 0.25s ease;
}

.partner-cta-primary:hover i,
.partner-cta-primary:focus i{
	transform: translateX(4px);
}

.partner-cta-secondary{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--default-font);
	font-size: 14px;
	color: var(--text-color);
	text-decoration: none;
	border-bottom: 1px dashed rgba(7, 35, 77, 0.25);
	padding-bottom: 2px;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.partner-cta-secondary strong{
	color: var(--primary-color);
	font-weight: 700;
}

.partner-cta-secondary:hover,
.partner-cta-secondary:focus{
	color: var(--accent-color);
	border-bottom-color: var(--accent-color);
}

.partner-cta-secondary:hover strong,
.partner-cta-secondary:focus strong{
	color: var(--accent-color);
}

@media (max-width: 991px){
	.partner-cta-actions{
		align-items: flex-start;
		margin-top: 24px;
	}
}


/************************************/
/***  41. Researcher card (HIRI)   ***/
/************************************/

/* Cards for the /who-we-are/researchers/ page. Driven by
   _src/data/researchers.json via the build.py @researchers
   directive. Two card variants:
     - .researcher-card                  static profile card
                                         (Co-PIs, Associate Experts,
                                         Fellows) — shows socials row
     - .researcher-card.researcher-card--linked
                                         clickable anchor leading to
                                         the PI detail page. Hover
                                         lifts + accentuates. */

.page-researchers{
	padding: 30px 0 100px;
}

.researchers-group{
	margin-bottom: 60px;
}

.researchers-group:last-child{
	margin-bottom: 0;
}

.researchers-group-header{
	margin-bottom: 28px;
	max-width: 760px;
}

.researchers-group-label{
	display: inline-block;
	font-family: var(--accent-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent-color);
	margin: 0 0 12px;
	padding: 6px 14px;
	background: var(--secondary-color);
	border-radius: 999px;
}

.researchers-group-blurb{
	font-family: var(--default-font);
	font-size: 15px;
	color: var(--text-color);
	margin: 0;
	line-height: 1.55;
	text-transform: none;
}

.researchers-group-empty{
	font-family: var(--default-font);
	font-size: 14px;
	color: var(--text-color);
	background: var(--secondary-color);
	padding: 22px 24px;
	border-radius: 12px;
	margin: 0;
	text-transform: none;
}

.researchers-group-empty a{
	color: var(--accent-color);
	font-weight: 700;
	text-decoration: underline;
}

/* Card grid — same minmax tile pattern as partners, but a bit wider */
.researchers-grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 24px;
}

/* Trainee cards are now compact + clickable (linking to their detail
   page at /training-and-capacity-building/<slug>/). They use the same
   layout as the linked PI researcher cards, so no special grid sizing
   needed — they inherit the 240px-minmax 3-up grid. */

.researcher-card-col{
	display: flex;
}

/* Card */
.researcher-card{
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 0;
	overflow: hidden;       /* clip the photo to the card's rounded top corners */
	transition: transform 0.2s ease, box-shadow 0.2s ease,
	            border-color 0.2s ease;
}

.researcher-card-col > .researcher-card{
	height: 100%;
}

a.researcher-card--linked{
	text-decoration: none;
	color: inherit;
}

a.researcher-card--linked:hover,
a.researcher-card--linked:focus{
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(7, 35, 77, 0.12);
	border-color: var(--accent-color);
	text-decoration: none;
	color: inherit;
	outline: none;
}

/* Photo — fills the top of the card edge-to-edge. No inner radius —
   the card's overflow:hidden clips it to the rounded top corners. */
.researcher-card-photo{
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--secondary-color);
}

.researcher-card-photo img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

/* Image zoom on hover applies to BOTH linked PI cards and static
   non-PI cards (matches Labrix's .team-item:hover .team-image img). */
.researcher-card:hover .researcher-card-photo img,
.researcher-card:focus .researcher-card-photo img{
	transform: scale(1.05);
}

/* Initials fallback when no photo supplied. Renders a centred two-
   letter chip inside the same square photo well so the card layout
   stays consistent. */
.researcher-card-photo--no-image{
	display: flex;
	align-items: center;
	justify-content: center;
}

.researcher-card-photo-initials{
	font-family: var(--accent-font);
	font-size: 56px;
	font-weight: 700;
	color: var(--primary-color);
}

/* Social-icons overlay — hidden by default at the bottom of the
   photo, slides up + fades in on .researcher-card:hover. Matches the
   Labrix .team-social-icon pattern exactly (vertical stack of navy
   bubbles, right-aligned). Only rendered for non-PI cards by build.py. */
.researcher-card-photo .researcher-card-socials{
	position: absolute;
	right: 16px;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transition: bottom 0.35s ease,
	            opacity 0.35s ease,
	            visibility 0.35s ease;
	z-index: 2;
}

.researcher-card:hover .researcher-card-photo .researcher-card-socials,
.researcher-card:focus-within .researcher-card-photo .researcher-card-socials{
	bottom: 16px;
	opacity: 1;
	visibility: visible;
}

.researcher-card-photo .researcher-card-socials li{ margin: 0; }

.researcher-card-photo .researcher-card-socials a{
	width: 36px;
	height: 36px;
	background: var(--primary-color);
	color: var(--white-color);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	transition: background-color 0.2s ease, color 0.2s ease,
	            transform 0.2s ease;
	text-decoration: none;
	padding: 0;
}

.researcher-card-photo .researcher-card-socials a:hover,
.researcher-card-photo .researcher-card-socials a:focus{
	background: var(--accent-color);
	color: var(--on-accent-color);
	transform: translateY(-1px);
	outline: none;
}

.researcher-card-body{
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 auto;
	padding: 18px 20px 0;       /* internal content padding (top + sides only) */
}

.researcher-card-name{
	font-family: var(--accent-font);
	font-size: 18px;
	font-weight: 700;
	color: var(--primary-color);
	margin: 0;
	line-height: 1.3;
	text-transform: none;
}

a.researcher-card--linked .researcher-card-name{
	transition: color 0.2s ease;
}

a.researcher-card--linked:hover .researcher-card-name{
	color: var(--accent-color);
}

.researcher-card-title{
	font-family: var(--default-font);
	font-size: 13px;
	font-weight: 600;
	color: var(--text-color);
	margin: 4px 0 0;
	line-height: 1.4;
	text-transform: none;
}

.researcher-card-affiliation{
	font-family: var(--default-font);
	font-size: 12px;
	color: var(--text-color);
	margin: 2px 0 0;
	line-height: 1.4;
	text-transform: none;
	opacity: 0.85;
}

.researcher-card-tags{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

.researcher-card-tag{
	display: inline-block;
	padding: 3px 10px;
	background: var(--secondary-color);
	color: var(--accent-color);
	font-family: var(--accent-font);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 999px;
	line-height: 1.4;
}

.researcher-card-bio{
	font-family: var(--default-font);
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-color);
	margin: 10px 0 0;
	text-transform: none;
}

/* Base socials styling for PI detail pages (where the strip lives
   beneath the title block, not inside a photo overlay). The overlay
   variant (above) overrides position/colour when the strip sits
   inside .researcher-card-photo on listing cards. */
.researcher-card-socials{
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
}

.researcher-card-socials li{ margin: 0; }

.researcher-card-socials a{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--secondary-color);
	color: var(--primary-color);
	font-size: 14px;
	transition: background-color 0.2s ease, color 0.2s ease,
	            transform 0.2s ease;
	text-decoration: none;
}

.researcher-card-socials a:hover,
.researcher-card-socials a:focus{
	background: var(--accent-color);
	color: var(--on-accent-color);
	transform: translateY(-1px);
	text-decoration: none;
}

/* "View profile" pseudo-CTA at the bottom of PI linked cards.
   Lives outside .body so it has its own horizontal padding. */
.researcher-card-cta{
	margin-top: auto;
	padding: 6px 20px 18px;
	color: var(--accent-color);
	font-family: var(--accent-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.researcher-card-cta::after{
	content: '\f061';
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 11px;
	transition: transform 0.2s ease;
}

a.researcher-card--linked:hover .researcher-card-cta::after,
a.researcher-card--linked:focus .researcher-card-cta::after{
	transform: translateX(3px);
}

/* --- PI detail page bits (used on /who-we-are/researchers/<slug>/) --- */

.researcher-detail{
	padding: 60px 0 100px;
}

.researcher-detail-grid{
	display: grid;
	grid-template-columns: minmax(240px, 320px) 1fr;
	gap: 48px;
	align-items: start;
}

.researcher-detail-photo{
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--secondary-color);
	border-radius: 16px;
	overflow: hidden;
}

.researcher-detail-photo img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.researcher-detail-name{
	font-family: var(--accent-font);
	font-size: 32px;
	font-weight: 700;
	color: var(--primary-color);
	margin: 0;
	line-height: 1.2;
	text-transform: none;
}

.researcher-detail-title{
	font-family: var(--default-font);
	font-size: 17px;
	color: var(--text-color);
	margin: 8px 0 0;
	line-height: 1.4;
	text-transform: none;
}

.researcher-detail-affiliation{
	font-family: var(--default-font);
	font-size: 15px;
	color: var(--text-color);
	margin: 6px 0 18px;
	line-height: 1.4;
	text-transform: none;
}

.researcher-detail-bio{
	font-family: var(--default-font);
	font-size: 16px;
	line-height: 1.7;
	color: var(--text-color);
	margin: 24px 0 0;
	text-transform: none;
}

.researcher-detail-bio p + p{
	margin-top: 16px;
}

@media (max-width: 768px){
	.researcher-detail-grid{
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.researcher-detail-photo{
		max-width: 280px;
	}
	.researcher-detail-name{
		font-size: 26px;
	}
}

@media (max-width: 575px){
	.researchers-grid{
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
	/* Card itself stays padding:0 (photo edge-to-edge). Tighten the
	   inner padding on body / socials / cta on small screens. */
	.researcher-card-body{
		padding: 14px 14px 0;
	}
	.researcher-card-socials,
	.researcher-card-cta{
		padding-left: 14px;
		padding-right: 14px;
		padding-bottom: 14px;
	}
	.researcher-card-name{
		font-size: 15px;
	}
	.researcher-card-photo--initials{
		font-size: 42px;
	}
}


/************************************/
/***  42. Training Activities (HIRI) ***/
/************************************/

/* The Activities section on /training-and-capacity-building/ —
   5 service-item cards. Two overrides only apply when the section
   carries the .training-activities class so other Labrix .our-services
   layouts (research themes, etc.) are untouched. */

/* 1. Background image — full-bleed AVIF behind the cards, with a
      blush-tinted overlay so the cards remain readable. The
      .bg-section already gives us the blush base; we just layer
      the image and an 82% blush tint on top. */
.training-activities{
	background-color: var(--secondary-color);
	background-image:
		linear-gradient(rgba(240, 202, 205, 0.82), rgba(240, 202, 205, 0.82)),
		url('/images/training-bg.avif');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* 2. (Was a 5-up grid override for service-item cards. Removed: the
      cards were replaced with Labrix's .work-steps-list pattern,
      which uses a vertical numbered-step layout in a 2-column row
      and doesn't need the col-width override.) */


/************************************/
/***  43. News detail gallery (HIRI) ***/
/************************************/

/* The optional .news-detail-gallery rendered at the bottom of an
   auto-generated news detail page (from news.json gallery[]).
   Stacks figures vertically with a small caption under each. */
.news-detail-gallery{
	margin: 30px 0 40px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.news-detail-gallery-figure{
	margin: 0;
}

.news-detail-gallery-figure img{
	width: 100%;
	height: auto;
	border-radius: 12px;
	display: block;
}

.news-detail-caption{
	font-family: var(--default-font);
	font-size: 13px;
	color: var(--text-color);
	text-align: center;
	margin-top: 10px;
	font-style: italic;
	text-transform: none;
}

/* News/blog detail page — optional .news-detail-resources block
   (linked resource CTA cards rendered from the source JSON's
   linked_resources[] array). */
.news-detail-resources{
	margin: 30px 0 24px;
	padding: 24px 26px;
	background: var(--secondary-color);
	border-radius: 14px;
}

.news-detail-resources-heading{
	font-family: var(--accent-font);
	font-size: 16px;
	font-weight: 700;
	color: var(--primary-color);
	margin: 0 0 14px;
	text-transform: none;
}

.news-detail-resource-card{
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	color: var(--primary-color);
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease,
	            box-shadow 0.2s ease;
}

.news-detail-resource-card + .news-detail-resource-card{
	margin-top: 10px;
}

.news-detail-resource-card:hover,
.news-detail-resource-card:focus{
	border-color: var(--accent-color);
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(7, 35, 77, 0.10);
	text-decoration: none;
	color: var(--primary-color);
	outline: none;
}

.news-detail-resource-card > i{
	font-size: 22px;
	color: var(--accent-color);
	flex-shrink: 0;
}

.news-detail-resource-text{
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 2px;
}

.news-detail-resource-text strong{
	font-family: var(--accent-font);
	font-size: 14px;
	color: var(--primary-color);
	text-transform: none;
}

.news-detail-resource-text span{
	font-family: var(--default-font);
	font-size: 12px;
	color: var(--text-color);
	text-transform: none;
}

.news-detail-resource-arrow{
	font-family: var(--accent-font);
	font-size: 18px;
	font-weight: 700;
	color: var(--accent-color);
	transition: transform 0.2s ease;
	flex-shrink: 0;
}

.news-detail-resource-card:hover .news-detail-resource-arrow,
.news-detail-resource-card:focus .news-detail-resource-arrow{
	transform: translateX(4px);
}


/****************************************
/***  44. Article detail sidebar (HIRI) ***
*****************************************/
/* Right-rail sidebar on news + blog detail pages. Three blocks:
   Categories (vertical list with arrow), Recent (3 thumb cards),
   Tags (chip cloud). Each block sits in its own card. Each block links back to the parent
   listing with ?category=<id> or ?tag=<value> URL params honoured by
   js/listing-filter.js. */

.article-sidebar {
	position: sticky;
	top: 100px;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

@media (max-width: 991px) {
	.article-sidebar {
		position: static;
		margin-top: 50px;
	}
}

.article-sidebar-block {
	background: var(--white-color);
	border: 1px solid rgba(7, 35, 77, 0.08);
	border-radius: 10px;
	padding: 24px;
}

.article-sidebar-heading {
	font-family: var(--accent-font);
	font-size: 20px;
	font-weight: 700;
	color: var(--primary-color);
	margin: 0 0 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(7, 35, 77, 0.08);
	text-transform: none;
}

/* --- Categories block --- */
.article-sidebar-categories {
	list-style: none;
	margin: 0;
	padding: 0;
}

.article-sidebar-categories li + li {
	margin-top: 4px;
}

.article-sidebar-categories a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 6px;
	font-family: var(--default-font);
	font-size: 15px;
	font-weight: 500;
	color: var(--text-color);
	text-decoration: none;
	text-transform: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.article-sidebar-categories a:hover,
.article-sidebar-categories a:focus {
	background: var(--secondary-color);
	color: var(--primary-color);
}

.article-sidebar-categories a.active {
	background: var(--accent-color);
	color: var(--on-accent-color);
}

.article-sidebar-categories a i {
	font-size: 12px;
	opacity: 0.6;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.article-sidebar-categories a:hover i,
.article-sidebar-categories a:focus i,
.article-sidebar-categories a.active i {
	opacity: 1;
	transform: translateX(3px);
}

/* --- Recent block --- */
.article-sidebar-recent-item {
	display: flex;
	gap: 14px;
	padding: 12px 0;
	text-decoration: none;
	border-top: 1px solid rgba(7, 35, 77, 0.06);
}

.article-sidebar-recent-item:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.article-sidebar-recent-item:last-of-type {
	padding-bottom: 0;
}

.article-sidebar-recent-thumb {
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	border-radius: 6px;
	overflow: hidden;
	background: var(--secondary-color);
}

.article-sidebar-recent-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.article-sidebar-recent-item:hover .article-sidebar-recent-thumb img,
.article-sidebar-recent-item:focus .article-sidebar-recent-thumb img {
	transform: scale(1.06);
}

.article-sidebar-recent-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.article-sidebar-recent-date {
	font-family: var(--default-font);
	font-size: 12px;
	font-weight: 500;
	color: var(--accent-color);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.article-sidebar-recent-title {
	font-family: var(--accent-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--primary-color);
	text-transform: none;
	transition: color 0.2s ease;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.article-sidebar-recent-item:hover .article-sidebar-recent-title,
.article-sidebar-recent-item:focus .article-sidebar-recent-title {
	color: var(--accent-color);
}

/* --- Tags block --- */
.article-sidebar-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.article-sidebar-tag {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid rgba(7, 35, 77, 0.12);
	border-radius: 999px;
	font-family: var(--default-font);
	font-size: 13px;
	font-weight: 500;
	color: var(--text-color);
	text-decoration: none;
	text-transform: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.article-sidebar-tag:hover,
.article-sidebar-tag:focus {
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--on-accent-color);
}


/****************************************
/***  45. Contact form (HIRI)         ***
*****************************************/
/* The Labrix contact-form-box layout flexes the form + map at 50/50.
   On /contact/ we removed the map, so the form column needs to expand
   to fill the wrapper. `--solo` is the additive modifier that opts in
   to the full-width treatment. Also adds styling for the new Category
   <select> dropdown so it matches the dark form theme. */

.contact-form-box.contact-form-box--solo .contact-us-form{
	width: 100%;
}

/* Category <select> — styled to match the input fields above it.
   .contact-form form .form-control is the existing Labrix rule; we
   only need to add the select-specific affordances (chevron + cursor)
   and ensure the colour pairs work on the navy form background. */
.contact-us-form select.form-control{
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23F0CACD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	padding-right: 44px;
}

.contact-us-form select.form-control option{
	background-color: var(--white-color);
	color: var(--primary-color);
}

/* ============================================================
   36. Hero slider (HIRI) — additive, new selectors only
   Equal-height slides so the cover-fit background fills an
   identical box on every slide, whatever each photo's
   proportions are. This removes the size shift that was
   visible as the slides faded between differently-shaped
   images. clamp() keeps it responsive (floor / preferred /
   ceiling) instead of a brittle fixed pixel height.
   Also nudges the hero eyebrow/subtitle up one step (14 -> 16px),
   scoped to .hero so the badge size elsewhere is untouched.
   ============================================================ */
.hero.hero-slider-layout .hero-slide{
	min-height: clamp(640px, 88vh, 920px);
}

.hero .section-title h3{
	font-size: 16px;
}

@media only screen and (max-width: 767px){
	.hero.hero-slider-layout .hero-slide{
		min-height: clamp(560px, 80vh, 720px);
	}
}