/* TBZ NAV-HIGHLIGHT */
.navbar-nav>li:nth-child(4)>a {
 background: #f4a50b;
}

.navbar-nav>li:nth-child(4)>a:hover {
 background-color: #ff931e !important;
 color: #000 !important;
}

/* HEADER */
.sePage .sePageMain {
 margin-top: 0px;
}

/* HERO */
.sePage .sePageLayout .sePageMain .se-hp-hero .content-block-column {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 position: relative;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
 z-index: 1;
 padding: 14% 10%;
}

.sePage .sePageLayout .sePageMain .se-hp-hero::after {
 display: block;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 z-index: 0;
 background-color: rgba(0, 0, 0, 0.25);
 padding: 0;
 width: 100%;
 content: '';
}

.sePage .sePageLayout .sePageMain .se-hp-hero {
 position: relative;
 overflow: hidden;
}

.sePage .sePageLayout .se-hp-hero h1,
.sePage .sePageLayout .se-hp-hero h2 {
 margin: 22px auto 7px;
}

.sePage .sePageLayout .se-hp-hero p {
 margin: 0px auto 18px;
 font-size: 20px;
}

/* BUTTONS */
.sePage .sePageLayout .sePageMain .btn:not(.btn-link),
.sePage .sePageLayout .sePageMain .btn-primary,
.sePage .sePageLayout .sePageMain a.btn.btn-primary,
.sePage .sePageLayout .sePageMain button.btn.btn-primary {
 margin-top: 11px;
 margin-bottom: 22px;
 border: 2px solid #f4a50b;
 border-radius: 4px;
 background-color: #f4a50b;
 padding: 12px 24px;
 color: #fff;
 font-family: proxima-nova, sans-serif;
 font-size: 14px;
 font-style: normal;
 font-weight: 700;
 letter-spacing: 0.75px;
 text-transform: uppercase;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
 transition: all 0.3s ease;
}

/* Hover and Active States */
.sePage .sePageLayout .sePageMain .btn:not(.btn-link):hover,
.sePage .sePageLayout .sePageMain .btn-primary:hover,
.sePage .sePageLayout .sePageMain a.btn.btn-primary:hover,
.sePage .sePageLayout .sePageMain button.btn.btn-primary:hover,
.sePage .sePageLayout .sePageMain .btn:not(.btn-link):active,
.sePage .sePageLayout .sePageMain .btn-primary:active,
.sePage .sePageLayout .sePageMain a.btn.btn-primary:active,
.sePage .sePageLayout .sePageMain button.btn.btn-primary:active {
 border: 2px solid #d16709;
 background-color: #d16709;
 color: #ffffff;
 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
 text-decoration: none;
 transform: translateY(-2px);
}

/* BRAND SLIDER */
.slick-slide {
 margin: 0 20px;
 display: flex !important;
 justify-content: center;
 align-items: center;
}

#cc-brands-slider {
 background-color: #f68708;
 height: 75px;
}

.slick-slide img {
 max-width: 100%;
 max-height: 100%;
 object-fit: contain;
}

.slick-slider {
 position: relative;
 display: block;
 box-sizing: border-box;
}

.slick-list {
 position: relative;
 display: block;
 overflow: hidden;
 margin: auto;
 padding: auto;
}

.slick-track {
 position: relative;
 top: 0;
 left: 0;
 display: block;
}

.slick-slide {
 display: none;
 float: left;
 height: 100%;
 min-height: 1px;
}

.slick-initialized .slick-slide {
 display: flex;
}

.slide {
 height: 85px;
 display: flex !important;
 justify-content: center;
 align-items: center;
}

.slide img {
 align-self: center !important;
 max-height: 85px;
 object-fit: contain;
}

/* Navigation Arrows */
.slick-prev,
.slick-next {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 background: rgba(0, 0, 0, 0.4);
 color: #ffffff;
 border: none;
 border-radius: 50%;
 width: 50px;
 height: 50px;
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 10;
 cursor: pointer;
 transition: all 0.3s ease;
}

/* Hover Effect for Arrows */
.slick-prev:hover,
.slick-next:hover {
 background: #f68708;
 color: #ffffff;
 transform: translateY(-50%) scale(1.1);
}

/* Adjust Arrow Positioning */
.slick-prev {
 left: -20px;
}

.slick-next {
 right: -20px;
}

.slick-prev::before,
.slick-next::before {
 font-size: 20px;
 /* Increase arrow size */
 color: inherit;
 /* Inherit arrow color from the parent */
}

/* 3 BANNER FEATURE */
.tbz-grid-container {
 display: grid;
 grid-template-columns: 4fr 3fr;
 grid-template-rows: 1fr 1fr;
 gap: 10px;
 padding: 10px;
 box-sizing: border-box;
}

/* Banner Styles */
.banner {
 position: relative;
 overflow: hidden;
 border-radius: 10px;
 text-decoration: none;
 transition: opacity 0.3s ease;
}

/* BACKGROUND IMAGES FOR EACH BANNER */
.large-banner {
 grid-row: span 2;
 height: 650px;
 /* LARGE BANNER URL */
 background: url('https://www.sefiles.net/merchant/6391/images/site/specialized_fall_specials.jpg') center/cover no-repeat;
}

.small-banner-1,
.small-banner-2 {
 height: calc((650px - 10px) / 2);
 background-size: cover;
 background-position: center;
}

.small-banner-1 {
 /* SMALL 1 BANNER URL */
 background: url('https://www.sefiles.net/merchant/6391/images/site/front-page-smallbanner1.jpg') center/cover no-repeat;
}

.small-banner-2 {
 /* SMALL 2 BANNER URL */
 background: url('https://www.sefiles.net/merchant/6391/files/flexiti_banner.jpg') center/cover no-repeat;
}

/* Text Overlay */
.banner-text {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 color: white;
 font-size: 38px;
 font-weight: bold;
 text-align: center;
 background: rgba(0, 0, 0, 0.7);
 padding: 15px 20px;
 border-radius: 8px;
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
 max-width: 100%;
 width: 80%;
 word-wrap: break-word;
 white-space: normal;
}

/* Hover Effect */
.banner:hover {
 opacity: 0.8;
}

/* Responsive Design */
@media (max-width: 819px) {
 .tbz-grid-container {
 grid-template-columns: 1fr;
 grid-template-rows: auto;
 }

 .large-banner {
 grid-row: auto;
 }
}

/*CATEGORY CONTAINERS*/
.tbz-category-grid-container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 margin-top: 25px;
 gap: 20px;
 width: 100%;
}

/* Individual grid items */
.tbz-grid-item {
 position: relative;
 display: block;
 border-radius: 15px;
 overflow: hidden;
 aspect-ratio: 3 / 4;
 background-size: cover;
 background-position: center;
 text-decoration: none;
 transition: background-size 0.3s ease;
}

/* Zoom effect on hover */
.tbz-grid-item:hover {
 background-size: 105%;
 opacity: 0.9;
}

/* Overlay text always visible */
.tbz-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.2);
 display: flex;
 justify-content: center;
 align-items: center;
}

.tbz-overlay span {
 color: white;
 font-size: 2.5rem;
 font-weight: bold;
 text-align: center;
 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
 display: inline-block;
}


/* Responsive design for smaller screens */
@media (max-width: 768px) {
 .tbz-category-grid-container {
 grid-template-columns: 1fr;
 gap: 15px;
 }

 .tbz-grid-item {
 aspect-ratio: 2 / 1.5;
 }

 .tbz-overlay span {
 font-size: 2.2rem;
 }
}

/* 3 FEATURE BANNERS */
.custom-grid-container {
 display: grid;
 grid-template-columns: 4fr 3fr;
 grid-template-rows: 1fr 1fr;
 gap: 10px;
 padding: 10px;
 box-sizing: border-box;
}

/* Feature Banner Styles */
.feature-banner {
 position: relative;
 overflow: hidden;
 border-radius: 10px;
 text-decoration: none;
 transition: opacity 0.3s ease;
}

/* BACKGROUND IMAGES FOR EACH FEATURE */
.large-feature-banner {
 grid-row: span 2;
 height: 650px;
 /* LARGE FEATURE URL */
 background: url('https://www.sefiles.net/merchant/6391/images/site/indoor-training-tbz.jpg') center/cover no-repeat;
}

.small-feature-banner-1,
.small-feature-banner-2 {
 height: calc((650px - 10px) / 2);
 background-size: cover;
 background-position: center;
}

.small-feature-banner-1 {
 /* SMALL 1 FEATURE URL */
 background: url('https://www.sefiles.net/merchant/6391/images/site/shoes-tbz.jpg') center/cover no-repeat;
}

.small-feature-banner-2 {
 /* SMALL 2 FEATURE URL */
 background: url('https://www.sefiles.net/merchant/6391/images/site/bike-racks-tbz.jpg') center/cover no-repeat;
}

/* Text Overlay */
.feature-text {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 color: white;
 font-size: 38px;
 font-weight: bold;
 text-align: center;
 background: rgba(0, 0, 0, 0.7);
 padding: 15px 20px;
 border-radius: 8px;
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
 max-width: 100%;
 width: 80%;
 overflow-wrap: normal;
 word-break: normal;
 white-space: normal;
}

/* Hover Effect */
.feature-banner:hover {
 opacity: 0.8;
}

/* Responsive Design */
@media (max-width: 819px) {
 .custom-grid-container {
 grid-template-columns: 1fr;
 grid-template-rows: auto;
 }

 .large-feature-banner {
 grid-row: auto;
 }
}

/* EMAIL FORM */
.bee-field-submit {
 margin-top: 0px !important;
}

/* FOOTER */
.sePageFooter {
 margin-top: 0px;
}

/* DON'T REMOVE CODE */
/* 3 COLLUMN BOXES 
 .content-block-content {
 background-color: #ff931e;
 padding: 20px;
 }
 */

/* SHOP LINKS 
 
 .tbz-image-custom:hover {
 opacity: 0.9;
 border-radius: 15px;
 }
 
 .se-shop-links .content-block-column::before {
 content: '';
 background-color: rgba(0, 0, 0, 0.25);
 width: 100%;
 position: absolute;
 left: 0;
 top: 0;
 bottom: 0;
 }
 
 .se-shop-links .editContent, .se-shop-links .content-block-column {
 position: relative;
 }
 
 .sePageContent .sePageSection.se-shop-links {
 margin-bottom: 0px;
 }
 
 .se-shop-links .col-margin-bottom {
 margin-bottom: 30px;
 }
 
 .sePage .sePageLayout .se-shop-links h3 {
 margin-top: 22px;
 }
 
 .seResponsive .se-shop-links .content-block-column .btn {
 margin-bottom: 22px;
 }
 */