:root{
  --bg:#021d2b;
  --bg-2:#041f2f;
  --panel:#061f2d;
  --panel-2:#0a2435;
  --line:#1e3849;
  --text:#edf3f8;
  --muted:#a7b7c2;
  --accent:#4ed7d4;
  --accent-2:#1fc5c5;
  --blue:#60d3ff;
  --green:#1f8f7d;
  --shadow:0 20px 30px rgba(0, 0, 0, 0.18);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg) !important;
  color:var(--text) !important;
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}

.container{
  width:min(1200px,calc(100% - 32px));
  margin:auto;
}

/* HEADER */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(2,29,43,0.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(8px);
  box-shadow:var(--shadow);
}
.header-inner{
  height:78px;
  display:flex;
  align-items:center;
  gap:24px;
}
.logo{
  font-size:30px;
  font-weight:800;
  letter-spacing:-1.2px;
  color:#f4fbff;
  display:flex;
  align-items:center;
  gap:8px;
}
.logo:before{
  content:"";
  width:18px;
  height:18px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #f5f5f5 0 18%, #1a1a1a 18% 44%, #d54040 44% 58%, #0d1c2a 58% 100%);
  display:inline-block;
  position:relative;
  box-shadow:0 0 0 3px rgba(255,255,255,0.08);
}
.logo span{color:#f4fbff}
.nav{
  display:flex;
  gap:26px;
  margin-left:auto;
}
.nav a{
  color:#edf3f8;
  font-weight:700;
  font-size:15px;
}
.nav a:hover{color:var(--accent)}
.menu-btn{
  display:none;
  background:none;
  border:0;
  color:#f4fbff;
  font-size:30px;
}
.site-header .search{
  display:flex;
  align-items:center;
  border:1px solid rgba(255,255,255,0.30);
  border-radius:14px;
  height:46px;
  padding:0 14px;
  gap:8px;
  min-width:410px;
  background:transparent;
}
.site-header .search input{
  width:100%;
  background:none;
  border:0;
  outline:0;
  color:#edf3f8;
  font-size:18px;
}
.site-header .search input::placeholder{color:#bacfd9}

/* GENERAL */
.hero{padding:52px 0 28px}
.hero h1{font-size:42px;line-height:1.1;margin:0 0 12px}
.hero p{color:var(--muted);font-size:19px;max-width:720px}
.section{padding:28px 0}
.section h2{font-size:30px;margin:0 0 18px}
.tabs{
  display:flex;
  gap:36px;
  overflow:auto;
  border-bottom:1px solid var(--line);
  margin-bottom:22px;
}
.tabs a{
  white-space:nowrap;
  padding:12px 0;
  color:#c9d7df;
  font-weight:800;
  position:relative;
  font-size:16px;
  letter-spacing:0.5px;
}
.tabs a.active,
.tabs a:hover{color:var(--accent)}
.tabs a.active:after{
  content:"";
  position:absolute;
  height:4px;
  left:0;
  right:0;
  bottom:-1px;
  border-radius:4px 4px 0 0;
  background:var(--accent);
}

.bikewale-home{padding:18px 0 0}
.hero-inline{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:30px 0 6px}
.hero-inline h1{font-size:58px;line-height:1.05;margin:0;letter-spacing:-2px;color:#edf3f8}
.hero-copy{max-width:1220px;color:#afc0cb;font-size:18px;line-height:1.5;margin:0 0 22px}
.read-more{color:var(--blue);font-weight:700;font-size:18px;white-space:nowrap}
.browse-wrap h2,.feature-head{font-size:30px;margin:0 0 18px;color:#edf3f8;letter-spacing:-0.7px}

.brand-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(180px, 1fr));
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:rgba(9,27,35,0.7);
}
.brand-box{
  min-height:170px;
  padding:22px 18px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:transparent;
  text-align:center;
  color:#edf3f8;
}
.brand-box:nth-child(4n){border-right:0}
.brand-box span{font-size:17px;font-weight:700;color:#edf3f8;margin-top:12px}
.brand-logo{font-weight:900;font-size:38px;letter-spacing:-1.2px;text-transform:uppercase;line-height:1;color:#edf3f8}
.brand-royal-enfield{color:#ff5d5d}
.brand-yamaha{color:#dfe8ef}
.brand-tvs{color:#6ac7ff}
.brand-honda{color:#7ab9ff}
.brand-bajaj{color:#8fb1ff}
.brand-hero{color:#ff7a7a}
.brand-ather{color:#edf3f8}
.brand-ktm{color:#edf3f8}
.brand-triumph{color:#edf3f8}
.brand-suzuki{color:#6ac7ff}
.view-all{grid-column:1 / -1;min-height:96px;border-right:none;border-bottom:none;background:rgba(8,23,30,0.6);font-size:32px;color:#60d3ff;font-weight:700}

.pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:8px}
.pill{
  border:1px solid rgba(255,255,255,0.45);
  background:rgba(3,24,34,0.9);
  border-radius:999px;
  padding:12px 14px;
  text-align:center;
  font-weight:700;
  color:#edf3f8;
}
#types .pills{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

#types .body-style-card{
  min-width:0;
  padding:8px;
}

#types .body-style-image{
  height:110px;
  margin-bottom:6px;
}

#types .body-style-card strong{
  font-size:15px;
}

@media (max-width:700px){
  #types .pills{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }

  #types .body-style-card{
    padding:5px;
  }

  #types .body-style-image{
    height:82px;
  }

  #types .body-style-card strong{
    font-size:12px;
  }
}
.feature-tabs{display:flex;gap:36px;overflow:auto;border-bottom:1px solid var(--line);margin-bottom:22px}
.feature-tabs a{white-space:nowrap;padding:12px 0;color:#c9d7df;font-weight:800;position:relative;font-size:16px;letter-spacing:0.5px}
.feature-tabs a.active,.feature-tabs a:hover{color:var(--accent)}
.feature-tabs a.active:after{content:"";position:absolute;height:4px;left:0;right:0;bottom:-1px;border-radius:4px 4px 0 0;background:var(--accent)}

.feature-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:22px;margin-top:12px}
.feature-card{background:rgba(4,20,30,0.9);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 1px 0 rgba(17,24,39,0.02)}
.feature-image{height:240px;background:linear-gradient(135deg, #e8edf0, #dfe6eb);position:relative;overflow:hidden}
.feature-image:before{content:"";position:absolute;inset:20px 12% 26px 12%;border-radius:70% 30% 50% 40% / 60% 40% 60% 40%;background:linear-gradient(135deg, rgba(17,24,39,0.85), rgba(17,24,39,0.95));transform:skewX(-10deg);box-shadow:inset -12px -8px 0 rgba(255,255,255,0.1)}
.feature-image:after{content:"";position:absolute;width:80%;height:40%;left:10%;bottom:18%;border-radius:20% 20% 0 0;background:rgba(255,255,255,0.75);filter:blur(10px)}
.feature-bike-2:before{background:linear-gradient(135deg, #0a0b0b, #2b2d31)}
.feature-bike-3:before{background:linear-gradient(135deg, #1f2937, #374151)}
.feature-body{padding:18px 18px 20px}
.feature-body h3{margin:0 0 10px;font-size:24px;letter-spacing:-0.6px;color:#edf3f8}
.feature-price{font-size:27px;font-weight:800;color:#edf3f8;margin:0 0 8px}
.feature-price span{font-size:17px;font-weight:500;color:var(--muted)}
.feature-sub{color:var(--muted);font-size:16px;margin-bottom:16px}
.feature-button{display:inline-block;border:2px solid var(--accent);padding:12px 18px;border-radius:12px;color:var(--accent);font-weight:800;background:transparent}
.feature-button:hover{background:var(--accent);color:#06202a}

.promo-block{margin-top:24px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg, #0e5c53, #0e4a4d);padding:20px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.promo-titleline{font-size:22px;font-weight:800;color:#edf3f8}
.promo-link{display:inline-block;min-width:160px;text-align:center;background:rgba(8,20,28,0.2);border:1px solid rgba(255,255,255,0.35);color:#edf3f8;padding:12px 16px;border-radius:12px;font-weight:800}

.browse-panel{display:block}
.browse-wrap{padding-bottom:10px}
.brand-box:hover,
.feature-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 18px rgba(0,0,0,0.18);
}
.brand-box,
.feature-card,
.pill,
.feature-button,
.promo-link{
  transition:all 0.2s ease;
}
.feature-card:hover .feature-button{
  background:var(--accent);
  color:#06202a;
}
.feature-button:hover,
.promo-link:hover,
.pill:hover{
  transform:translateY(-1px);
}
.specs {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px 18px;
  margin:18px 0 30px;
}

.spec {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:14px 16px;
  border:1px solid rgba(96,211,255,0.18);
  border-radius:12px;
  background:rgba(6, 27, 38, 0.8);
}

.spec-label {
  color:var(--text);
  font-weight:700;
  font-size:15px;
}

.spec-value {
  color:var(--muted);
  font-size:15px;
  text-align:right;
}

@media (max-width:700px) {
  .specs {
    grid-template-columns:1fr;
  }
}
.grid {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
  align-items:stretch;
}

.bike-card {
  width:100%;
  max-width:100%;
  border:1px solid rgba(96,211,255,0.18);
  border-radius:18px;
  overflow:hidden;
  background:rgba(6,27,38,0.9);
  box-shadow:0 12px 24px rgba(0,0,0,0.12);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.bike-card:hover {
  transform:translateY(-3px);
  box-shadow:0 18px 32px rgba(0,0,0,0.18);
}

.bike-card-link {
  display:block;
  height:100%;
  color:inherit;
}

.bike-image {
  height:230px;
  background:#0d2330;
  overflow:hidden;
  border-bottom:1px solid rgba(96,211,255,0.18);
}

.bike-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.card-body {
  padding:18px 18px 20px;
}

.card-body h3 {
  margin:0 0 10px;
  font-size:22px;
  line-height:1.2;
  color:var(--text);
}

.card-body .price {
  font-size:20px;
  font-weight:800;
  color:#ffffff;
  margin:0 0 6px;
}

.card-body .muted {
  color:var(--muted);
  font-size:14px;
}

.card-body .btn {
  display:inline-block;
  margin-top:14px;
  width:100%;
  text-align:center;
  padding:12px 14px;
  border:1px solid rgba(96,211,255,0.35);
  border-radius:10px;
  background:transparent;
  color:var(--text);
  font-weight:700;
}

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

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

  .bike-image {
    height:200px;
  }
}
.single-bike-image-wrap {
  width:min(1100px, 100%);
  margin:24px 0;
}

.single-bike-image-trigger {
  display:block;
  width:100%;
  border:0;
  background:none;
  padding:0;
  cursor:pointer;
}

.single-bike-main-image {
  display:block;
  width:100%;
  max-height:610px;
  object-fit:contain;
  border-radius:18px;
  background:rgba(7, 23, 31, 0.9);
  box-shadow:0 18px 30px rgba(0, 0, 0, 0.12);
}

.bike-lightbox {
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(1, 8, 12, 0.8);
  backdrop-filter:blur(6px);
  z-index:9999;
  padding:40px;
}

.bike-lightbox.is-open {
  display:flex;
}

.bike-lightbox img {
  max-width:80vw;
  max-height:80vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:18px;
  background:#061b24;
  box-shadow:0 30px 60px rgba(0,0,0,0.35);
}

.bike-lightbox-close {
  position:absolute;
  top:20px;
  right:26px;
  width:46px;
  height:46px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  color:#fff;
  font-size:32px;
  line-height:1;
  cursor:pointer;
}
.bike-media-tabs {
  display:flex;
  gap:10px;
  margin:0 0 20px;
  overflow-x:auto;
  border-bottom:1px solid var(--line);
}

.bike-media-tab {
  flex:0 0 auto;
  padding:12px 18px;
  border:0;
  border-bottom:3px solid transparent;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-weight:700;
  cursor:pointer;
}

.bike-media-tab:hover,
.bike-media-tab.is-active {
  color:var(--accent);
  border-bottom-color:var(--accent);
}

.bike-media-panel {
  margin:0 0 24px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(7,23,31,0.7);
}

.bike-media-panel[hidden] {
  display:none;
}

.bike-colour-grid,
.bike-gallery-grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}

.bike-colour-item,
.bike-gallery-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  color:var(--text);
  cursor:pointer;
}

.bike-colour-item:hover,
.bike-gallery-item:hover {
  border-color:var(--accent);
}

.bike-colour-item img,
.bike-gallery-item img {
  display:block;
  width:100%;
  height:130px;
  object-fit:contain;
}

.bike-colour-item span {
  font-size:14px;
  text-align:center;
}

.bike-video-wrap {
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border-radius:12px;
}

.bike-video-wrap iframe {
  width:100%;
  height:100%;
  border:0;
}
.bike-image-actions,
.bike-gallery-controls {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:14px 0 20px;
}

.bike-image-action,
.bike-gallery-nav {
  border:1px solid rgba(96,211,255,0.4);
  border-radius:999px;
  background:transparent;
  color:var(--text);
  font:inherit;
  font-weight:700;
  cursor:pointer;
}

.bike-image-action {
  padding:10px 16px;
}

.bike-image-action:hover,
.bike-gallery-nav:hover {
  border-color:var(--accent);
  color:var(--accent);
}

.bike-gallery-nav {
  width:40px;
  height:40px;
  padding:0;
  font-size:20px;
}

.bike-gallery-position {
  min-width:60px;
  color:var(--muted);
  text-align:center;
}

@media (max-width:700px) {
  .bike-media-panel {
    padding:12px;
  }

  .bike-colour-grid,
  .bike-gallery-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .bike-colour-item img,
  .bike-gallery-item img {
    height:110px;
  }
}

@media (max-width:700px) {
  .single-bike-main-image {
    max-height:420px;
  }

  .bike-lightbox img {
    max-width:92vw;
    max-height:72vh;
  }
}

/* COMPARISON / TABLES */
.bike-compare-box{
  width:100%;
  max-width:100%;
  margin:30px auto 0;
}

.compare-selects {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:20px;
}

.compare-select {
  width:100%;
}

.compare-select label {
  display:block;
  margin-bottom:8px;
  font-weight:700;
  color:var(--text);
}

.compare-select select {
  width:100%;
  padding:12px 14px;
  border:1px solid rgba(96,211,255,0.35);
  background:rgba(8,24,35,0.9);
  color:var(--text);
  border-radius:12px;
  font-size:16px;
}
.compare-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:12px;
}

.bike-compare-box .btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:12px 20px;
  border:0;
  border-radius:12px;
  background:linear-gradient(135deg, var(--accent), var(--blue));
  color:#042330;
  font-weight:800;
  font-size:15px;
  cursor:pointer;
  box-shadow:0 12px 24px rgba(78, 215, 212, 0.22);
  transition:all 0.2s ease;
}

.bike-compare-box .btn:hover {
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(78, 215, 212, 0.28);
}

.bike-compare-box .btn-secondary {
  background:transparent;
  border:1px solid rgba(96,211,255,0.35);
  color:var(--text);
  box-shadow:none;
}

.bike-compare-box .btn-secondary:hover {
  background:rgba(96, 211, 255, 0.07);
  box-shadow:none;
}
.bike-compare-box .btn {
  margin-top:12px;
}

.compare-results-wrap {
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:28px;
}

.compare-results {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:20px;
  min-width:0;
  flex:1;
  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:none;
}

.compare-results::-webkit-scrollbar {
  display:none;
}

.comparison-card {
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(96,211,255,0.25);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(10,36,53,0.98), rgba(5,25,37,0.98));
  box-shadow:0 18px 32px rgba(0,0,0,0.2);
}

.comparison-card-image {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:190px;
  padding:18px;
  background:rgba(2,29,43,0.72);
}

.comparison-card-image img {
  width:100%;
  height:190px;
  object-fit:contain;
}

.comparison-card h3 {
  margin:0;
  padding:18px 20px 12px;
  color:var(--text);
  font-size:21px;
}

.comparison-card-specs {
  padding:0 20px 18px;
}

.comparison-card-spec {
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:10px 0;
  border-bottom:1px solid rgba(96,211,255,0.14);
}

.comparison-card-spec:last-child {
  border-bottom:0;
}

.comparison-card-spec span {
  color:var(--muted);
}

.comparison-card-spec strong {
  color:var(--text);
  text-align:right;
}

.compare-slider-button {
  flex:0 0 46px;
  width:46px;
  height:46px;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--blue);
  color:#042330;
  font-size:23px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(96,211,255,0.22);
  transition:transform 0.2s ease, background 0.2s ease;
}

.compare-slider-button:hover {
  background:var(--accent);
  transform:scale(1.05);
}

#more-brands:not([hidden]) {
  display: contents;
}
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
}

.category-grid .category {
  min-height: 150px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:rgba(7,23,31,0.8);
}

.more-brands {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
}

.more-brands[hidden] {
  display: none;
}

.body-style-card {
  display: block;
  min-width: 0;
  padding: 8px;
  text-align: center;
  color: #edf3f8;
}

.body-style-image {
  height: 180px;
  margin-bottom: 8px;
  overflow: hidden;
}

.body-style-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 700px) {
  .category-grid,
  .more-brands {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .body-style-image {
    height: 110px;
  }
}
@media (max-width: 700px) {
  .header-inner {
    min-height: 68px;
    height: auto;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 0;
  }

  .menu-btn {
    display: block;
    order: 1;
    padding: 0;
    cursor: pointer;
	 position: relative;
    z-index: 101;
    pointer-events: auto;
  }

  .logo {
    order: 2;
    font-size: 24px;
  }

  .site-header .search {
    order: 3;
    flex: 1 1 150px;
    min-width: 0;
    width: auto;
    height: 42px;
  }

  .site-header .search input {
    font-size: 14px;
  }

  .nav {
    order: 4;
    display: none;
    width: 100%;
    margin-left: 0;
    gap: 0;
  }

  .nav a {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }

  .compare-selects {
    grid-template-columns: 1fr;
    gap: 12px;
  }

.compare-results-wrap {
  gap:8px;
}

.compare-results {
  grid-template-columns:repeat(2, minmax(82%, 1fr));
  gap:12px;
}

.compare-slider-button {
  flex-basis:38px;
  width:38px;
  height:38px;
  font-size:19px;
}
  .container {
    width: min(100% - 20px, 1200px);
  }

  .hero h1 {
    font-size: 32px;
  }

  .hero p {
    font-size: 16px;
  }
}