/*
Theme Name:Cycle Highlands
Author: unavoided
Version: 1.1
Text Domain: cyclehighlands
*/

* {margin:0; padding:0; color:#000;font-family: "interstate", sans-serif; font-style: normal; font-weight: 400; font-style: normal;  }
html {background:#fff; height:100%; overflow-x: hidden; scroll-behavior: smooth;}
body {height:100%;}

h1, .h1 {margin-bottom:3%;  font-weight: 700;font-style: normal; font-size: 60px;}
h2, .h2 {margin-bottom:3%;  font-weight: 700;font-style: normal; font-size: 45px; }
h3, .h3 {margin-bottom:3%;  font-weight: 700; font-style: normal; font-size: 36px; }
h4, .h4 {margin-bottom:3%;  font-weight: 700;font-style: normal;  font-size: 27px;}
p  {margin-bottom:3%; font-size:16px; line-height:1.50em; font-weight: 300;}
ul {margin-bottom:3%; padding-left:3%; }
li {font-size:16px;  font-weight: 300; }

.whitetext, .whitetext h1, .whitetext h2, .whitetext h3, .whitetext h4, .whitetext li, .whitetext span, .whitetext p, .whitetext strong {color: #fff;}
.boldtext, strong, b {font-weight: 700;}
.nomargin {margin-bottom: 0 !important;}

strong {font-weight: 600; }
i, em {font-style: italic;}
hr {border: 0; color:#000; height:1px; background:#999999; clear:both; margin:2% 0;}
.uppercase {text-transform: uppercase;}

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

/*colours*/
.grey {background: #e1e1e1}

.view-all{	background:#f26500;	color:#fff;	padding:14px 28px;	text-decoration:none;	font-weight:700;	display:flex;	align-items:center; gap:12px;}
.view-all .arrow{	font-size:22px;	line-height:1; color: #fff;}
.linkbutton{	background:#f26500;	color:#fff;	padding:14px 28px;	text-decoration:none;	font-weight:700;	display:inline-block;	align-items:center; gap:12px;}
.linkbutton .arrow{	font-size:22px;	line-height:1; color: #fff;}
.whitetext .linkbutton{background:#fff;color:#f26500;}

.gform-theme .gform_button,
.gform-theme input[type="submit"]{background:#f26500 !important; border-radius: 0 !important; color:#fff; border:0; padding:14px 28px !important; font-size:16px; font-weight:600; cursor:pointer; transition:all .2s ease;}

/*layout*/
main {  width: 100%;}
section {  width: 100%;  padding: 5px 0px;}
.padding {padding: 3%; width: 94%}
.container {  max-width: 1280px;  margin: 0 auto;}

.flex-two {  display: flex;  gap: 40px; align-items:center;}
.flex-two > * {  flex: 1;}
.flex-panel {   gap: 5px !important; }
.flex-top {align-items: flex-start !important;}

/*header*/
.site-header{display:flex; align-items:center; justify-content:space-between; padding:5px 1%; position:relative; background: #f76a00; }
.headerlogo{height:50px; display: block;}
.menu-toggle{ font-size:18px; background:none; border:none; cursor:pointer; margin-left:auto; color: #fff; font-weight: 700; display:flex;	align-items:center;	gap:8px;}
.hamburger {	display: flex;	flex-direction: column;	justify-content: center;	gap: 5px;	width: 22px;	height: 18px;	position: relative;}
.hamburger span {	display: block;	height: 2px;	width: 100%;	background: #fff;	transition: all 0.3s ease;}
.menu-toggle.active .hamburger span:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active .hamburger span:nth-child(2) {
	opacity: 0;
}

.menu-toggle.active .hamburger span:nth-child(3) {
	transform: rotate(-45deg) translate(5px, -5px);
}

.mega-wrapper{
	position:absolute;
	top:100%;
	left:0;
	width:100%;
	background:#f76a00;
	padding:60px;

	opacity:0;
	visibility:hidden;
	transform:translateY(-10px);
	transition:all .25s ease;
}

.mega-wrapper.open{
	opacity:1;
	visibility:visible;
	transform:translateY(0);
	z-index: 100;
}

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

.main-menu li{
	margin-bottom:20px;
}

.main-menu a{
	text-decoration:none;
	color:#fff;
	font-size:24px;
	font-weight:600;
}

.main-menu > ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 3 columns */
	gap: 40px;
}

.main-menu > ul > li > a {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
	margin-bottom: 10px;
	display: block;
}

.main-menu ul ul {
	margin-top: 10px;
}

.main-menu ul ul li {
	margin-bottom: 8px;
}

.main-menu ul ul a {
	font-size: 16px;
	font-weight: 400;
	text-transform: none;
	opacity: 0.9;
}
.main-menu > ul > li > a[href="#"] {
	pointer-events: none;
	cursor: default;
}

/*breadcrumbs*/
.breadcrumbs{	font-size:12px;	text-transform:uppercase;	letter-spacing:.12em;	font-weight:500;	margin-bottom:12px;}
.page-banner .breadcrumbs a{	color:rgba(255,255,255,.85);	text-decoration:none;	transition:opacity .2s ease;}
.page-banner .breadcrumbs span{	color:rgba(255,255,255,.6);}
.page-banner .sep{	margin:0 5px;	color:rgba(255,255,255,.4);}

.container .breadcrumbs a{	color:rgba(0,0,0,.85);	text-decoration:none;	transition:opacity .2s ease;}
.container .breadcrumbs span{	color:rgba(0,0,0,.6);}
.container .sep{	margin:0 5px;	color:rgba(0,0,0,.4);}

.breadcrumbs a:hover{	opacity:.7;}

/*fade in*/
.fade-in {	opacity: 0;	transform: translateY(30px);	transition: all 0.6s ease;}
.fade-in.visible {	opacity: 1;	transform: translateY(0);}


/* homepage 

hero slider */
.hero-slider {	height:65vh;	overflow:hidden;	position:relative;}
.hero-slider .swiper-wrapper {	height:100%;}
.hero-slider .swiper-slide {	height:100%;	width:100%;}
.hero-slide {	height:100%;	background-size:cover;	background-position:center;	position:relative;	color:#fff;}
/*latest bikes*/
.featured-bikes {padding:40px 0 !important; width:100%;	overflow:hidden !important;}
.featured-bikes .swiper-wrapper{		align-items:stretch;}	
.bike-card{	background:#fff;	border:1px solid #ddd; box-sizing:border-box; transition:transform .2s ease, box-shadow .2s ease; display:flex; flex-direction:column;	height:100%;}
.bike-card:hover{	transform:translateY(-6px);	box-shadow:0 10px 30px rgba(0,0,0,.08);}
.bikecard-inner {padding: 20px}
.bike-card a {text-decoration: none; display:flex;	flex-direction:column;	height:100%;}
.bike-card img{	 width:100%;	height:220px;	object-fit:contain; margin-bottom:10px;}
.bike-info{	margin-top:auto;}
.bike-info h3{	margin-top:10px; font-size: 20px;}
.bike-info p{	font-size:12px;	color:#666;}
.bike-hover {	position: absolute;	inset: 0;	background: rgba(0,0,0,0.6);	display: flex;	align-items: center;	justify-content: center;	opacity: 0;
	transition: opacity 0.25s ease;}
.bike-hover span {	color: #fff;	font-weight: 600;	font-size: 16px;	letter-spacing: 0.5px;}
.bike-card:hover .bike-hover {	opacity: 1;}
.bike-card img {	transition: transform 0.3s ease;}
.bike-card:hover img {	transform: scale(1.05);}

.featured-controls{	display:flex;	align-items:center;	gap:20px;	margin-top:30px;	width:100%;}
.featured-controls .swiper-button-prev,.featured-controls .swiper-button-next{	position:relative;	top:auto;	left:auto;	right:auto;	margin:0;	flex:0 0 auto;
	width:36px;	height:36px;	display:flex;	align-items:center;	justify-content:center;	color:#000;}
.featured-controls .swiper-scrollbar{	flex:1;	height:2px;	background:#e5e5e5;	border-radius:2px;	position:relative !important;	margin-top: 7px;}
.featured-controls .swiper-scrollbar-drag{	background:#000;}
.featured-controls .swiper-button-prev:after,.featured-controls .swiper-button-next:after{	font-size:30px;}

/* brand logos */
.brand-logo{	max-width:300px;}
.brand-stack{	position:absolute;	right:80px;	bottom:80px;	display:flex;	flex-direction:column;	gap:20px;	align-items:flex-end;}
.brand-stack img{	height:auto;	width:300px;	opacity:.9;}
/* shop info */
.shop-info {position: absolute; top: 80px; left: 80px;}
.shop-title{	display:flex;	align-items:center;	gap:15px; margin-bottom:1%;	}
.shop-logo{	height:48px;	width:auto;}
.shop-title .light{	font-weight:500;}
.brand-text {position: absolute; bottom: 80px; left: 80px;}

.front-titles {display:flex;	align-items:center; gap:15px;}
.front-titles h2{	 display:inline-block;}

.brand-row{	display:flex;	align-items:center;	gap:60px;	flex-wrap:nowrap; align-items:center;	justify-content:center;}
.brand-row a{	flex:1;	display:flex;	justify-content:center;}
.brand-row img{	width:100%;	height:auto;	filter:brightness(0);}

.home-panel{	position:relative;	background-size:cover;	background-position:center;	min-height:500px;	display:flex;	align-items:flex-end;}
.panel-content{	padding:40px;	color:#fff;	max-width:500px;}
.panel-link{	display:inline-block;	margin-top:10px;}

.featured-brand-logo{	max-width:180px; display: block;	margin-bottom:10px;	filter: brightness(0);}

/*pages*/

/*banner*/
.page-banner{	background-size:cover;	background-position:center;	padding:140px 0 140px 80px;	position:relative;}
.page-banner:before{	content:"";	position:absolute;	inset:0;	background:rgba(0,0,0,0.45);}
.banner-content{	position:relative;	z-index:2;	color:#fff;}
.banner-brand{	position:absolute;	right:80px;	top:50%;
	transform:translateY(-50%);
	max-width:300px; max-width:300px;}
.banner-brand img{	height:auto;	width:300px;	opacity:.9;}


/*service*/

.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:40px; }
.service-box{ padding:30px; background:#fff; border:1px solid #eee; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; text-decoration: none;}
.service-box:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,.08);border-color:#ddd;}
.service-icon{width:40px;margin-bottom:15px; transition:transform .25s ease;}
.service-box:hover .service-icon{transform:scale(1.1);}
.service-box h3::after{content:"→"; margin-left:8px; opacity:0; transition:opacity .2s ease;}
.service-box:hover h3::after{opacity:1; transform:translateX(3px);}
.service-box h3{margin-bottom:10px;}
.service-box{will-change:transform;}

.highlight-grid{display:grid; grid-template-columns:repeat(3,1fr);gap:5px; margin-top:60px;}
.highlight-box{position:relative; display:flex; align-items:center;  min-height:360px; padding:40px; color:#fff; text-decoration:none; background-size:cover;
background-position:center; overflow:hidden; }
.highlight-box::before{content:""; position:absolute; inset:0; background:rgba(0,0,0,.55); transition:opacity .3s ease; }
.highlight-content{position:relative; z-index:2; max-width:420px; }
.highlight-content h3{ margin-bottom:10px;} 
.highlight-content p{ margin-bottom:15px; opacity:.9; }
.highlight-content .arrow{ font-weight:600; }
#book-service{	margin-top:60px;}


.workshop-faq{margin-top:80px;}
.faq-list{margin-top:30px;}
.faq-item{border-bottom:1px solid #eee; cursor:pointer; padding:24px 0;}
.faq-question{display:flex; justify-content:space-between; align-items:center; font-weight:700; }
.faq-toggle{ font-size:22px; line-height:1; transition:transform .2s ease;}
.faq-answer{display:none; margin-top:15px; max-width:700px; padding: 20px}
.faq-item.open .faq-answer{ display:block; }
.faq-item.open .faq-toggle{transform:rotate(45deg);}

.faq-layout{display:grid; grid-template-columns:2fr 1fr; gap:60px;}
.faq-help{ background:#f26500; color:#fff; padding:40px; border-radius:6px; height:fit-content; }
.faq-phone{font-size:22px;font-weight:700;margin:20px 0;}

/*bikes*/
.product-title {text-transform: uppercase; font-size: 80px; font-weight: 800; font-style: italic}
.bike-specs{	display:flex;	gap:20px;	overflow-x:auto;	padding-bottom:10px; align-items: stretch; margin-top: 40px;}
.spec-box{background: rgb(244, 244, 244);	border:1px solid #ddd;	padding:30px 15px;	font-size:14px;	border-radius:4px;	line-height:1.4;	display:flex;
	align-items:center; text-align: center;}
.bike-price {font-size: 40px; font-weight: 800; font-style: italic; margin-bottom: 3%}
.available {font-size: 25px;}
.product-title + p{	max-width:800px;}
.bike-gallery{	display:grid;	grid-template-columns:repeat(4,1fr);	gap:15px;	margin-top:20px;}
.bike-gallery a{	display:block;}
.bike-gallery img{	width:100%;	height:80px;	object-fit:contain;	transition:transform .3s ease;}
.bike-gallery a:hover img{	transform:scale(1.05);}
.glightbox-container .gslide-image img{	max-width:85vw;	max-height:85vh;	margin:auto;}

.bike-highlights{	background-size:cover;	background-position:center;	position:relative;	padding-top: 120px; padding-bottom: 120px;}
.bike-highlights:before{	content:"";	position:absolute;	inset:0;	background:rgba(0,0,0,.65);}
.highlights-inner{	position:relative;	z-index:2;	display:flex;	gap:80px;	align-items:center;}
.highlight-left{	flex:1; max-width:650px;}
.highlight-left h2 {text-transform: uppercase; font-size: 60px; font-weight: 800 !important; font-style: italic !important; color: #fff;}
.highlight-right{	flex:1;	display:grid;	grid-template-columns:1fr;	gap:20px;	gap:20px;}
.highlight-item{	color:#fff;	font-size:22px;	font-weight:700;	padding-bottom:10px;	border-bottom:2px solid rgba(255,255,255,.3);}
.spec-block{padding:25px 0;border-bottom:1px solid rgba(255,255,255,.25);}
.spec-block h4{margin:0 0 10px;font-size:18px;font-weight:700;}
.spec-block ul{list-style:none;padding:0;margin:0;}
.spec-block li{padding:4px 0;font-size:15px;opacity:.9;}

.norebrand-link{	display:flex; text-decoration: none; align-items:center;	gap:20px;}
.morebrand-link img{	height:40px;	width:auto;	display:block; filter:brightness(0);}
.morebrand-more h2{	margin:0;	display:flex;	align-items:center;	gap:10px;}
.morebrand-link:hover{	opacity:.65;}

.ch-gallery a {	position: relative;	overflow: hidden;}
.ch-gallery img {	transition: transform 0.4s ease;}
.ch-gallery a:hover img {	transform: scale(1.05);}
.ch-gallery {	display: grid;	grid-template-columns: repeat(6, 1fr);	gap: 10px;}



.ch-gallery img {
	width: 100%;
	height: 160px;
	object-fit: cover;
	display: block;
}

/*brands*/
.brand-bikes {	padding: 40px 0;}
.bike-grid {	display: grid;	grid-template-columns: repeat(4, 1fr);	gap: 30px;}
.flex-local {	display: flex;	gap: 40px;	align-items: center;}
.brand-local-image {	flex: 1; /* 1/4 */}
.brand-local-image img {	display: block;	height: 100%;	min-height: 260px;	object-fit: cover;}
.brand-local-content {	flex: 3; /* 3/4 */}
.reasons-block{padding:25px 0;}
.reasons-block h4{margin:0 0 10px;font-size:18px;font-weight:700;}
.reasons-block ul{list-style:none;padding:0;margin:0;}
.reasons-block li{padding: 12px 0;font-size:15px;opacity:.9; border-bottom:1px solid rgba(255,255,255,.25);}
.reasons-block p {margin-bottom: 0;}

/*gforms*/
select.placeholder {	color:#999;}
select {	color:#222;}




/*mobile*/
@media (max-width: 768px) {
.flex-two {	flex-direction: column;  }
.services-grid{grid-template-columns:1fr;}
.bike-gallery a{	flex:1 1 calc(50% - 20px);}
.bike-grid {	grid-template-columns: repeat(2, 1fr);}

.flex-local {	flex-direction: column;}
.brand-local-image,.brand-local-content {	flex: 1;}

}


@media (max-width: 1024px) {
	.bike-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.bike-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.bike-grid {
		grid-template-columns: 1fr;
	}
}

/* Tablet (768–1024) */
@media (max-width: 1024px) {
	.ch-gallery {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Mobile */
@media (max-width: 768px) {
	.ch-gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}