/*=================  NORMAL‑PAGE PATCH  =================*/

html { scroll-behavior: smooth; }   /* modern browsers, zero JS */
/* 1 – let the page scroll normally */
html, body{
  overflow-x:hidden;
  overflow-y:auto !important;
}

/* 2 – turn each slide into a plain section */
.slide,
.slide.before,
.slide.after,
.slide.selected,
.slide.active{
  position:static !important;
  display:block  !important;
  width:100%    !important;
  height:auto   !important;
  min-height:auto !important;
  transform:none !important;   /* kills translateY(50%), scale(.8)… */
  z-index:auto  !important; 
  /* DON'T touch opacity / visibility – animations need them   */
}

/* wrappers must flow too */
.content,
.container,
.container .wrap{
  position:static !important;
  display:block  !important;
  width:100%     !important;
  height:auto    !important;
  overflow:visible !important;
  display: grid;
  place-items: center; /* shorthand for both justify- and align-items */
}

/* 3 – fixed top navbar, visible & clickable */
.panel{
  position:fixed !important;
  top:0; left:0; width:100%;
  padding:10px 30px;
  background:#fff !important; 
  color:#202020;
  pointer-events:auto !important;
  opacity:1 !important;
  transform:none !important;
  z-index:1000;
}
/* body{ padding-top:70px; } */        /* push content below bar */

/* 4 – sidebar off‑canvas until .sidebarShown is set */

 .sidebar{
  transform:translateX(100%) !important;
  transition:transform .35s ease;
}
body.sidebarShown .sidebar{
  transform:translateX(0) !important;
}

/* (optional) global colour scheme – uncomment for a light site */
/*
body, .slides{ background:#fff !important; color:#202020 !important; }
*/

/* lock the viewport height so resize doesn’t reset scroll */ 
html,
body {
  min-height: 100% !important;
}

.pad{
  border-radius: 3ch;
}


/* Contact Form */

.contact-form {
  background: #fff;
  width: 100%;
  max-width: 400px;
  padding: 2rem;
  border-radius: 3ch;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.contact-form h2 {
  margin-bottom: 1.5rem;
  color: #333;
  text-align: center;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #555;
  font-size: 0.9rem;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 2rem;
  font-size: 1rem;
  resize: vertical;
  font-family: 'Inter', sans-serif;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #6c63ff;
  box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.2);
}

.submit-btn {
  width: 100%;
  padding: 1rem;
  border: none;
  border-radius: 2rem;
  background-color: #6c63ff;
  color: white;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
}

.submit-btn:hover {
  background-color: #5850d8;
}


.sampleOverlay {
  position: relative;
  background-color: rgba(255, 255, 255, 1.0);
  backdrop-filter: blur(10px);
  border-radius: 3ch;
  width: 90%;

}

.samplePadWrapper{
  z-index: 1; 
  width:80%;

}

.samplePad{
  padding:20px;
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(5px);
  border-radius: 2ch;
  /* box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.1); */

}

.samplePadImage{
  height:60px;
}




.inlineImageContainer{
  position: relative;
  border-radius: 3ch;
  overflow: hidden;
  width: 100%;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inlineTextContainer{
  position: relative;
  border-radius: 3ch;
  overflow: hidden;
  width: 100%;
  /* height: 220px; */
  display: flex;
  align-items: center;
  /* justify-content: center; */
  padding:1ch;
  /* border:1px solid #ddd; */
}

.securityImage{
  height:80px;
  width:80px;
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 20px;
}


@media screen and (max-width: 1024px) {
  .samplePadWrapper {
    position: absolute;  
    top: 25px; 
  }

  .samplePadImage{
    display:none;
  }

  .securityImage{
    height:40px;
    width:40px;
  }
  
}

.container {
  display: table;
  table-layout: fixed;
  position: relative;

}

  .container .wrap {
      display: table-cell;
      vertical-align: middle;
      overflow: hidden;
  }

      .container .wrap .spaceWrap,
      .container .wrap.spaceWrap,
      .container .wrap:not(.noSpaces) {
          padding: 80px calc(8% + 15px);
      }

      .container .wrap * {
          -webkit-user-select: text;
          -moz-user-select: text;
          -ms-user-select: text;
          user-select: text;
      }


@media screen and (max-width: 1024px) {
  .container .wrap {
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
}

    .container .wrap .spaceWrap,
    .container .wrap.spaceWrap,
    .container .wrap:not(.noSpaces) {
        padding: 70px calc(8% + 15px) 20px;
    }

    .container .wrap * {
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        user-select: text;
    }
}

.flex{
  display: flex;
  align-items: center;
}

.hero{
  padding-top:60px;
}

@media screen and (max-width: 1024px) {
  .hero{
    padding-top:0px;
  }
  p{
    line-height: normal;
  }
}

/* This inner wrapper does the 10px-on-each-side cropping */
.videoCropper {
  position: absolute;
  top: 10px;
  left: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  overflow: hidden;  /* hide the extra video edges */
}

.lightGreySlide{
  background-color: rgb(245 246 246)!important;
}

#mimer-chat {

  /* 🔥 cross‑fade */
  opacity: 1;                        /* fully visible by default */
  transition:
    opacity   0.35s ease,
    visibility 0s linear 0s;         /* visibility is instant */
}

/* When JS flips style.visibility to hidden → fade out */
#mimer-chat[style*="visibility: hidden"] {
  opacity: 0;
  /* delay the actual hiding until the fade finishes */
  transition:
    opacity   0.35s ease,
    visibility 0s linear 0.35s;
}


.panel.top.transparent {
  top: 0;
  /* bottom (0 %) is 0.8 opacity → top (100 %) is full opacity */
  background: linear-gradient(
      to top,
      rgba(255, 255, 255, 0.7) 0%,
      rgba(255, 255, 255, 1) 100%
  ) !important;

  /* if you want a solid‑color fallback for very old browsers, keep the next line above the gradient */
  /* background-color: rgba(255, 255, 255, 0.8); */

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari/WebKit */
}


.pill_text {
  display: inline-block;        /* shrink-wrap to the text */
  padding: 0.5em 1em;           /* vertical and horizontal space */
  border: 2px solid #2ade2a;    /* border color */
  border-radius: 999px;         /* fully rounded ends */
  color: #2ade2a;               /* text color matches border */
  text-align: center;           /* center text if the pill grows */
  /* font-family: sans-serif;      pick your favorite font */
  text-decoration: none;        /* if you apply it to links later */
}

/* 1) Flex container to put both on one line */
.header-wrapper {
  display: flex;
  align-items: center;     /* vertically center the text */
  gap: 1rem;               /* space between them */
  /* optional: remove any default top/bottom margin
      so your utility classes don’t add extra whitespace */
  margin-top: 0;
  margin-bottom: 0;
}

/* 2) If you still want your utility classes for spacing, you can override them here */
.header-wrapper h1 {
  margin-top: 0;
  margin-bottom: 0;
}


/*     .img-wrapper {
  perspective: 800px;
  width: 100%;           
}


.img-wrapper img {
  display: block;
  width: 100%;
  transform-origin: center bottom;
  transform: rotateX(45deg);
  will-change: transform;
} */

    /* Center and give the container perspective */
    .img-container {
      width: 100%;
      margin: 0 auto;
      margin-top: 0px;   /* start reveal when you hit mid-page */
      perspective: 1000px; /* how “deep” the 3D feels */
    }

    .img-container img {
      display: block;
      width: 100%;
      transform-origin: top center;
      /* Initial state: nearly flat and pulled back */
      transform: 
        translateZ(-300px) 
        rotateX(80deg);
      will-change: transform;
    }