/* QBIT combined custom stylesheet */

/* =========================================================
   IMPORT FONTS
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');


/* =========================================================
   GLOBAL STYLES
========================================================= */

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

html {
	width: 100%;
	max-width: 100%;
	font-size: 100%;
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: normal;
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	width: 100%;
	max-width: 100%;
	letter-spacing: 0.2em;
	line-height: 2em;
	font-size: 0.8em;
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
	overflow-x: hidden;
}

a {
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
}

a:hover {
	color: #333;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 1.6em;
	font-family: 'Poppins', sans-serif;
	color: #1F1B71;
}

ul {
	list-style: none;
}

img {
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

main {
	width: 1200px;
	max-width: 1200px;
	text-align: center;
	margin: auto;
}

#main {
	text-align: center;
	max-width: 1200px;
	margin: 0 auto 20px;
}

.main {
	max-width: 1200px;
	margin: 20px auto 0;
}

.center {
	width: 80%;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	margin: auto;
}

.col-1,
.col-2,
.col-3 {
	display: inline-block;
	vertical-align: top;
	margin-right: -4px;
	padding: 20px;
}

.col-1 {
	width: 25%;
}

.col-2 {
	width: 50%;
}

.col-3 {
	width: 75%;
}

.col-4 {
	width: 100%;
}


/* =========================================================
   BUTTONS
========================================================= */

.btn {
	border: solid 1px #0047AB;
	color: #0047AB;
	border-radius: 30px;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	padding: 10px 20px;
}

.btn-primary {
	border: solid 1px #999;
	border-radius: 30px;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	padding: 10px 20px;
}

.blue {
	color: #0047AB;
}


/* =========================================================
   LEGAL
========================================================= */

.legal {
	margin-bottom: 20px;
}


/* =========================================================
   CART
========================================================= */

.cart-btn {
	padding: 4px 10px 5px;
}


/* =========================================================
   PRODUCTS
========================================================= */

.thumbnail {
	border: none;
}

.product img {
	width: 100%;
	max-width: 100%;
	margin-bottom: 20px;
}

.results {
	text-align: center;
	margin-top: 20px;
}


/* =========================================================
   SOCIAL MEDIA
========================================================= */

.social li {
	width: 50px;
	height: 50px;
	display: inline-block;
}

.facebook {
	background: url('../../../uploads/svg/facebook.svg') left center / 50px no-repeat;
}

.twitter {
	background: url('../../../uploads/svg/twitter.svg') left center / 50px no-repeat;
}

.instagram {
	background: url('../../../uploads/svg/instagram.svg') left center / 50px no-repeat;
}

.youtube {
	background: url('../../../uploads/svg/youtube.svg') left center / 50px no-repeat;
}

.pintrest {
	background: url('../../../uploads/svg/pintrest.svg') left center / 50px no-repeat;
}


/* =========================================================
   MAIN NAVIGATION
========================================================= */

nav {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	background: #fff;
	position: relative;
	text-align: center;
	overflow: visible;
}

.navbar {
	width: 100%;
	max-width: 100%;
	margin: 0;
	overflow: visible;
}

.nav-container {
	width: 100%;
	max-width: 100%;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: visible;
}

.nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	list-style: none;
	gap: 40px;
	margin: 0;
	padding: 0;
	overflow: visible;
}

.nav-links > li {
	position: static;
}

.nav-links > li > a {
	color: #21153d;
	transition: 0.3s;
	text-decoration: none;
	display: block;
	padding: 20px 0;
}

.nav-links > li > a:hover {
	color: #a2793b;
	text-decoration-line: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 8px;
}


/* =========================================================
   SUB NAVIGATION / MEGA MENU
========================================================= */

.sub-nav {
	display: none;
	position: absolute;
	top: 50px;
	left: 0;
	width: 100%;
	max-width: 100%;
	background: #fff;
	padding: 20px;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	z-index: 9999;
	text-align: left;
	box-sizing: border-box;
}

.nav-links > li:hover > .sub-nav {
	display: grid;
}

.sub-nav:hover {
	display: grid;
}


/* =========================================================
   SUB NAV COLUMNS
========================================================= */

.sub-nav .column {
	padding: 20px;
	min-height: 150px;
	text-align: left;
}


/* =========================================================
   SUB NAV TEXT
========================================================= */

.sub-nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	text-align: left;
}

.sub-nav li {
	margin-bottom: 8px;
	text-align: left;
}

.sub-nav a {
	color: #21153d;
	display: block;
	padding: 5px 0;
	text-align: left;
	transition: 0.3s;
	text-decoration: none;
}

.sub-nav a:hover {
	color: #a2793b;
	text-decoration-line: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 8px;
}


/* =========================================================
   SUB NAV IMAGE
========================================================= */

.column-image {
	width: 100%;
	max-width: 100%;
	height: 150px;
	object-fit: cover;
	display: block;
}


/* =========================================================
   HAMBURGER
========================================================= */

.menu-toggle {
	display: none;
	color: #21153d;
	cursor: pointer;
	background: transparent;
	border: none;
	font-family: Arial, Helvetica, sans-serif;
}


/* =========================================================
   CAROUSEL
========================================================= */

#carousel {
	position: relative;
	width: 1200px;
	max-width: 1200px;
	color: #fff;
	margin: 20px auto;
	padding: 20px;
}

.dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	text-align: center;
	z-index: 1;
}

.dots li {
	display: inline-block;
}

.dot {
	width: 13px;
	height: 13px;
	border: solid 1px #fff;
	border-radius: 50%;
	cursor: pointer;
	display: block;
	background-color: transparent;
	transition: background-color 0.6s ease;
}

.active,
.dot:hover {
	background-color: #fff;
}

.transition {
	animation-name: fade;
	animation-duration: 2.5s;
}

@keyframes fade {

	from {
		opacity: .4;
	}

	to {
		opacity: 1;
	}

}


/* =========================================================
   PAGE
========================================================= */

.home {
	padding: 0;
}


/* =========================================================
   FORMS
========================================================= */

.contact-form {
	width: 60%;
	margin: auto;
}

input[type=text] {
	margin-bottom: 3px;
}

input[type=submit] {
	margin-top: 20px;
}

.contact {
	margin-top: 20px;
}

.contact li {
	display: inline-block;
}

.email {
	background: url('../../../uploads/svg/email.svg') left center / 40px no-repeat;
	padding: 5px 0 5px 45px;
}

.telephone {
	background: url('../../../uploads/svg/telephone.svg') left center / 40px no-repeat;
	padding: 7px 0 7px 45px;
}


/* =========================================================
   HEADER
========================================================= */

header {
	position: relative;
	color: #fff;
	background-color: #fff;
	padding: 5px 20px 20px;
}

header a {
	color: #fff;
}

header a:hover {
	color: #fff;
	text-decoration: underline;
}

header .container {
	width: 100%;
	max-width: 100%;
}

header .contact {
	margin-top: 50px;
}

header .main {
	max-width: 1350px;
}

header .col-1,
header .col-2 {
	padding: 0;
}

header .col-1 {
	width: 15%;
}

header .col-2 {
	text-align: center;
	width: 69%;
}


/* =========================================================
   LOGO
========================================================= */

.logo {
	width: 150px;
	height: 150px;
	display: block;
	background:
		url('../../../uploads/svg/logo.svg')
		center center / 150px no-repeat;
	text-indent: -99999px;
}


/* =========================================================
   CONTACT BUBBLE
========================================================= */

#contentDiv {
	position: absolute;
	left: -100px;
	top: 50px;
	display: none;
	background: #fff;
	color: #333;
	border-radius: 5px;
	width: 325px;
	max-width: 100%;
	padding: 20px 15px;
	z-index: 1;
}

#contentDiv::before {
	content: '';
	position: absolute;
	border-width: 10px;
	border-style: solid;
	border-color: transparent transparent #fff transparent;
	top: -17px;
	left: 40%;
	transform: translateX(-50%);
}

.contact-bar {
	text-align: right;
}

.contact-bar .sales-telephone {
	border-bottom: solid 1px #0047AB;
	font-weight: 600;
	padding: 2px 35px 2px 0;
}


/* =========================================================
   MINI NAV
========================================================= */

.mini-nav {
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	margin-top: 40px;
}

.mini-nav .service-telephone {
	width: 35px;
	height: 35px;
	cursor: pointer;
	background:
		url('../../../uploads/svg/telephone-white.svg')
		center center / 35px no-repeat;
	display: block;
}

.mini-nav .account {
	width: 35px;
	height: 35px;
	cursor: pointer;
	background:
		url('../../../uploads/svg/account.svg')
		center center / 30px no-repeat;
	display: block;
}

.mini-nav .basket {
	width: 35px;
	height: 35px;
	cursor: pointer;
	background:
		url('../../../uploads/svg/basket.svg')
		center center / 30px no-repeat;
	display: block;
}

.mini-nav .pin {
	width: 35px;
	height: 35px;
	cursor: pointer;
	background:
		url('../../../uploads/svg/pin.svg')
		center center / 25px no-repeat;
	display: block;
}

.mini-nav a {
	float: left;
	margin-left: 10px;
}


/* =========================================================
   WIDGETS
========================================================= */

.widgets {
	background: #4f4f4f;
	color: #fff;
	text-align: center;
	margin-bottom: 20px;
}

.widgets h2 {
	text-transform: uppercase;
	color: #fff;
}

.widgets li {
	list-style: none;
}

.widgets a {
	color: #fff;
}

.deliver {
	background:
		url('../../../uploads/svg/delivery.svg')
		top center / 70px no-repeat;
	padding-top: 80px;
}

.stock {
	background:
		url('../../../uploads/svg/stock.svg')
		top center / 70px no-repeat;
	padding-top: 80px;
}

.furniture {
	background:
		url('../../../uploads/svg/furniture.svg')
		top center / 70px no-repeat;
	padding-top: 80px;
}

.shop {
	background:
		url('../../../uploads/svg/shop.svg')
		top center / 70px no-repeat;
	padding-top: 80px;
}


/* =========================================================
   ADS
========================================================= */

.ads {
	margin-bottom: 20px;
}

.ads .btn {
	margin-top: 20px;
}

.ad-1 {
	background:
		url('../../../uploads/ad-1.jpg')
		right center no-repeat;
	background-size: cover;
}

.ad-2 {
	background:
		url('../../../uploads/ad-2.jpg')
		right center no-repeat;
}


/* =========================================================
   LANDLORD
========================================================= */

.landlord {
	background:
		url('../../../uploads/landlord.jpg')
		center center no-repeat;
	color: #fff;
	height: 900px;
	text-align: center;
	margin-bottom: 20px;
}

.landlord h3 {
	color: #fff;
	text-transform: uppercase;
}

.landlord .btn {
	border: solid 1px red;
	border-radius: 3px;
	color: #fff;
	text-transform: uppercase;
}

.logo-sm {
	width: 200px;
	height: 150px;
	background:
		url('../../../uploads/svg/logo-sm.svg')
		center center / 200px no-repeat;
	margin: 150px auto;
}

.banner {
	background: #837a78;
	color: #fff;
	text-align: center;
	font-size: 1.4em;
	padding: 20px;
}

.banner p {
	display: inline-block;
	border: solid 1px #fff;
	border-radius: 5px;
	color: #fff;
	margin: 0;
	padding: 20px;
}


/* =========================================================
   OPENING TIMES
========================================================= */

.opening {
	background: #4f4f4f;
	text-align: center;
	color: #fff;
	text-transform: uppercase;
	margin-bottom: 20px;
	padding: 50px 20px;
}

.opening h4 {
	color: #fff;
	font-size: 20px;
}

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


/* =========================================================
   SEARCH
========================================================= */

#search {
	width: 100%;
	display: inline-block;
	border-radius: 30px;
	margin-top: 40px;
}

#search .input-lg {
	width: 50%;
	height: 50px;
	color: #999;
	border-radius: 50px 0 0 50px;
	border: solid 1px #f8f8f8;
	transition: width 0.3s;
	-webkit-appearance: none;
	font-family: inherit;
	font-size: 1.2em;
	padding-left: 20px;
	background: #f8f8f8;
}

#search .btn {
	width: 40px;
	height: 50px;
	border: none;
	border-radius: 0 50px 50px 0;
	background:
		#f8f8f8
		url('../../../uploads/svg/search.svg')
		center right 10px / 20px no-repeat;
	margin-bottom: 3px;
	text-indent: -99999px;
}

#search .input-lg:focus {
	width: 90%;
}


/* =========================================================
   FOOTER
========================================================= */

footer {
	background: #21153d;
	color: #fff;
	font-size: 0.9em;
	margin-top: 0;
	padding: 15px 0 50px;
}

footer h6 {
	color: #fff;
	font-size: 1.2em;
	margin-bottom: 20px;
}

footer a {
	color: #fff;
	padding: 0;
}

footer a:active {
	color: #fff;
}

footer a:hover {
	background-color: transparent;
}

footer .nav li {
	display: inline-block;
	padding: 20px 20px 20px 0;
}


/* =========================================================
   COPYRIGHT
   LEFT ALIGNED
   30PX ABOVE / 20PX BELOW
========================================================= */

.copyright {
	text-align: left;
	border-top: solid 1px #ccc;
	border-bottom: solid 1px #fff;
	margin-top: 20px;
	margin-bottom: 0;
	padding: 30px 0 20px;
}

.trustpilot {
	width: 100px;
	height: 50px;
	display: none;
	background:
		url('../../../uploads/svg/trustpilot.svg')
		left center / 100px no-repeat;
}

footer .col-1 {
	width: 19%;
	padding: 0;
}


/* =========================================================
   GOOGLE MAP
========================================================= */

.google-map {
	width: 100%;
	max-width: 100%;
}

#google-container {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: 500px;
	z-index: 100;
}

#cd-zoom-in,
#cd-zoom-out {
	height: 32px;
	width: 32px;
	cursor: pointer;
	margin-left: 10px;
	background:
		#1c2454
		url("../../../uploads/svg/zoom.svg")
		no-repeat;
}

#cd-zoom-in {
	background-position: 50% 0;
	margin-top: 10px;
	margin-bottom: 1px;
}

#cd-zoom-out {
	background-position: 50% -32px;
}


/* =========================================================
   ICON BAR
========================================================= */

.icon-bar {
	border-top: solid 1px #fff;
	background: #B8870B;
	text-align: center;
	color: #fff;
	margin-bottom: 20px;
	padding: 0 20px;
}

.icon-bar ul li {
	display: inline-block;
}

.uk {
	background:
		url('../../../uploads/svg/uk-icon.svg')
		left center / 40px no-repeat;
	padding: 20px 20px 20px 50px;
}

.delivery {
	background:
		url('../../../uploads/svg/delivery-icon.svg')
		left center / 70px no-repeat;
	padding: 20px 0 20px 80px;
}


/* =========================================================
   PRODUCT PANEL
========================================================= */

.product-panel {
	text-align: center;
	margin: 50px 0;
}

.product-panel ul {
	margin-top: 30px;
}

.product-panel ul li {
	display: inline-block;
}

.product-panel div {
	width: 10%;
	display: inline-block;
	margin: auto 20px;
}

.product-panel .btn {
	margin-top: 10px;
	border: none;
}

.product-panel a {
	color: #000;
}


/* =========================================================
   SCROLLER
========================================================= */

.scroller {
	margin-bottom: 30px;
}

.scroller .main {
	background: red;
}


/* =========================================================
   FEATURED
========================================================= */

#featured {
	width: 1200px;
	max-width: 1200px;
	margin: 20px auto;
}

#featured .col-1 {
	width: 33.3%;
	color: #fff;
}

.title {
	padding: 10px;
	background: #211640;
	color: #fff;
	text-align: center;
}

.title-hover {
	padding: 10px;
	background: #a67a3b;
	color: #fff;
	text-align: center;
}


/* =========================================================
   MOBILE / TABLET
   768PX AND BELOW
========================================================= */

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


	/* =====================================================
	   PREVENT HORIZONTAL SCROLL
	===================================================== */

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


	/* =====================================================
	   MOBILE MAIN
	===================================================== */

	main,
	#main,
	.main {
		width: 100%;
		max-width: 100%;
	}


	/* =====================================================
	   MOBILE COLUMNS
	   ALL 100% WIDTH
	===================================================== */

	.col-1,
	.col-2,
	.col-3,
	.col-4 {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		float: none !important;
	}


	/* =====================================================
	   MOBILE HEADER
	   KEEP HEADER WHITE
	===================================================== */

	header {
		width: 100%;
		max-width: 100%;
		padding: 0 20px 5px;
		background-color: #fff;
	}

	header .container,
	header .main {
		width: 100%;
		max-width: 100%;
		background-color: #fff;
	}

	header .main {
		margin: 0 auto;
	}

	header .col-1,
	header .col-2 {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		text-align: center;
		margin: 0 !important;
		padding: 0;
		float: none !important;
	}

	header p {
		margin: 0;
	}


	/* =====================================================
	   MOBILE LOGO
	   25% SMALLER
	   15PX TOP / BOTTOM
	===================================================== */

	.logo {
		width: 112.5px;
		max-width: 112.5px;
		height: 112.5px;
		margin: 15px auto;
		background-size: 112.5px auto;
		background-position: center center;
		background-repeat: no-repeat;
		display: block;
		float: none;
	}


	/* =====================================================
	   MOBILE SEARCH
	   FULL WIDTH
	===================================================== */

	#search {
		width: 100%;
		max-width: 100%;
		display: flex;
		align-items: center;
		margin: 0 0 5px;
		padding: 0;
		border-radius: 30px;
	}

	#search .input-lg {
		flex: 1 1 0;
		width: 0;
		min-width: 0;
		max-width: 100%;
		height: 45px;
		margin: 0;
		padding: 0 0 0 20px;
		border-radius: 50px 0 0 50px;
		border: solid 1px #f8f8f8;
		background: #f8f8f8;
		font-family: inherit;
		font-size: 1.2em;
		-webkit-appearance: none;
	}

	#search .input-lg:focus {
		width: 0;
		flex: 1 1 0;
	}

	#search .btn {
		flex: 0 0 45px;
		width: 45px;
		height: 45px;
		margin: 0;
		padding: 0;
		border: none;
		border-radius: 0 50px 50px 0;
		background:
			#f8f8f8
			url('../../../uploads/svg/search.svg')
			center center / 20px no-repeat;
		text-indent: -99999px;
	}


	/* =====================================================
	   MOBILE ICON ROW
	===================================================== */

	.mini-nav {
		width: 100%;
		max-width: 100%;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		float: none;
		margin: 0;
		padding: 0;
		gap: 20px;
	}

	.mini-nav ul {
		width: auto;
		max-width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 20px;
		margin: 0;
		padding: 0;
	}

	.mini-nav li {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0;
		padding: 0;
	}

	.mini-nav a {
		float: none;
		display: block;
		margin: 0;
		padding: 0;
	}

	.mini-nav .service-telephone {
		width: 32px;
		height: 32px;
		display: block;
		cursor: pointer;
		background:
			url('../../../uploads/svg/telephone-white.svg')
			center center / 32px no-repeat;
	}

	.mini-nav .account {
		width: 32px;
		height: 32px;
		display: block;
		cursor: pointer;
		background:
			url('../../../uploads/svg/account.svg')
			center center / 28px no-repeat;
	}

	.mini-nav .basket {
		width: 32px;
		height: 32px;
		display: block;
		cursor: pointer;
		background:
			url('../../../uploads/svg/basket.svg')
			center center / 28px no-repeat;
	}

	.mini-nav .pin {
		display: none;
	}


	/* =====================================================
	   MOBILE NAVIGATION
	   KEEP WHITE
	===================================================== */

	nav,
	.navbar,
	.nav-container {
		width: 100%;
		max-width: 100%;
		background: #fff;
		overflow: visible;
	}

	nav {
		position: relative;
		margin: 0;
		padding: 0;
	}

	.nav-container {
		height: 40px;
		min-height: 40px;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0;
		padding: 0;
	}


	/* =====================================================
	   MOBILE BURGER + MENU
	===================================================== */

	.menu-toggle {
		width: auto;
		height: 35px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 5px;
		position: relative;
		margin: 0;
		padding: 0 8px;
		border: none;
		background: transparent;
		color: #21153d;
		cursor: pointer;
		font-family: Arial, Helvetica, sans-serif;
	}

	.menu-icon {
		display: block;
		font-size: 24px;
		line-height: 1;
		color: #21153d;
	}

	.menu-text {
		display: block;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 14px;
		font-weight: 500;
		line-height: 1;
		letter-spacing: normal;
		color: #21153d;
	}


	/* =====================================================
	   MOBILE MAIN NAV
	   KEEP WHITE
	===================================================== */

	.nav-links {
		display: none;
		position: absolute;
		top: 40px;
		left: 0;
		right: 0;
		width: 100%;
		max-width: 100%;
		background: #fff;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin: 0;
		padding: 0;
		z-index: 9999;
		overflow: visible;
	}

	.nav-links.active {
		display: flex;
	}

	.nav-links > li {
		position: relative;
		width: 100%;
		max-width: 100%;
		text-align: center;
		margin: 0;
		padding: 0;
		background: #fff;
	}

	.nav-links > li > a {
		width: 100%;
		display: block;
		padding: 15px;
		text-align: center;
		background: #fff;
	}


	/* =====================================================
	   MOBILE SUB NAVIGATION

	   ONLY THE SUB NAV IS #F0F0F0
	===================================================== */

	.sub-nav {
		display: none;
		position: static;
		width: 100%;
		max-width: 100%;
		background: #f0f0f0;
		grid-template-columns: 1fr;
		gap: 0;
		margin: 0;
		padding: 6px 10px;
		text-align: center;
		box-sizing: border-box;
	}

	.nav-links > li:hover > .sub-nav {
		display: grid;
	}

	.nav-links > li:focus-within > .sub-nav {
		display: grid;
	}


	/* =====================================================
	   MOBILE SUB NAV COLUMNS

	   NO EXTRA COLUMN BOTTOM PADDING
	===================================================== */

	.sub-nav .column {
		width: 100%;
		max-width: 100%;
		min-height: 0;
		margin: 0;
		padding: 0;
		text-align: center;
		background: #f0f0f0;
	}


	/* =====================================================
	   MOBILE SUB NAV LISTS
	===================================================== */

	.sub-nav ul {
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 0;
		text-align: center;
		background: #f0f0f0;
	}

	.sub-nav li {
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 0;
		text-align: center;
		background: #f0f0f0;
	}


	/* =====================================================
	   MOBILE SUB NAV LINKS

	   EQUAL SPACING BETWEEN EVERY LINK
	===================================================== */

	.sub-nav a {
		width: 100%;
		max-width: 100%;
		display: block;
		margin: 0;
		padding: 6px 10px;
		text-align: center;
		background: #f0f0f0;
		white-space: normal;
		overflow-wrap: break-word;
		word-wrap: break-word;
	}

	.sub-nav a:hover {
		color: #a2793b;
		background: #f0f0f0;
		text-decoration-line: underline;
		text-decoration-thickness: 3px;
		text-underline-offset: 8px;
	}


	/* =====================================================
	   HIDE SUB NAV IMAGE COLUMN ON MOBILE
	===================================================== */

	.sub-nav .column:nth-child(4) {
		display: none !important;
	}


	/* =====================================================
	   HIDE ICON BAR
	===================================================== */

	.icon-bar {
		display: none;
	}


	/* =====================================================
	   MOBILE CAROUSEL
	===================================================== */

	#carousel,
	.carousel {
		width: 100%;
		max-width: 100%;
	}

	.carousel {
		height: 240px;
	}

	.home,
	.categories {
		background-size: cover;
	}


	/* =====================================================
	   MOBILE ADS
	===================================================== */

	.ads {
		width: 100%;
		max-width: 100%;
	}


	/* =====================================================
	   MOBILE LANDLORD
	===================================================== */

	.landlord {
		width: 100%;
		max-width: 100%;
		background-position: -600px 0;
	}

	.banner {
		width: 90%;
		max-width: 100%;
		margin: 0 auto 20px;
	}

	.contact-form {
		width: 90%;
		max-width: 100%;
	}


	/* =====================================================
	   MOBILE FEATURED
	===================================================== */

	#featured {
		width: 100%;
		max-width: 100%;
	}

	#featured .col-1 {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		float: none !important;
	}

	.featured .item {
		width: 90%;
		max-width: 100%;
	}


	/* =====================================================
	   MOBILE FOOTER
	===================================================== */

	footer {
		width: 100%;
		max-width: 100%;
	}

	footer .main {
		width: 100%;
		max-width: 100%;
		padding: 0 20px;
	}

	footer li {
		display: block;
		padding: 5px 0;
	}

	footer .col-1 {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		float: none !important;
	}

	footer .nav li {
		display: block;
		padding: 5px 0;
	}


	/* =====================================================
	   MOBILE COPYRIGHT
	   LEFT ALIGNED
	   30PX ABOVE / 20PX BELOW
	===================================================== */

	.copyright {
		width: 100%;
		max-width: 100%;
		text-align: left;
		margin-bottom: 0;
		padding: 30px 0 20px;
	}


	/* =====================================================
	   MOBILE SOCIAL
	===================================================== */

	.facebook,
	.twitter,
	.instagram,
	.youtube,
	.pintrest {
		background-position: left -10px center;
	}


	/* =====================================================
	   MOBILE PRODUCT PANEL
	===================================================== */

	.product-panel {
		width: 100%;
		max-width: 100%;
		padding: 20px;
	}

	.product-panel div {
		width: 90%;
		max-width: 100%;
	}

	.product-panel img {
		display: block;
		width: 50%;
		max-width: 100%;
		margin: auto;
	}

}


/* =========================================================
   IPHONE LANDSCAPE / PORTRAIT
========================================================= */

@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px) {

	/* iPhone-specific overrides can go here */

}

/* =========================================================
   CATEGORY WHITE SCREEN FIX
   Forces category content visible if a loading/fade script
   leaves .content transparent.
========================================================= */

.content {
	opacity: 1 !important;
	visibility: visible !important;
}

/* =========================
   MAIN NAVIGATION
========================= */

nav {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    background: #fff;
    position: relative;
}

.nav-container {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 40px;
    margin: 0;
    padding: 0;
}

.nav-links li {
    position: static;
}

.nav-links a {
    color: #21153d;
    transition: 0.3s;
    text-decoration: none;
    display: block;
    padding: 20px 0;
}

.nav-links a:hover {
    color: #a2793b;
    text-decoration-line: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 8px;
}


/* =========================
   SUB NAVIGATION
========================= */

.sub-nav {
    display: none;
    position: absolute;

    /* Pull submenu upwards so there is no hover gap */
    top: 50px;

    left: 0;
    width: 100%;
    background: #fff;
    padding: 20px;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    z-index: 1000;
    text-align: left;
    box-sizing: border-box;
}

/* Keep submenu visible when hovering
   over the parent menu item or submenu */

.nav-links > li:hover > .sub-nav,
.sub-nav:hover {
    display: grid;
}


/* =========================
   SUB NAV COLUMNS
========================= */

.sub-nav .column {
    padding: 20px;
    min-height: 150px;
    text-align: left;
}


/* =========================
   SUB NAV TEXT
========================= */

.sub-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.sub-nav li {
    margin-bottom: 8px;
    text-align: left;
}

.sub-nav a {
    color: #21153d;
    padding: 5px 0;
    text-align: left;
    transition: 0.3s;
    text-decoration: none;
}

.sub-nav a:hover {
    color: #a2793b;
    text-decoration-line: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 8px;
}


/* =========================
   COLUMN 4 IMAGE
========================= */

.column-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}


/* =========================
   HAMBURGER
========================= */

.menu-toggle {
    display: none;
    color: #21153d;
    font-size: 25px;
    cursor: pointer;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

    nav {
        width: 100%;
    }

    .nav-container {
        height: 60px;
    }

    .menu-toggle {
        display: block;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background: #fff;
        flex-direction: column;
        gap: 0;
        z-index: 1000;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        position: relative;
        text-align: center;
    }

    .nav-links > li > a {
        padding: 15px;
    }


    /* =========================
       MOBILE SUB NAVIGATION
    ========================= */

    .sub-nav {
        position: static;
        width: 100%;
        background: #fff;
        grid-template-columns: 1fr;
        padding: 10px;
        text-align: left;
        box-sizing: border-box;
    }

    .sub-nav .column {
        text-align: left;
    }

    .sub-nav ul {
        text-align: left;
    }

    .sub-nav li {
        text-align: left;
    }

    .sub-nav a {
        text-align: left;
    }


    /* =========================
       HIDE IMAGE COLUMN
       ON MOBILE
    ========================= */

    .sub-nav .column:nth-child(4) {
        display: none;
    }

}

/* =========================
   Meet Neo. Let's follow the white rabbit :)
   Author: Qbit
   Build Date: 14/07/2026
   Version: 1.0.1

   File path: /css/custom.min.css

   Updated on 14/07/2026: Made the carousel match the detected viewport height on desktop and mobile.
========================= */

/* =========================
   Carousel variables
========================= */

:root {
  --viewport-height: 100vh;
  --carousel-height: var(--viewport-height);
  --carousel-overlay: rgba(0, 0, 0, .42);
  --carousel-control: rgba(0, 0, 0, .45);
  --carousel-control-hover: rgba(0, 0, 0, .7);
}

/* =========================
   Carousel styles
========================= */

.carousel {
  width: 100%;
  height: var(--carousel-height);
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  margin-bottom: 50px;
  color: #fff;
  position: relative;
  isolation: isolate;
  background: #171717;
}

.banners {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .65s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

.banner {
  min-width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

.banner-media,
.banner-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.banner-media img {
  object-fit: cover;
}

.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--carousel-overlay);
  z-index: 1;
}

.content {
  width: min(90%, 900px);
  line-height: 1.5;
  position: relative;
  z-index: 2;
  color: #fff;
  padding: 24px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .45s ease .18s, transform .45s ease .18s;
}

.banner.is-active .content {
  opacity: 1;
  transform: none;
}

.content h1 {
  font-size: clamp(2rem, 4.2vw, 4rem);
  line-height: 1.05;
  margin: 0 0 18px;
  color: #fff;
  text-wrap: balance;
}

.content p {
  font-size: clamp(1rem, 2vw, 1.45rem);
  margin: 0 auto 30px;
  max-width: 760px;
  border: 0;
}

.content .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  transition: background .2s, color .2s, transform .2s;
}

.content .btn:hover,
.content .btn:focus-visible {
  background: #fff;
  color: #111;
  transform: translateY(-2px);
}

/* =========================
   Carousel controls
========================= */

.carousel-arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--carousel-control);
  color: #fff;
  font-size: 25px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .2s, transform .2s;
}

.carousel-arrow:hover,
.carousel-arrow:focus-visible {
  background: var(--carousel-control-hover);
  transform: translateY(-50%) scale(1.06);
}

.carousel-arrow--prev {
  left: 20px;
}

.carousel-arrow--next {
  right: 20px;
}

.carousel-dots {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.carousel-dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background .2s, transform .2s;
}

.carousel-dot.is-active {
  background: #fff;
  transform: scale(1.18);
}

.carousel :focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* =========================
   Responsive styles
========================= */

@media (max-width: 768px) {

  .content {
    width: 92%;
    padding: 20px 52px;
  }

  .content h1 {
    font-size: clamp(1.8rem, 8vw, 2.7rem);
  }

  .content p {
    font-size: 1rem;
  }

  .carousel-arrow {
    width: 42px;
    height: 42px;
  }

  .carousel-arrow--prev {
    left: 10px;
  }

  .carousel-arrow--next {
    right: 10px;
  }

}

@media (max-width: 480px) {

  .content {
    padding: 20px 42px;
  }

  .carousel-arrow {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }

  .carousel-dots {
    bottom: 18px;
  }

}

/* =========================
   Reduced motion styles
========================= */

@media (prefers-reduced-motion: reduce) {

  .banners,
  .content,
  .carousel-arrow,
  .carousel-dot,
  .content .btn {
    transition: none !important;
  }

}

/* =========================================================
   BUTTON COLOURS
   Normal: #21153d
   Hover:  #a2793b
   Text:   #ffffff
========================================================= */

.btn,
.btn-primary,
button.btn,
a.btn,
input[type="submit"].btn,
input[type="button"].btn,
.product-thumb .button-group button,
.product-layout .button-group button,
.button-group button {
	background: #21153d !important;
	background-color: #21153d !important;
	border-color: #21153d !important;
	color: #ffffff !important;
}

.btn:hover,
.btn:focus,
.btn:focus-visible,
.btn:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active,
button.btn:hover,
button.btn:focus,
button.btn:focus-visible,
button.btn:active,
a.btn:hover,
a.btn:focus,
a.btn:focus-visible,
a.btn:active,
input[type="submit"].btn:hover,
input[type="submit"].btn:focus,
input[type="submit"].btn:active,
input[type="button"].btn:hover,
input[type="button"].btn:focus,
input[type="button"].btn:active,
.product-thumb .button-group button:hover,
.product-thumb .button-group button:focus,
.product-layout .button-group button:hover,
.product-layout .button-group button:focus,
.button-group button:hover,
.button-group button:focus {
	background: #a2793b !important;
	background-color: #a2793b !important;
	border-color: #a2793b !important;
	color: #ffffff !important;
}

/* =========================================================
   SEARCH BUTTON EXCEPTION
   Keep the search button's original styling
========================================================= */

#search .btn,
#search .btn:hover,
#search .btn:focus,
#search .btn:focus-visible,
#search .btn:active {
	background:
		#f8f8f8
		url('../../../uploads/svg/search.svg')
		center right 10px / 20px no-repeat !important;
	background-color: #f8f8f8 !important;
	border: none !important;
	color: inherit !important;
}