header form.customform input,header form.customform button {                                                                                                             
  margin-bottom: 0;
}
img.logo { 
  max-width: 300px;
}
.icon-sli-basket::before {
  color: #444;
  font-size: 1.3rem;
  margin-right: 5px;
  top: 2px;
  position: relative;
}
#header-carousel .owl-dots {
  margin-top: -30px !important;
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
}
footer {
  background:#fff;
  padding:3.5rem 0;
}
@media screen and (max-width: 768px) {
  .right {
    float:none;
  }
  nav {
    padding: 0;
  }
  img.logo {
    max-width: 230px;
    margin: 0 auto 20px auto;
    width: auto;
  }
  .cart {
    text-align: center;
  }
}

.button-row {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;   /* allows wrap on mobile */
    margin: 20px 0;
}

.button-row .button {
    white-space: nowrap;
}

.button-row .button {
    padding: 10px 18px;
    border-radius: 30px;
    font-weight: 600;
}
.button-title {
    flex-basis: 100%;
    text-align: center;
    margin-bottom: 10px;
}



.mount-card {
    display: flex;
    flex-direction: column;
    align-items: center;   /* centers image and text */
    text-align: center;
}

.mount-card img {
	 width: 130px;
}

.header-text {
    text-align: center;
    max-width: 100%;
    margin: 0 auto;
}
#header-carousel .item img {
  border-radius: 12px;
  overflow: hidden;
}


.full-image{
    width:100%;
    margin:20px 0;
	text-align:center;
}

.full-image img{
    width:100%;
    height:auto;
    display:block;
	border-radius:8px;
	
}
.mode-card{
    padding:20px;
    text-align:center;

}

.mode-card img{
    width:100%;
    border-radius:8px;
    margin-bottom:10px;
}

.mode-btn {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  margin: 0 4px;
  border-radius: 50%;
  background: #f1f1f1;
  color: #555555;
  text-align: center;
  font-weight: bold;
  font-family: Arial, sans-serif;
  font-size: 1.5rem;
  border: 0.5px solid #000;
}

.circle-btn {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  margin: 0 4px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #000;
  text-align: center;
  font-weight: bold;
  font-family: Arial, sans-serif;
  font-size: 1.5rem;
  border: 0.5px solid #ccc;
}

.platform-block{
display:none;
margin-top:20px;
}

.platform-block img{
width:100%;
border-radius:8px;
}

.demo-content{
  position:relative;
  overflow:hidden;

}

.demo-slide{
  display:flex;
  gap:40px;
  align-items:center;
  width:100%;
  opacity:1;

  transition:
    transform 0.55s cubic-bezier(0.22,1,0.36,1),
    opacity 0.45s ease;
}
/* enter positions */

.pre-left{
  transform:translateX(-100%);
  opacity:0;
}

.pre-right{
  transform:translateX(100%);
  opacity:0;
}

/* fade states */

.fade-out{
    opacity:0;
  transform:scale(0.97);
}

.fade-in{
  opacity:1;
}
.demo-left img {
  width: 300px;
  border-radius: 10px;
}

.demo-right {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.demo-right h2 {
  margin: 0 0 10px;
  font-size: 30px;
  color: #FFFFF;
}

#demoText {
  font-size: 17px;
  color: #eee;
  line-height: 1.4;
}

/* Buttons */
.demo-nav {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.orangebtn, .greybtn {
  padding: 12px 20px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  cursor: pointer;
}

.orangebtn { background:#FF3114; color:white; margin-left: 15px;}
.greybtn   { background:#333;     color:#ccc; }

/* Icon helpers */
.icon-sm { width:22px; vertical-align:middle; margin-right:6px; }
.icon-md { width:36px; margin:5px; }
.highlight { color:#FF3114; font-weight:bold; }

/* Responsive */
@media (max-width: 800px) {
  .demo-content {
    flex-direction: column;
    text-align: center;
  }

  .demo-left img {
    width: 85%;
  }
}

.review-card{
background:#fff;
padding:30px;
border-radius:10px;
box-shadow:0 6px 18px rgba(0,0,0,0.15);
text-align:center;
max-width:700px;
margin:auto;
border: 0.5px solid #666;
}

.mode-card img{
  height:110px;
  object-fit:contain;
}

.line.margin {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to the next line */
}
.s-12.m-6.l-4 {
    flex: 0 0 33.3333%; /* Or appropriate flex values */
    width: auto; /* Override explicit width if flex is used */
    /* Remove float: left */
}

.full-img {
  transition: transform 0.25s ease, filter 0.25s ease;
}

.full-img:hover {
  transform: scale(0.96);
  filter: brightness(1.1);

}

.inline-btn {
  display: inline-block;
  padding: 2px 18px;
  margin: 0 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f0f0f0;
  font-family: monospace;
  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.2);
  font-weight: bold;
  color: #000;
  font-size: 1.2rem;
}

.icon-large {
    font-size: 48px;
    color: #FF3114;
    margin-bottom: 10px;
    display: block;
}

.mount-btn:hover .icon-large {
     transform: translateY(-10px);
    transition: transform 0.2s ease;
}

.mount-btn {
    display: flex;
    flex-direction: column;
    align-items: center;   /* horizontal centering */
    text-align: center;
}

/* Image sits slightly behind the button */
.mount-btn img {
    width: 130px;
    display: block;
    margin: 0 auto -30px auto;
    position: relative;
    z-index: 1;
    transition: transform 0.25s ease;
}

.mount-btn:hover img {
    transform: translateY(-30px);
}

/* Button sits on top */
.mount-btn button {
    position: relative;
    z-index: 2;
    padding: 12px 20px;
    border-radius: 30px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mount-btn:hover button {
    transform: translateY(-4px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.25);<br>
	
}

.feature-strip{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:40px;

}

.feature-img{
  flex:1;
  text-align:center;
}

.feature-img img{
  width:100%;
  max-width:300px;
  border-radius:10px;
}

.feature-text{
  flex:1.5;
  text-align:center;
}

.feature-text h2{
  margin-bottom:10px;
}

.feature-text p{
  font-size:1.1rem;
  line-height:1.5;
}

/* Mobile layout */

@media (max-width:800px){

  .feature-strip{
    flex-direction:column;
    text-align:center;
  }

  .feature-img img{
    max-width:220px;
  }

}

#features-as3{
display:none;
}

.single-slide{
text-align:center;
transition:opacity 0.25s ease;
}

.singleImage{
  width:80%;
  border-radius:10px;
  margin:0 auto 20px auto;
  display:block;
}

.singleText{
max-width:800px;
margin:auto;
}

.slider-buttons{
  display:flex;
  justify-content:space-between;
  margin-top:20px;
}

.singleImage[src=""]{
display:none;
}

.tab-content{
  display:none;
  opacity:0;
  transform:translateY(10px);
  transition:all 0.35s ease;
}

.tab-content.active{
  display:block;
  opacity:1;
  transform:translateY(0);
}

/* optional button highlight */


.tab-btn{
  background:#888;      /* grey button */
  color:#fff;           /* white text */
  transition:all 0.25s ease;
}

.tab-btn.active{
  background:#FF3114;   /* ScopeBits orange */
  color:#fff;           /* keep white text */
}

.tab-btn:not(.active){
  background:#888;
  color:#fff;
}

.tab-content img:nth-of-type(2){
  opacity:0;
  transform:translateY(-15px);
}

/* animate when tab becomes active */

.tab-content.active img:nth-of-type(2){
  animation:fadeDown 0.7s ease forwards;
  animation-delay:0.2s;
}

@keyframes fadeDown{
  from{
    opacity:0;
    transform:translateY(-15px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.form {
  max-width: 900px;
  margin: auto;
  padding: 30px;
  background: #f7f7f7;
  border-radius: 12px;
}

.form h2 {
  margin-bottom: 10px;
}

.form p {
  margin-bottom: 25px;
  color: #666;
}

.form-group {
  margin-bottom: 18px;
}

.form-control {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  border-radius: 8px;
  border: 1px solid #ddd;
  transition: all 0.2s ease;
}

.form-control:focus {
  outline: none;
  border-color: #FF3114;
  box-shadow: 0 0 0 2px rgba(255,49,20,0.15);
}

textarea.form-control {
  min-height: 140px;
  resize: vertical;
}

button#submit {
  width: 100%;
  padding: 14px;
  background: #FF3114;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

button#submit:hover {
  background: #d92810;
}

.alert-msg {
  margin-top: 15px;
  font-size: 14px;
}

  .bg-black-50 {
  background-color: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(2px);
 }
   .rounded-medium {
  border-radius: 3rem;
}
:root{
  --bg:#111111; 
  --panel:#000000; 
  --muted:#FFFFFF; 
  --text:#FFFFFF;
  --line:#FF3114; 
  --accent:#ff6a00;   /* bright orange */
  --accent2:#ff2b2b;  /* red/orange */
}
  .sb-btn{appearance:none;border:1px solid var(--line);background:#490900;color:var(--text);
    padding:.8rem 1rem;border-radius:12px;font-weight:700;cursor:pointer}
  .sb-btn:hover{border-color:#ff2b2b}
  .sb-btn.sb-primary{background:linear-gradient(90deg,var(--accent),var(--accent2));border:none;color:#FFFFFF}
  .sb-btn.sb-ghost{background:transparent}
  .sb-overlay{position:fixed;inset:0;background:rgba(4,8,13,.66);display:none;place-items:center;padding:16px;z-index:1000}
  .sb-overlay[aria-hidden="false"]{display:grid}
  .sb-modal{background: rgba(0, 0, 0, 0.7);color:var(--text);width:min(760px,92vw);border-radius:18px; 
    box-shadow:0 20px 60px rgba(0,0,0,.45);padding:20px 18px 18px;position:relative}
  .sb-close{position:absolute;top:10px;right:10px;border:none;background:transparent;color:var(--muted);
    font-size:20px;cursor:pointer;padding:8px;border-radius:10px}
  .sb-close:hover{background:#FF3114}
  .sb-head h2{margin:.2rem 0 .2rem;font-size:1.35rem; color:#FFFFFF }
  .sb-muted{color:var(--muted);margin:.1rem 0 .6rem}
  .sb-progress{height:8px;border-radius:999px;overflow:hidden;margin:.4rem 0 1rem}
  .sb-progress>div{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .3s}
  .sb-step .qtitle{font-weight:800;margin:8px 0 12px}
  .sb-options{display:grid;gap:10px}
  @media(min-width:560px){.sb-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
  .sb-opt{display:flex;gap:10px;align-items:flex-start;background:#170300;border:1px solid var(--line);
    border-radius:14px;padding:14px;cursor:pointer;transition:transform .06s,border-color .2s}
  .sb-opt:hover{border-color:#FF9914}
  .sb-opt input{margin-top:2px;accent-color:var(--accent)}
  .sb-opt .l{font-weight:700}
  .sb-opt .s{font-size:.9rem;color:var(--muted)}
  .sb-error{color:#FFFFFF;margin-top:10px}
  .sb-nav{display:flex;justify-content:space-between;align-items:center;margin-top:16px;gap:10px}
  .sb-nav-right{display:flex;gap:10px}
  .sb-footnote{margin-top:8px;color:var(--muted);font-size:.9rem}
  /* Launch button vibe */
  }
  
.accordion-item{
  border-bottom:1px solid #ddd;
}

.accordion-header{
  width:100%;
  text-align:left;
  padding:16px;
  font-size:20px;
  font-weight:600;
  background:#f5f5f5;
  border:none;
  cursor:pointer;
  transition:all 0.25s ease;
}

.accordion-header:hover{
  background:#e9e9e9;
}
.accordion-body{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.35s ease;
  padding:0 16px;
}

.accordion-header::after{
  content:"?";
  float:right;
  transition:transform 0.3s;
  
}


.accordion-content{
  padding:16px;
}


.accordion-item.active .accordion-body{
  padding:16px;
}

.accordion-item.active .accordion-header{
  background:#FFFFFF;
  color:#FF3114;
}

.accordion-header::after{
  content:"?";
  float:right;
  transition:transform 0.3s;
}

.accordion-item.active .accordion-header::after{
  transform:scale(1.5);
}

.about-story{
  line-height:1.7;
  font-size:17px;
}

.about-img-left{
  float:left;
  width:280px;
  margin:0 25px 20px 0;
  border-radius:10px;
  box-shadow:0 8px 18px rgba(0,0,0,0.15);
}

.about-img-right{
  float:right;
  width:240px;
  margin:10px 0 20px 25px;
  border-radius:10px;
  box-shadow:0 8px 18px rgba(0,0,0,0.15);
}

.about-img-left-small{
  float:left;
  width:220px;
  margin:10px 25px 20px 0;
  border-radius:10px;
  box-shadow:0 8px 18px rgba(0,0,0,0.15);
}

.about-points{
  padding-left:30px;
  padding-right:30px;
}

.cta-img:hover {
filter: brightness(1.1);
  cursor: pointer;
}

/* Button styles - already working */
:root {
  --esp-tools-button-color: #FF3114;
  --esp-tools-button-text-color: #ffffff;
  --esp-tools-button-border-radius: 6px;
}


.brace {
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin: 20px 0;
}

/* fixed ends */
.brace-left,
.brace-right {
  width: 31px;
  height: 45px;
  background-size: contain;
  background-repeat: no-repeat;
}

.brace-left {
  background-image: url("../img/curve_left.png");
}

.brace-right {
  background-image: url("../img/curve_right.png");
}

/* arrow (fixed size) */
.brace-arrow {
  width: 31px;
  height: 45px;
  background: url("../img/curve_arrow.png") no-repeat center;
  background-size: contain;
  flex-shrink: 0;
}

/* mid sections (split evenly) */
.brace-mid {
  flex: 1;
  height: 45px;
  background-image: url("../img/curve_mid.png");
  background-repeat: repeat-x;
  background-size: auto 100%;
}

.button-group {
  display: inline-block;   /* ?? shrink to content width */
  text-align: center;
}

/* FULL SCREEN OVERLAY */
#platformOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: rgba(0, 0, 0, 0.65); /* grey out background */
  backdrop-filter: blur(4px);      /* optional nice blur */

  display: none; /* hidden by default */
  align-items: center;
  justify-content: center;

  z-index: 9999;
}

/* MODAL BOX */
.platform-modal {
  background: #ffffff;
  padding: 30px;
  border-radius: 14px;

  max-width: 1000px;
  width: 90%;

  text-align: center;

  box-shadow: 0 20px 60px rgba(0,0,0,0.4);

  animation: fadeInUp 0.4s ease;
}

/* Optional animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#message {
    text-align: center;
}

#message .form-message {
    font-size: 28px;   /* similar to h2 */
    font-weight: 600;
    margin-top: 15px;
}

h1,h2,h3,h4,h5,h6 {
  color:#111111;
  font-weight: normal;
  line-height: 1.3;
  margin:0.5rem 0;  
}

/* DEMO OVERLAY */
.demo-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  display: none;
  z-index: 9999;
}

/* highlighted slider */
.demoSlider.active,
#patchSlider.active {
  position: relative;
  z-index: 10000;
  background: white;
  border-radius: 8px;
  box-shadow: 0 25px 80px rgba(0,0,0,0.45);
  padding: 20px;
}


@media (max-width: 768px) {
  .demo-left {
    display: none;
  }
}

h1 {font-size:2.7rem;} h2 {font-size:2.2rem;} h3 {font-size:1.8rem;} h4 {font-size:1.4rem;} h5 {font-size:1.1rem;} h6 {font-size:0.9rem;}


/* Small phones */
@media (max-width: 768px) {

  h1 {font-size:1.5rem;}
  h2 {font-size:1.35rem;}  
  h3 {font-size:1.2rem;}  
  h4 {font-size:1.05rem;}  
  h5 {font-size:0.95rem;}  
  h6 {font-size:0.8rem;}
  }
  
  @media (max-width: 768px) {

.demoTitle {font-size:1.6rem;}

.demoText h1 {font-size:1.5rem;}
.demoText h2 {font-size:1.3rem;}
.demoText h3 {font-size:1.15rem;}
.demoText h4 {font-size:1.05rem;}
.demoText h5 {font-size:0.95rem;}
.demoText h6 {font-size:0.8rem;}
}