/*
Theme Name: JRD Bipel
Author: JE Consulting
Author URI: https://www.je-consulting.co.uk/
Version: 1.0.0
*/

/*************** Header ***************/
header .container {
	display: grid;
	grid-template-columns: 25% 73%;
	gap: 2%;
	align-items: center;
}
.HeaderContact {
	display: flex;
	justify-content: end;
	gap: 25px;
	margin-bottom: 20px;
}
.HeaderContact p{
	margin-bottom: 0;
}
nav .menu {
	justify-content: end;
}
nav .menu li a {
	color: var(--textcolour);
	text-transform: uppercase;
	padding: 5px 10px;
}
nav .menu li a:hover{
	color: #fff;
	background-color: var(--lightblue);
}
.HeaderContact p a {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--blue);
}
.HeaderContact p a:hover{
	color: var(--green);
}
.HeaderContact p a i {
	color: var(--textcolour);
	margin-right: 10px;
}
header {
	margin: 30px 0;
}
header nav .current-menu-item > a{
	font-weight: 700;
}
/**************************************/

/*************** Footer ***************/
.FooterContact {
	background-color: var(--blue);
	padding: 50px 0 50px 0;
	text-align: center;
}
.FooterContact h3, .FooterContact p{
	color: #fff;
	text-align: center;
}
.gform-body input, .gform-body textarea{
	border: 0;
	background-color: #fff;
	font-size: 0.938rem;
	line-height: 1.6em;
	font-weight: 400;
	color: var(--textcolour);
	font-family: 'Poppins';
}
.gfield--type-html p{
	text-align: left
}
footer {
	background-color: #333333;
	padding: 20px 0;
}
footer p {
	color: #fff;
	font-size: 0.7rem;
	text-align: center;
}
footer p a{
	font-size: inherit;
	color: inherit;
}
/**************************************/

/*************** Home Page ***************/
.HomeBanner .container {
	display: flex;
	grid-template-columns: repeat\(;
}
.FooterContact .gform_button{
	background-color: var(--green);
}
.HomeBanner {
	background-color: #e0e2e4;
	margin-bottom: 100px;
}
.HomeBanner .container {
	display: grid;
	align-items: center;
	gap: 5%;
	grid-template-columns: 45% auto;
}
.BannerTextBox {
	background-color: var(--green);
	padding: 15px 25px;
	margin-bottom: 15px;
}
.BannerTextBox p{
	color: #fff;
}
.BannerTextBox p {
	color: #fff;
	font-size: 1.625rem;
	line-height: 1.4em;
}
.BannerRight {
	position: relative;
	height: 100%;
}
.BannerRight img {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.BannerLeft {
	padding: 95px 0px;
}
.BannerLeft .Button {
	background-color: var(--darkblue);
}
.HomeProductPanel h6 {
	text-transform: uppercase;
	line-height: 1.4rem;
}
.HomeProductPanel h6 a{
	color: var(--textcolour);
}
.HomeProductItem > .vc_column-inner {
	background-image: url('img/arrow-blue.png');
	background-repeat: no-repeat;
	background-position: right 10px bottom 10px;
	background-size: 35px;
}
body .vc_btn3.vc_btn3-color-grey.vc_btn3-style-modern {
	background-color: var(--blue);
	color: #fff;
	background-image: url('img/button-arrow.png');
	background-repeat: no-repeat;
	background-position: right 10px center;
	padding: 10px 40px 10px 20px;
	text-transform: uppercase;
	font-size: 1.2rem;
	border: 0;
	border-radius: 0;
}
.customeloop.archive-loop .post-item {
	background-color: #ECECEC;
	background-image: url('img/arrow-blue.png');
	background-repeat: no-repeat;
	background-position: right 10px bottom 10px;
	background-size: 35px;
	padding: 30px;
	display: block;
}
.customeloop.archive-loop .postDate {
	margin-bottom: 0;
}
.post-item h4 {
	text-align: center;
	color: var(--titlecolour);
}
.post-item h4 a{
	color: inherit;
}
nav .menu li .sub-menu {
	background-color: var(--darkblue);
	min-width: 250px;
	left: 0;
	margin-top: -2px;
}
nav .menu li .sub-menu li a{
	color: #fff;
	padding: 5px 10px;
	border-bottom: 1px solid #fff;
	display: block;
}
nav .menu li .sub-menu li a:hover{
	background-color: var(--green);
}
/*****************************************/

/*********** custom archive page ************/
.ArchivePageTop {
  margin-bottom: 50px;
}
.ArchivePageTitle {
  text-align: center;
  color: var(--blue);
  margin-bottom: 50px;
}
.ArchivePageTop .PageSubTitle {
  text-align: center;
  line-height: 1.6em;
}
.ArchivePageTop p {
  text-align: center;
}
.ArchivePageBottom section {
  background-color: var(--lightgrey);
  padding: 50px 20px;
  margin-bottom: 50px;
}
.ArchivePageBottom section div {
  width: 750px;
  margin: 0 auto;
}
.ArchivePageBottom ul.grid-ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 100px;
  row-gap: 5px;
}
.ArchivePageBottom ul li {
  font-size: 22px;
}
.ArchivePageBottom ul li::before {
  top: 7px;
}
/********************************************/

/*********** custom product category page ************/
.ProductCategoryArchive {
	margin-top: 30px;
	display: grid;
	gap: 50px;
	grid-template-columns: 50% auto;
}
.ProductCategoryArchive .archive-loop {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}
.ProductCategoryArchive .archive-loop .ProductItem {
	padding: 10px;
	border: 2px solid var(--lightblue);
	background-color: var(--lightgrey);
	position: relative;
	background-image: url('img/arrow-blue.png');
	background-repeat: no-repeat;
	background-position: right 10px bottom 10px;
	background-size: 25px;
}
.ProductCategoryArchive .archive-loop .ProductItem:hover{
	background-color: var(--green);
}
.ProductCategoryArchive .archive-loop .ProductItem .ArchiveImage {
  width: 100%;
  height: 150px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.ProductCategoryArchive .archive-loop .ProductItem .PostTitle {
  margin-top: 20px;
  color: var(--textcolour);
  font-weight: 700;
  text-align: center;
}
.ProductCategoryArchive .archive-loop .postContentWrap {
  padding-bottom: 50px;
}
.ProductCategoryArchive .archive-loop .Button {
  display: block;
  font-size: 12px;
  position: absolute;
  bottom: 10px;
}
.ProductCategoryArchive.ProductCategoryNoDec{
	display: block;
}
.ProductCategoryArchive.ProductCategoryNoDec .archive-loop{
	grid-template-columns: repeat(5, minmax(0, 1fr));
}
/*****************************************************/

/************* Single post page layout ***************/
.PostContainer {
  display: flex;
  gap: 40px;
}
.PostContainer .left {
  width: 30%; /* Adjusted for more room for the image slider */
}
.PostContainer .left .related-content {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.PostContainer .left .related-content div {
  padding: 20px;
  text-align: center;
  background-color: var(--lightgrey);
  background-image: url('img/li-blue-arrow.png');
  background-repeat: no-repeat;
  background-position: bottom right;
}
.PostContainer .left .related-content div p,
.PostContainer .left .related-content div a {
  font-weight: 700;
  color: var(--textcolour);
}
.PostContainer .right {
  width: 70%;
}
.PostContainer .right .PageTitle {
	font-weight: 600;
	color: var(--blue);
	padding-bottom: 10px;
	border-bottom: 2px solid var(--blue);
	text-align: left;
}
/* main gallery slider */
.gallery-images {
  overflow: hidden;
}
.main-slider {
  max-width: 100%; /* Ensure it uses available space */
  position: relative;
}
.main-slider img {
  width: 100%; /* Ensure image stretches to container's width */
  height: auto; /* Maintain aspect ratio */
  object-fit: cover; /* Make sure the image fits without stretching */
}
.main-slider .swiper-button-next,
.main-slider .swiper-button-prev {
  border: 1px solid var(--white);
  border-radius: 50px;
  width: 35px;
  height: 35px;
  padding: 10px;
  text-shadow: 0px 2px 4px black;
  filter: drop-shadow(0 0 0.75rem black);
}
.main-slider .swiper-button-next:after {
  color: var(--white);
  font-size: 18px;
  position: relative;
  left: 2px;
}
.main-slider .swiper-button-prev:after {
  color: var(--white);
  font-size: 18px;
  position: relative;
  right: 2px;
}
/* thumbnail slider */
.thumbnail-slider {
  margin-top: 10px;
}
.thumbnail-slider .swiper-slide {
  width: 55px !important;
  cursor: pointer;
  opacity: 0.6; /* Slightly transparent for non-active thumbnails */
}
.thumbnail-slider .swiper-slide:hover {
  opacity: 1; /* Make thumbnail fully visible on hover */
  transition: opacity 0.3s ease;
}
.thumbnail-slider .swiper-slide-thumb-active {
  opacity: 1; /* Highlight the active thumbnail */
}
.thumbnail-slider img {
  width: 50px; /* Fixed size for thumbnails */
  height: 50px; /* Fixed size for thumbnails */
  object-fit: cover; /* Ensure thumbnails fit without distortion */
}
.archive .FooterContact {
	margin-top: 100px;
}
/*****************************************************/
.SingleWrap .container {
	display: grid;
	grid-template-columns: 75% auto;
	gap: 5%;
}
.SingleSideButton, .VacItem {
	display: block;
	padding: 20px;
	text-align: center;
	background-color: var(--lightgrey);
	background-image: url('img/li-blue-arrow.png');
	background-repeat: no-repeat;
	background-position: bottom right;
	font-weight: 700;
	color: var(--textcolour);
	font-size: 1.3rem;
	margin-bottom: 10px;
}
.SingleContent {
	margin-bottom: 100px;
}
.FeaturedImage {
	margin-bottom: 25px;
}
.CareersInfo {
	background-color: #EEEEEE;
	padding: 15px;
	display: grid;
	grid-template-columns: 75% auto;
	gap: 10px;
	margin-bottom: 30px;
}
.CareersInfo span {
	color: var(--lightblue);
	font-weight: 700;
}
.CareersInfo p {
	margin-bottom: 5px;
}
.CareersInfoInner {
	display: grid;
	grid-template-columns: repeat(2,1fr);
}
.DoubleLi ul {
	display: flex;
	flex-wrap: wrap;
	max-width: 600px;
	margin: 0 auto;
}
.DoubleLi ul li {
	width: 100%;
	max-width: 50%;
}
.PageTitle {
	text-align: center;
	margin-bottom: 50px;
	color: var(--blue);
}
.page .customeloop.archive-loop {
	grid-template-columns: repeat(4,1fr);
	margin-top: 40px;
}
.page .customeloop.archive-loop .post-item h4{
	font-size: 1.2rem;
	text-align: left;
}
.page .customeloop.archive-loop .post-item {
	padding: 0;
}
.customeloop.archive-loop .post-item .post-thumbnail {
	height: 200px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.page .customeloop.archive-loop .post-item .post-item-content {
	padding: 20px;
}
.FooterLoopItem {
	display: block;
	min-height: 350px;
	padding-top: 20px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.PageFooter {
	background-color: #333333;
	padding: 80px 0 0 0;
	margin-top: 100px;
}
.PageFooter .container {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 40px;
	margin-bottom: -40px;
}
.page-id-21 .PageFooter{
	padding-top: 40px;
}
.page-id-21 .PageFooter .container{
	margin-bottom: 0px;
	padding-bottom: 40px;
}
.page .FooterContact{
	padding-top: 100px;
}
.FooterLoopWrap {
	background-color: #fff;
	padding: 20px;
}
.FooterLoopWrap > h3{
	text-align: center;
}
.LoopTitle {
	background-color: rgba(3,158,243,.7);
	max-width: 95%;
	color: #fff;
	width: 100%;
	padding: 15px 30px;
	font-size: 1.25rem;
	margin: 0;
}
.LoopDate {
	padding: 15px 30px;
	font-size: 1.25rem;
	margin: 0;
	background-color: rgba(17, 147, 151, 0.9);
	font-weight: 700;
	color: #fff;
	display: inline-block;
}
.customeloop.archive-loop.grid3{ grid-template-columns: repeat(3,1fr); }
.customeloop.archive-loop.grid2{ grid-template-columns: repeat(2,1fr); }
.customeloop.archive-loop.grid5{ grid-template-columns: repeat(5,1fr); }
.customeloop.archive-loop .post-item:hover{
	background-color: var(--green);
}
.ContactPageForm .gform-body input, .ContactPageForm .gform-body textarea{
	border: 1px solid #333;
}
.page-id-23 .FooterContact{
	margin-top: 100px;
}
.single-products #ContentWrap {
	margin-bottom: 40px;
}
.HeaderMobile{
	display: none;
}
.MobileMenu{
	display: none;
}
.HeaderMobile{
		margin-top: 20px;
	}
	.HeaderMobile i {
		font-size: 27px;
		color: var(--blue);
		cursor: pointer;
	}
	.MobileMenu .menu {
		display: block;
		margin: 0;
		padding: 0;
	}
	.MobileMenu {
		background-color: var(--blue);
		margin-top: 15px;
	}
	.MobileMenu li a {
		display: block;
		padding: 5px 10px;
		color: #fff;
		border-bottom: 1px solid #fff;
	}
	.MobileMenu .menu li i {
		color: #fff;
		font-size: 17px;
		position: absolute;
		top: 0;
		right: 0;
		padding: 8px 10px;
	}
	.MobileMenu .sub-menu {
		width: 100%;
		position: relative;
	}
.ProductCategoryArchive.ProductCategoryNoDec .archive-loop .ProductItem .ArchiveImage{
	height: 215px;
}
@media (min-width: 480px) and (max-width: 950px) {
	.HeaderInfo {
		display: none;
	}
	header .container {
		display: block;
		text-align: center;
	}
	.HeaderMobile{
		display: block;
	}
	.page .customeloop.archive-loop {
		grid-template-columns: repeat(3,1fr);
	}
}

/* Device = Tablets, Ipads (portrait) */
@media (min-width: 768px) and (max-width: 1024px) {

}

/* Device = Tablets, Ipads (landscape) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

}

/* Device = Low Resolution Tablets, Mobiles (Landscape) */
@media (min-width: 481px) and (max-width: 767px) {
	.page .customeloop.archive-loop {
		grid-template-columns: repeat(1,1fr);
	}
}

/* Device = Most of the Smartphones Mobiles (Portrait) */
@media (min-width: 320px) and (max-width: 480px) {
	.page .customeloop.archive-loop {
		grid-template-columns: repeat(1,1fr);
	}
	.HeaderInfo {
		display: none;
	}
	header .container {
		display: block;
		text-align: center;
	}
	.BannerRight {
		display: none;
	}
	.HomeBanner .container {
		display: block;
	}
	.BannerLeft {
		padding: 20px 0px;
	}
	.customeloop.archive-loop.grid3, .customeloop.archive-loop.grid2, .customeloop.archive-loop.grid5, .page .customeloop.archive-loop{ 
		grid-template-columns: repeat(1,1fr);
	}
	.HeaderMobile{
		display: block;
	}
	
	.PageFooter .container {
		grid-template-columns: repeat(1,1fr);
		margin-bottom: 0;
	}
	.PageFooter{
		padding: 80px 0;
	}
	.ProductCategoryArchive {
		grid-template-columns: repeat(1,1fr);
	}
	.ProductCategoryArchive .archive-loop, .ProductCategoryArchive.ProductCategoryNoDec .archive-loop {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}