@import url('//fonts.googleapis.com/css?family=Assistant:300,400,500,600');
* {
font-family: 'Assistant', sans-serif;
}
body {
	background-color: #ffffff /*{body|background-color}*/;
	color: #333333 /*{body|text-colour}*/;
}
#main-content {
	background-color: #ffffff;
}
#main-content > .row:first-child > .col-xs-12 {
	padding-top:15px;
}
a {
	color: #3f606e /*{body|link-colour}*/
}

a:hover, a:active {
	color: #000 /*{body|link-colour-hover}*/
}

/* Header */
.top-navbar-wrapper {
	background-color: #f6f6f6 /*{header|navbar-background-colour}*/;
}
.top-navbar-wrapper .navbar-default .navbar-nav {
    position: relative; /* parent for absolute mega menu */
}
.top-navbar-wrapper .navbar-default .navbar-nav > li > a {
	color: #777 /*{header|navbar-link-colour}*/;
}

.top-navbar-wrapper .navbar-default .navbar-nav > li > a:hover,
.top-navbar-wrapper .navbar-default .navbar-nav > li > a:focus {
	color: #333 /*{header|navbar-link-colour-hover}*/;
}

.wrapper-header {
	background-color: #ffffff /*{header|background-colour}*/;
	border:none;
	margin-bottom:0px;
}

@media (max-width: 767px) {
	.dropdown-menu > li > a:hover,
	.dropdown-menu > li > a:focus {
		background-color: #ffffff /*{header|background-colour}*/;
	}
	.nav > li > a:hover,
	.nav > li > a:focus {
		background-color: #ffffff /*{header|background-colour}*/;
	}
}

.navbar {
	margin-bottom: 0;
	background-color: transparent;
	border-color: transparent;
}

.usps .fa {
	background-color: #3f606e /*{header|usp-background-colour}*/;
	color: #fff /*{header|usp-icon-colour}*/;
}

.usps span {
	color: #333 /*{header|usp-text-colour}*/;
}

/* Footer */
.wrapper-top-footer {
	background-color: #f6f6f6 /*{footer|top-footer-background-color}*/;
}

.wrapper-top-footer p {
	color: #333 /*{footer|top-footer-text-colour}*/
}

.wrapper-footer {
	background-color: #192d38 /*{footer|footer-background}*/;
	color: #fff /*{footer|text-colour}*/;
}

.wrapper-footer .nav > li > a:hover,
.wrapper-footer .nav > li > a:focus {
	background-color: #192d38 /*{footer|footer-background}*/;
}

.wrapper-footer a {
	color: #fff /*{footer|link-colour}*/;
}

.wrapper-footer a:hover,
.wrapper-footer a:active {
	color: #fd7e23 /*{footer|link-hover-colour}*/;
}

.wrapper-footer .link-header {
	color: #fff /*{footer|text-colour}*/;
}

.btn-primary {
	color: #FFFFFF;
	background-color: #3f606e /*{buttons|primary-colour}*/;
	border-color: #3f606e /*{buttons|primary-colour}*/;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
	color: #FFFFFF;
	background-color: #4f7788 /*{buttons|primary-colour-hover}*/;
	border-color: #4f7788 /*{buttons|primary-colour-hover}*/;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
	background-image: none;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
	background-color: #4f7788 /*{buttons|primary-colour-hover}*/;
	border-color: #4f7788 /*{buttons|primary-colour-hover}*/;
}
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
	background-color: #4f7788 /*{buttons|primary-colour-hover}*/;
	border-color: #4f7788 /*{buttons|primary-colour-hover}*/;
}

.btn-success {
	color: #1a3440;
	background-color: #fd7e23 /*{buttons|success-colour}*/;
	border-color: #fd7e23 /*{buttons|success-colour}*/;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
	color: #1a3440;
	background-color: #ff994f /*{buttons|success-colour-hover}*/;
	border-color: #ff994f /*{buttons|success-colour-hover}*/;
}

.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
	background-image: none;
}
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
	background-color: #ff994f /*{buttons|success-colour-hover}*/;
	border-color: #ff994f /*{buttons|success-colour-hover}*/;
}
.btn-success:active:hover,
.btn-success.active:hover,
.open > .dropdown-toggle.btn-success:hover,
.btn-success:active:focus,
.btn-success.active:focus,
.open > .dropdown-toggle.btn-success:focus,
.btn-success:active.focus,
.btn-success.active.focus,
.open > .dropdown-toggle.btn-success.focus {
	background-color: #ff994f /*{buttons|success-colour-hover}*/;
	border-color: #ff994f /*{buttons|success-colour-hover}*/;
}

.banner-wrapper {
	background-color: #192d38 /*{banner|banner-background}*/;
	color: #fff /*{banner|text-colour}*/;
}

.login-form p > a {
	color: #fff /*{banner|text-colour}*/;
}

/* Thumbs */
.top-seller-label span {
	background-color: #4F777B /*{Thumbnails|top-seller-badge-background}*/;
	color: #fff /*{Thumbnails|top-seller-badge-colour}*/;
}

.sale-label span {
	background-color: #d30915 /*{Thumbnails|sale-badge-background}*/;
	color: #fff /*{Thumbnails|sale-badge-colour}*/;
}

/* Category Page */
@media (max-width: 991px) {
	.filter-section > h3 > a {
		color: #FFFFFF;
		background-color: #3f606e /*{buttons|primary-colour}*/;
		border-color: #3f606e /*{buttons|primary-colour}*/;
	}

	.filter-section > h3 > a:hover,
	.filter-section > h3 > a:focus,
	.filter-section > h3 > a:active,
	.filter-section > h3 > a.active,
	.open > .dropdown-toggle.filter-section > h3 > a {
		color: #FFFFFF;
		background-color: #4f7788 /*{buttons|primary-colour}*/;
		border-color: #4f7788 /*{buttons|primary-colour}*/;
	}
	.filter-section > h3 > a:active,
	.filter-section > h3 > a.active,
	.open > .dropdown-toggle.filter-section > h3 > a {
		background-image: none;
	}
	.filter-section > h3 > a.disabled,
	.filter-section > h3 > a[disabled],
	fieldset[disabled] .filter-section > h3 > a,
	.filter-section > h3 > a.disabled:hover,
	.filter-section > h3 > a[disabled]:hover,
	fieldset[disabled] .filter-section > h3 > a:hover,
	.filter-section > h3 > a.disabled:focus,
	.filter-section > h3 > a[disabled]:focus,
	fieldset[disabled] .filter-section > h3 > a:focus,
	.filter-section > h3 > a.disabled:active,
	.filter-section > h3 > a[disabled]:active,
	fieldset[disabled] .filter-section > h3 > a:active,
	.filter-section > h3 > a.disabled.active,
	.filter-section > h3 > a[disabled].active,
	fieldset[disabled] .filter-section > h3 > a.active {
		background-color: #4f7788 /*{buttons|primary-colour}*/;
		border-color: #4f7788 /*{buttons|primary-colour}*/;
	}
	.filter-section > h3 > a:active:hover,
	.filter-section > h3 > a.active:hover,
	.open > .dropdown-toggle.filter-section > h3 > a:hover,
	.filter-section > h3 > a:active:focus,
	.filter-section > h3 > a.active:focus,
	.open > .dropdown-toggle.filter-section > h3 > a:focus,
	.filter-section > h3 > a:active.focus,
	.filter-section > h3 > a.active.focus,
	.open > .dropdown-toggle.filter-section > h3 > a.focus {
		background-color: #ff994f /*{buttons|success-colour}*/;
		border-color: #ff994f /*{buttons|success-colour}*/;
	}
}

.nav > li.dropdown.mega-menu {
    position: relative;
}
.nav > li.dropdown.mega-menu::after {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 20px; 
}
.nav > li.dropdown.mega-menu > .dropdown-menu {
    position: absolute;   
    top: 100%;            
    left: 0;
    width: 100%;         
    background: #fff;     
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);  
    z-index: 9999;       

    display: flex;
    flex-wrap: wrap;
    padding: 15px 10px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity 0.25s ease;
}

.nav > li.dropdown.mega-menu:hover > .dropdown-menu,
.nav > li.dropdown.mega-menu > .dropdown-menu:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.nav > li.dropdown.mega-menu .dropdown-menu > li {
    width: 25%;
    padding: 10px;
    box-sizing: border-box;
}

.nav > li.dropdown.mega-menu .dropdown-menu a {
    white-space: normal;
    word-wrap: break-word;
    display: block;
}
.nav {
    display: flex;
    flex-wrap: nowrap;
}

.nav > li {
    display: inline-block;
    position: relative;
}
.nav > li.dropdown.mega-menu > .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
}
.nav {
    overflow: visible !important;
}

.nav > li {
    overflow: visible !important;
}
.nav {
    position: relative;
}
.nav > li.dropdown.mega-menu > .dropdown-menu {
    position: absolute;
    top: 100%;       
    left: 0;
    width: 100%;    
    
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 9999;

    display: flex;
    flex-wrap: wrap;
    padding: 20px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity 0.25s ease;
}
.nav > li.dropdown.mega-menu:hover > .dropdown-menu,
.nav > li.dropdown.mega-menu > .dropdown-menu:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.header, .nav-wrapper, .navbar {
    position: relative;
}
.top-navbar-wrapper .navbar-default .navbar-nav > li.dropdown.mega-menu > .dropdown-menu {
    position: absolute;
    top: 100%; /* drops below navbar */
    left: 0;
    width: 100%; /* full screen width */
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 9999;
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.top-navbar-wrapper .navbar-default .navbar-nav > li.dropdown.mega-menu:hover > .dropdown-menu,
.top-navbar-wrapper .navbar-default .navbar-nav > li.dropdown.mega-menu > .dropdown-menu:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.thumbnail .buying-options,
.info-buying-options .buying-options{
	display: flex;
	gap: 10px;
}
.thumbnail .buying-options .form-control{
	width: 80px;
}
#downloads ul{
	list-style: none;
	padding: 0;
}
#downloads ul li{
	display: flex;
	flex-wrap: wrap;
	border: 1px solid #ddd;
}
#downloads ul li + li{
	margin-top: 10px;
}
#downloads ul li a{
	display: flex;
	align-items: center;
	padding: 8px 16px;
}
#downloads ul li a:first-child{
	flex-grow: 1;
	overflow: hidden;
}
#downloads ul li a:first-child strong{
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}
#downloads ul li a:first-child i{
	flex-shrink: 0;
	margin-right: 6px;
}
#downloads ul li a:last-child{
	flex-shrink: 0;
}
#downloads ul li:hover{
	background-color: #f6f6f6;
}
.product-wishlist{
	position: absolute;
	top: 4px;
	right: 4px;
	z-index: 10;
}
.product-wishlist .btn{
	font-size: 20px;
}
.thumb_list .product-wishlist{
	right: auto;
	left: 4px;
}

.brand-marquee{
    overflow:hidden;
    width:100%;
    padding:25px 0;
    background:#fff;
}

.brand-marquee-track{
    display:flex;
    flex-wrap:nowrap;
    width:max-content;
    animation:brandScroll 30s linear infinite;
}

.brand-item{
    flex:0 0 auto;
    width:140px;
    margin:0 15px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.brand-item img{
    height:50px;
    width:auto;
    max-width:100%;
    object-fit:contain;
    display:block;
}

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

    to{
        transform:translateX(-50%);
    }
}
/* 1. Force the list to stack vertically instead of side-by-side */
.wrapper-footer .nav.nav-pills.nav-stacked {
    display: block !important;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* 2. Make each list item take up the full width */
.wrapper-footer .nav.nav-pills.nav-stacked li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 0;
}

/* 3. Style the links inside the list items */
.wrapper-footer .nav.nav-pills.nav-stacked li a {
    display: block !important;
    padding: 5px 0 !important; /* Adds vertical spacing between names */
    white-space: normal !important;
    color: #fff; /* Ensure text is visible */
}

/* 4. Fix column spacing on desktop to keep 4 distinct sections */
@media (min-width: 768px) {
    .wrapper-footer .col-sm-3 {
        width: 25% !important;
        float: left !important;
    }
}
/* Reduce banner height by 5% and fix image scaling */

.banner-wrapper {
  height: 550px !important; /* Adjusted to 95% of original height */
  overflow: hidden;
}

/* Ensure the carousel and its internal slides respect the new height */
#homepageCarousel, 
#homepageCarousel .item, 
#homepageCarousel .carousel-item {
  height: 550px !important;
}

/* Scale images to fit perfectly within the new banner size without cropping */
#homepageCarousel img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* Ensures the whole image is visible */
  object-position: center !important;
}
/* Scale down the container-fluid area by 10% */
.container-fluid {
  transform: scale(0.9) !important;
  transform-origin: top center !important;
  
  /* This negative margin helps remove the extra empty space 
     created when the element shrinks visually */
  margin-bottom: -5% !important; 
}
.product-label.top-seller-label {
    display: none !important;
}
/* Change layout to 4 columns and center the last row */
.container-fluid .category-images {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

/* Set each item to 20% width for the 4-column grid */
.container-fluid .category-images a {
    flex: 0 0 20% !important;
    max-width: 20% !important;
    box-sizing: border-box !important;
}