body {
  font-family: 'Schibsted Grotesk';
}

a {
  text-decoration: none;
}

.iti input.empset-input input {
  outline: none important;
  font-size: 16px
}

.is-hidden {
  display: none !important;
}

form {
  outline: none important
}


@font-face {
  font-family: 'empire';
  src: url('../fonts/empire.eot');
  src: url('../fonts/empire.eot?#iefix') format('embedded-opentype'),
    url('../fonts/empire.woff') format('woff'),
    url('../fonts/empire.ttf') format('truetype'),
    url('../fonts/empire.svg#Cocoa') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class*='icon-']:before {
  display: inline-block;
  font-family: 'empire';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}




.icon-ggg:before {
  content: '\0045';
}

.font-empire {
  font-family: 'empire !important'
}

#preloader {
  background: #fff;
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 1200;
  overflow: hidden;
}

img.animate__animated.animate__slideInUp {
  animation-delay: 6.5s
}



#preloader h1 {
  cursor: default;
  color: white;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  margin: 0 auto;
  width: 400px;
  left: 0px;
  right: 0px;
  margin-top: 40vh;
  margin-bottom: 0px;
  text-align: center;
  animation-name: loader_line;
  animation-duration: 7s;
  animation-fill-mode: forwards;
  background-color: rgba(0, 0, 0, 0.1);
  background-image: -webkit-linear-gradient(left, #000 0, #000 50%, transparent 50%);
  background-position: 100% 0;
  background-size: 200% 200%;
  color: transparent;
  -webkit-background-clip: text;
}

#preloader_line {
  display: block;
  height: 1px;
  width: 250px;
  margin: 0 auto;
  animation-name: loader_line;
  animation-duration: 7s;
  background: linear-gradient(to left, #ffffff 50%, #ff0043 50%) 0 0/200% 100% #ffffff;
}

/* preloader_line animation */
@keyframes loader_line {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: 0% 0;
  }
}



.subf {
  line-height: 1.3;
  width: 80%;
  padding: 6px;
  font-size: 18px;
}



.homeempr-container {
  display: flex;
  gap: 10px;
  width: 71%;
  margin: 0 auto;
  font-family: 'Schibsted Grotesk';
}

.homeempr-box {
  flex: 1;
  font-family: 'Schibsted Grotesk';

  border-radius: 8px;
}

/* Stack vertically on mobile */
@media (max-width: 768px) {
  .homeempr-container {
    flex-direction: column;
  }
}

.magila {
  width: 75% !important;
  margin: 0 auto !important;
  margin-top: 1.5em !important;
}

/* Minimal toast styling (centered) */
#otpToast {
  position: fixed;
  top: 20px;
  /* Distance from top */
  left: 50%;
  /* Move to middle horizontally */
  transform: translateX(-50%);
  z-index: 9999;
  background: #111;
  color: #fff;

  border-radius: 10px;
  font: 600 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

#otpToast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


#otpToast::before {
  content: "OTP sent";
  pointer-events: auto;
  background: #111;
  color: #fff;
  padding: 12px 18px;
  border-radius: 10px;
  font: 600 14px/1.2 system-ui, 'Schibsted Grotesk', Segoe UI, Roboto, Arial, sans-serif;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  opacity: 0;
  transform: scale(.96);
  transition: opacity .18s ease, transform .18s ease;
}

#otpToast.show {
  display: grid;
}

#otpToast.show::before {
  opacity: 1;
  transform: scale(1);
}

/* Optional: keep your input focus clean */
.empset-input:focus {
  outline: none;
  box-shadow: none;
}


.phone-input-group {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  /* match your .empset-input border */
  border-radius: 6px;
  background: #f7f7f7;
  /* match your form bg */
  overflow: hidden;
}

.dial-code {
  padding: 0 10px;
  font-size: 16px font-weight: 500;

  .phone-input-group input.empset-input:focus {
    background-color: transparent;
    /* or your desired bg */
    box-shadow: none;
    outline: none;
  }


  .empset-input:focus {
    background-color: transparent;
    /* or white */
    outline: none;
    box-shadow: none;
  }




  border-right: 1px solid #ccc;
  display: flex;
  align-items: center;
}

.phone-input-group input.empset-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px;
  outline: none;
}

/* --- tiny additions for the flag so it flows inline --- */
.phone-input-group #flag-slot {
  display: flex;
  align-items: center;
}

.phone-input-group .iti__flag-container {
  position: static !important;
}

/* remove absolute positioning */
.phone-input-group .iti {
  width: auto;
}

/* let the wrapper shrink to the flag */
.phone-input-group .iti__selected-flag {
  padding: 0 8px;
}

/* spacing */



.iti input.empset-input {
  padding-left: 48px !important;
  /* adjust if dial code area is wider */
}

.empset-input input {
  outline: none important
}

/* wrap container for positioning the icon */
.select-wrap {
  position: relative;
}

/* hide native arrows without changing your input styles */
.select-wrap>select.empset-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  padding-right: 2.25rem;
  /* room for the icon; width/layout unchanged */
}

/* hide arrow in old Edge/IE */
.select-wrap>select.empset-input::-ms-expand {
  display: none;
}

/* icon itself */
.select-wrap>.select-icon {
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  line-height: 1;
  font-size: 1rem;
  color: inherit;
  /* inherit your existing text color */
}

/* dim icon when the select is disabled */
.select-wrap>select.empset-input:disabled+.select-icon {
  opacity: .5;
}


.badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  border: 1px solid transparent
}

.badge .dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%
}

.badge-approved {
  background: #e6f8ec;
  color: #0b6b2b;
  border-color: #bde5c8
}

.badge-approved .dot {
  background: #27ae60
}

.badge-declined {
  background: #fdecec;
  color: #b42318;
  border-color: #f5c2c0
}

.badge-declined .dot {
  background: #e03131
}

.ggu {
  margin: 0 auto;
  max-width: 1100px;
  padding: 10px;
}


.empname {
  font-size: 19px !important;
  color: #000;
  font-weight: 700 !important;
  text-transform: capitalize;

  top: 12px !important;
  position: relative !important;
}

.empav {
  background-image: url(https://res.cloudinary.com/dih0krdcj/image/upload/v1755629072/Empire_Distribution_idfwwp2ezb_1_kipjbm.webp) !important;
  background-size: 50% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: antiquewhite !important;
}

.empset-container {
  width: 400px;
  margin: 10px auto;
  padding: 20px;
  font-family: 'Schibsted Grotesk';
  border: 1px solid #ddd;
  border-radius: 8px;


}

.empset-title {
  font-size: 20px;
  margin-bottom: 20px;
  text-align: center;
}

.empset-field {
  margin-bottom: 15px;
}

.empset-label {
  display: block;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 10px;
}



.empset-input {
  width: 100%;
  font-size: 16px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: 'Schibsted Grotesk';
  background: #f3f3f3;
}

.empset-input:disabled {
  background: #e9e9e9;
  color: #555;
}

.empset-button {
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: 15px;
  border: none;
  font-weight: 600;
  border-radius: 4px;
  background: #000;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.empset-button:hover {
  background: #0056b3;
}


/* Toast Styles */
.empset-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #000000;
  color: white;
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 16px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1000;
}

.empset-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* Hide unrevealed cards */
.empafr-card.is-hidden {
  display: none;
}

/* Smooth reveal animation */
.empafr-card.fade-in {
  animation: empafrFadeUp 320ms ease-out both;
}

@keyframes empafrFadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Give sentinel some height so it’s reachable */
#empafrSentinel {
  height: 1px;
}


/* Top-center toast, hardened against global CSS collisions */
.emp-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);

  display: inline-flex;
  /* keeps it sized to content */
  align-items: center;
  justify-content: center;

  width: auto !important;
  /* override any global width */
  height: auto !important;
  /* override any global height */
  aspect-ratio: auto !important;
  /* cancel any forced square/circle */
  max-width: min(90vw, 560px);
  min-height: 36px;
  padding: 10px 16px;
  white-space: nowrap;

  background: #111;
  color: #fff;
  font-weight: 600;
  border-radius: 5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);

  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 99999;
}

.emp-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


.memb {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  opacity: .7;
  letter-spacing: 2px;
  margin-bottom: 1em
}

.emprof-popup {
  display: none;
  /* hidden by default */
  position: fixed;
  padding: 10px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-family: 'Schibsted Grotesk' !important;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  backdrop-filter: blur(2px);
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Card styling */
.emprof-card {
  background: white;
  padding: 40px;
  font-family: 'Schibsted Grotesk' !important;
  border-radius: 6px;
  width: 400px;
  padding-top: 30px !important;


  font-family: 'Schibsted Grotesk' !important;
}



.emprof-card p {
  line-height: 1.6;
}


.emprof-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  justify-content: flex-start;
  margin-top: 1.5rem;
}

/* Circular icon buttons */
.emprof-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-size: 20px;
  transition: transform .08s ease;
  background: #f3f4f6;
}

.emprof-icon-btn:hover {
  transform: translateY(-1px);
}

.emprof-icon-btn.approve {
  background: #eaf7ef;
}

.emprof-icon-btn.approve .mdi {
  color: #169c4b;
}

.emprof-icon-btn.decline {
  background: #fdecec;
}

.emprof-icon-btn.decline .mdi {
  color: #c62828;
}

/* Toast styling */
.emprof-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #111;
  color: #fff;
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
  z-index: 9999;
  font-size: 14px;
}

.emprof-toast.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

button.empafr-btn.emprof-jj {
  border: none;
  padding: 0px;
  letter-spacing: 1px;
  font-weight: 900 !important;
  font-family: 'Poppins' !important;
  background: #000;
}

/* Close button */
.emprof-close-btn {
  float: right;
  padding: 0px;
  /* <- clickable area */
  margin-top: -4px;
  border: none;
  border-radius: 6px;
  background: none;
  font-size: 20px;
  color: black;
  cursor: pointer;
  z-index: 9999;
}

.emprof-close-btn:hover {
  opacity: .7
}

/* JJ Button style */
.emprof-jj .emprof-jj-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #000;
  color: white;

  font-size: 20px;
}

.wrapper {
  display: flex;
  gap: 18rem;
  align-items: flex-start;
  width: 70%;
  margin: 0 auto;
}

.intro {
  flex: 1;
  /* smaller column */
}

.magila {
  flex: 2;
  /* larger column */
  margin: 0;
  /* remove the auto-centering */
}


:root {
  --empri-bg: #0b1022;
  --empri-surface: rgba(255, 255, 255, 0.04);
  --empri-accent: #6366f1;
  --empri-muted: #cbd5e1;
  --empri-text: #e5e7eb;
  --empri-border: rgba(255, 255, 255, 0.08);

}


.empri-wrap {
  max-width: 720px;
  margin: 48px auto;
  padding: 0 20px;
}

.empri-tabs {
  display: flex;
  gap: 8px;
  padding: 6px;
  font-family: 'Schibsted Grotesk';
  background: var(--empri-surface);
  border: 1px solid var(--empri-border);
  border-radius: 16px;
  backdrop-filter: blur(8px);
}

.empri-tab {
  appearance: none;
  border: none;
  background: transparent;
  color: #000;
  padding: 10px 14px;
  font-family: 'Schibsted Grotesk';
  border-radius: 12px;
  font-weight: 500;
  opacity: .6;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.05s ease;
  outline: none;
}

.empri-tab:hover {
  color: #000;

}

.empri-tab:active {
  transform: translateY(1px);
}

.empri-tab[aria-selected="true"] {
  color: #000000;
  font-size: 18px;
  font-weight: 700;
  opacity: 1;
}

.empri-tab:focus-visible {
  outline: 2px solid var(--empri-accent);
  outline-offset: 2px;
}

.empri-panels {

  background: var(--empri-surface);
  border: 1px solid var(--empri-border);
  border-radius: 16px;
  box-shadow: var(--empri-shadow);
}

.empri-panel {
  display: none;
  padding: 5px;
  min-height: 120px;
  font-size: 18px;
}

.empri-panel.empri-panel-active {
  display: block;
}

.empri-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}



.empprog-dialog {
  border: 1px solid #c0c0c0;
  border-radius: 12px;
  padding: 16px;
  max-width: 520px;
  width: 92vw;
  padding-bottom: 2em;
  padding-right: 36px;


}

/* Remove bullets, reset counter, tidy spacing */
.empprog-next-list {
  list-style: none;
  margin: 0 0 4px 0 !important;
  /* overrides earlier inline margin if present */
  padding: 0;
  display: grid;
  gap: 8px;
  padding-left: 4px !important;
  counter-reset: empprog-step;
}

/* Each item gets space for the circle */
.empprog-next-item {
  counter-increment: empprog-step;
  position: relative;
  font-weight: 500;
  padding-left: 46px;
  /* room for the circle */
  line-height: 1.4;
  padding-top: 4px;
}


.empprog-percent {
  min-width: 0ch;
  text-align: right;
  float: right;
  padding-bottom: 1em;
  padding-top: 11px;

}

.empprog-progress-row {
  align-items: center;
  width: 95%;
  margin: 0 auto;
  display: none;
  padding-left: 10px;
}


input#fileNameInput {
  padding: 10px 12px;
  border: 1px solid #c0c0c0;
  border-radius: 10px;
  font-size: .98rem;
  font-weight: 400;
  outline: none;
}



.empprog-label {
  display: grid;
  gap: 6px;
  padding-left: 15px;
  padding-top: 0px;
  padding-bottom: 10px;
}


.empprog-next-subtitle {
  margin: 0;
  font-size: .9rem;
  color: #656161;
  font-weight: 500;
  padding-top: 1em;
}


.empprog-next-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  padding-bottom: .7em;
  padding-top: 0px;
  line-height: .8;

}

.gotit {
  padding: 8px 12px;
  border-radius: 24px;
  background: #000000;
  cursor: pointer;
  font-weight: 600;
  color: #ffffff;
  border: none;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  width: 76px;
}

h2#empprogNextTitle {
  padding-left: 12px;
}

/* The black numbered circle */
.empprog-next-item::before {
  content: counter(empprog-step);
  position: absolute;
  left: 10px;
  top: 0.49em;
  /* aligns nicely with first line */
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  display: grid;
  place-items: center;
}



.empprog-toast {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
  background: #000;

  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  z-index: 2147483646;
  /* helps when no dialog is open */
}

.empprog-toast.empprog-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .empprog-toast {
    transition: none;
  }
}




/* Base: thin height, no border, custom track/value */
.empprog-progress {
  width: 100%;
  height: 2px;
  /* <-- adjust to taste */
  border: none;
  /* remove UA border */
  box-shadow: none;
  background: #2568f6;
  /* track color (Firefox uses this) */
  border-radius: 9999px;
  overflow: hidden;
  /* ensures rounded ends */
  appearance: none;
  -webkit-appearance: none;
}

/* Chrome/Safari/Edge (WebKit/Blink) */
.empprog-progress::-webkit-progress-bar {
  background: #e5e7eb;
  /* track */
  border-radius: 9999px;
}

.empprog-progress::-webkit-progress-value {
  background: #60a5fa;
  /* filled portion */
  border-radius: 9999px;
  /* rounded ends while filling */
}

/* Firefox */
.empprog-progress::-moz-progress-bar {
  background: #60a5fa;
  /* filled portion */
  border-radius: 9999px;
}

/* Optional: let browsers that support it pick the fill color */
.empprog-progress {
  accent-color: #60a5fa;
}



.empt {
  background: #000;
  width: 90px;
  height: 37px;
  padding: 8px;
  font-weight: 300;
  border-radius: 25px;
  -webkit-font-smoothing: antialiased;
  color: #fff !important;
  text-align: center;
}


.empt-alt {
  background: #000;
  width: 100px;
  height: 37px;
  padding: 8px;
  font-weight: 300;
  border-radius: 25px;
  -webkit-font-smoothing: antialiased;
  color: #fff !important;
  text-align: center;
}


/* Upload button (label for hidden file input) */
.btn {
  --ring: rgba(34, 211, 238, .35);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  top: 15px;
  position: relative;
  padding: 10px 14px;
  border-radius: 999px;

  background: #ffffff;
  color: var(--text);
  border: 1px solid #0d4b6f;
  cursor: pointer;
  transition: transform .08s ease, background .2s ease, border-color .2s ease, box-shadow .15s ease;
  user-select: none;
  outline: none;
}

.btn:hover {
  background: rgba(34, 211, 238, .16);
}

.btn:active {
  transform: translateY(1px) scale(.99);
}

.btn:focus-visible {
  box-shadow: 0 0 0 6px var(--ring);
}

.btn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}


input#fileNameInput {
  font-family: 'Schibsted Grotesk' !important;
}

/* Hide the real file input */
#uploader {
  position: absolute;
  width: 1px;
  height: 1px;
  font-family: 'Schibsted Grotesk' !important;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Dialog styling */
dialog::backdrop {
  background: rgba(2, 6, 23, .6);
  /* slate-950 */
  backdrop-filter: blur(2px);
}

dialog {
  width: min(520px, 92vw);
  border: 1px solid var(--border);
  background: #fff;
  color: #000;
  font-weight: 600;
  border-radius: 14px;
  font-family: 'Schibsted Grotesk' !important;

  padding: 16px;
  box-shadow: var(--shadow);
}

.dialog-head {
  display: flex;
  align-items: center;
  font-family: 'Schibsted Grotesk', "Segoe UI", Roboto, "Helvetica Neue", Arial;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 6px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
}

.dialog-title {
  margin: 0;
  font-size: 1.05rem;
  font-family: 'Schibsted Grotesk', "Segoe UI", Roboto, "Helvetica Neue", Arial;
  letter-spacing: .2px;
}

.dialog-body {
  padding: 14px 6px 6px;
  display: grid;
  gap: 8px;
  font-family: 'Schibsted Grotesk', "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.field {
  display: grid;
  font-family: 'Schibsted Grotesk', "Segoe UI", Roboto, "Helvetica Neue", Arial;
  gap: 6px;
}

.field label {
  font-size: .9rem;
  color: var(--muted);
}

.input {
  padding: 10px 12px;
  font-family: 'Schibsted Grotesk', "Segoe UI", Roboto, "Helvetica Neue", Arial;

  border-radius: 10px;
  background: #f9f9f9;
  border: 1px solid rgba(148, 163, 184, .16);
  color: var(--text);
  outline: none !important;
  font-size: .98rem;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 6px 4px;
}

.btn-secondary,
.btn-primary {
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(148, 163, 184, .08);
  color: var(--text);
  transition: background .2s ease, transform .08s ease;
}

.btn-secondary:hover {
  background: rgba(148, 163, 184, .12);
}

.btn-primary {
  background: rgba(34, 211, 238, .18);
  border-color: rgba(34, 211, 238, .3);
}

.btn-primary:hover {
  background: rgba(34, 211, 238, .24);
}

.btn-secondary:active,
.btn-primary:active {
  transform: translateY(1px);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}




/* ====== Profile Card Styles ====== */
:root {
  --pc-bg: #fff;
  --pc-text: #0c0b17;
  /* near-black like screenshot */
  --pc-muted: #6b7080;
  /* location text */
  --pc-border: #e8eaef;
  --pc-solid: #0c0b17;
  --pc-solid-text: #fff;
  --pc-outline-bg: #fff;
  --pc-outline-text: #0c0b17;
  --pc-outline-ring: #e8eaef;
  --pc-radius: 20px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --pc-bg: #0f1116;
    --pc-text: #f6f7fb;
    --pc-muted: #b7bdc9;
    --pc-border: #2a2f3a;
    --pc-solid: #0c0b17;
    /* keep solid near-black for contrast */
    --pc-outline-bg: #12141b;
    --pc-outline-text: #f6f7fb;
    --pc-outline-ring: #2a2f3a;
  }
}

* {
  box-sizing: border-box;
}

:root {
  --card-radius: 12px;
  --card-pad: clamp(12px, 3.5vw, 70px);
  --gap: clamp(12px, 2.8vw, 20px);
  --text: #0b1220;
  --muted: #6b7280;
  --bd: #e5e7eb;

  --btn-bg: #e0f2fe;
  --btn-bd: #bae6fd;
  --btn-fg: #0c4a6e;
}

* {
  box-sizing: border-box;
}

.profile-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "avatar main actions";
  align-items: center;
  gap: var(--gap);
  font-family: 'Schibsted Grotesk' !important;
  width: min(100%, 1085px);
  margin-inline: auto;
  color: var(--text);

  padding: var(--card-pad);
  border: 1px solid var(--bd);
  border-radius: var(--card-radius);
  background: #fff;
}

/* Avatar */
.pc-avatar {
  grid-area: avatar;
  width: clamp(56px, 9vw, 92px);
  aspect-ratio: 1/1;
  border-radius: 50%;
  object-fit: cover;
}

/* Name + location */
.pc-main {
  grid-area: main;
  display: grid;
  gap: 2px;
}

.pc-name {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 23px);
  line-height: .9;
  font-weight: 700;
}

.pc-location {
  margin: 0;
  color: var(--muted);
  font-size: clamp(12px, 1.6vw, 14px);
}

/* Actions */
.pc-actions {
  grid-area: actions;
  justify-self: end;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;


  color: var(--btn-fg);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform .06s ease, box-shadow .2s ease;
}

.btn:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 2px;
}


.btn:active {
  transform: translateY(1px);
}

.btn svg {
  display: block;
}

/* ------- Responsive layout ------- */
/* At narrow widths, move the button next to the avatar and put the name below */
@media (max-width: 560px) {
  .profile-card {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "avatar actions"
      "main   main";
    align-items: start;
  }

  .pc-actions {
    justify-self: end;
  }
}

/* Extra-small phones: stack everything vertically */
@media (max-width: 380px) {
  .profile-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "avatar"
      "main"
      "actions";
    text-align: center;
  }

  .pc-avatar {
    justify-self: center;
  }

  .pc-actions {
    justify-self: center;
  }
}


/* Avatar */
.pc-avatar {
  width: clamp(72px, 12vw, 112px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #d9d9d9;
  filter: brightness(1.5);
  overflow: hidden;
}

.pc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text */
.pc-main {
  min-width: 0;
  top: 5px;
  position: relative;
}

/* prevents overflow on long names */
.pc-name {
  font-weight: 800;
  font-size: clamp(26px, 4vw, 18px);

  margin: 0 0 6px;
}

.pc-location {
  margin: 0 0 clamp(14px, 2.2vw, 22px);
  color: #7c7c7c;
  font-size: clamp(14px, 1.6vw, 20px);
}

/* Actions */
.pc-actions {
  display: flex;
  flex-wrap: wrap;
  right: 32px;
  position: relative;
  align-items: center;
  gap: clamp(10px, 1.8vw, 22px);
}

/* Buttons (pill) */
.pc-btn {
  appearance: none;
  border: 0;
  padding: 16px 26px;
  border-radius: 999px;
  font-weight: 800;
  font-size: clamp(14px, 1.6vw, 18px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform .06s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  white-space: nowrap;
}

.pc-btn-outline {
  background: var(--pc-outline-bg);
  color: var(--pc-outline-text);
  box-shadow: inset 0 0 0 2px var(--pc-outline-ring);
}

.pc-btn-outline:hover {
  transform: translateY(-1px);
}

.pc-btn-outline:active {
  transform: translateY(0);
}

.pc-btn-solid {
  background: var(--pc-solid);
  color: var(--pc-solid-text);
}

.pc-btn-solid:hover {
  transform: translateY(-1px);
}

.pc-btn-solid:active {
  transform: translateY(0);
}

/* Icon-only round button */
.pc-icon-btn {
  display: inline-grid;
  place-items: center;
  width: clamp(44px, 5vw, 64px);
  height: clamp(44px, 5vw, 64px);
  border-radius: 50%;
  background: var(--pc-outline-bg);
  color: var(--pc-text);
  box-shadow: inset 0 0 0 2px var(--pc-outline-ring);
  border: 0;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .2s ease;
}

.pc-icon-btn:hover {
  transform: translateY(-1px);
}

.pc-icon-btn:active {
  transform: translateY(0);
}

/* Buttons focus ring */
.pc-btn:focus-visible,
.pc-icon-btn:focus-visible {
  outline: 3px solid #b7ff2a;
  /* lime accent */
  outline-offset: 2px;
}

/* Responsive stack for narrow screens */
@media (max-width: 720px) {
  .profile-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .pc-actions {
    justify-content: center;
  }
}


#bottom-player {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: min(920px, 92vw);
  display: none;
  /* shown when playing */
  z-index: 1000;
}

/* card look */
#bottom-player .bp-inner {
  background: #000;
  color: #fff;
  width: 40%;
  margin: 0 auto;
  font-size: 11px;
  -webkit-font-smoothing: antialiased;
  font-weight: 700;
  border-radius: 5px;
  padding: 11px 22px;
  display: grid;
  grid-template-columns: auto auto auto 1fr auto;
  align-items: center;
  gap: 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  font-family: 'Schibsted Grotesk', -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

/* buttons */
.bp-btn {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 6px 8px;
  border-radius: 8px;
}

.bp-btn:focus-visible {
  outline: 2px solid #9ef01a;
  outline-offset: 2px;
}

/* play/pause glyphs (pure CSS) */
#bp-play {
  width: 28px;
  height: 28px;
  position: relative;
}

.bp-icon {
  position: absolute;
  inset: 0;
  display: none;
}

.bp-icon-play::before {
  content: "";
  border-style: solid;
  border-width: 8px 0 8px 14px;
  /* triangle */
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
}

.bp-icon-pause::before,
.bp-icon-pause::after {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 5px;
  background: #fff;
}

.bp-icon-pause::before {
  left: 6px;
}

.bp-icon-pause::after {
  right: 6px;
}

/* default show play icon */
#bp-play .bp-icon-play {
  display: block;
}

#bp-play.is-playing .bp-icon-play {
  display: none;
}

#bp-play.is-playing .bp-icon-pause {
  display: block;
}

/* speed chip */
.bp-speed {
  font-weight: 700;
  color: #b7ff2a;
}

/* bright lime/green like screenshot */

/* times */
.bp-time {
  opacity: 0.95;
  font-variant-numeric: tabular-nums;
}

/* range: big white track with round knob */
.bp-seek {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 999px;
  background: #ffffff55;
  /* gets overridden dynamically with gradient */
  outline: none;
}

.bp-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  margin-top: 0px;
  /* center thumb on track */
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

.bp-seek::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

.bp-seek::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: #ffffff55;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .empafr-wave[data-empafr-state="playing"] rect {
    animation: empafr-bounce 1s ease-in-out infinite;
    transform-origin: center bottom;
  }

  /* Stagger each bar a bit for a nicer ripple */
  .empafr-wave[data-empafr-state="playing"] rect:nth-child(1) {
    animation-delay: 0ms;
  }

  .empafr-wave[data-empafr-state="playing"] rect:nth-child(2) {
    animation-delay: 120ms;
  }

  .empafr-wave[data-empafr-state="playing"] rect:nth-child(3) {
    animation-delay: 240ms;
  }

  .empafr-wave[data-empafr-state="playing"] rect:nth-child(4) {
    animation-delay: 120ms;
  }

  .empafr-wave[data-empafr-state="playing"] rect:nth-child(5) {
    animation-delay: 0ms;
  }

  @keyframes empafr-bounce {

    0%,
    100% {
      height: 8px;
      y: 30;
    }

    /* short bar */
    25% {
      height: 20px;
      y: 24;
    }

    /* medium    */
    50% {
      height: 28px;
      y: 18;
    }

    /* tallest   */
    75% {
      height: 20px;
      y: 24;
    }

    /* medium    */
  }
}

/* Optional: visual state on the play button */

/* Shared icon styling for the pseudo-element */
.empafr-btn.empafr-play::after,
.empafr-btn.empafr-play.playing::after {
  font-family: "Material Design Icons";
  font-style: normal;
  font-weight: normal;
  display: inline-block;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Default: PLAY */
.empafr-btn.empafr-play::after {
  content: "\F040A";
  /* mdi-play */
  font-size: 20px;
}

/* When playing: PAUSE */
.empafr-btn.empafr-play.playing::after {
  content: "\F03E4";
  /* mdi-pause */
  padding-left: 0;
  font-size: 20px;

}




:root {
  --empafr-radius: 10px;
  --empafr-border: #ddd;
  --empafr-text: #111;
  --empafr-muted: #777;
  --empafr-accent: #d94cff;
  --empafr-header: #fbe1ff;
  --empafr-ok: #16a34a;
  --empafr-err: #dc2626;
}

.empafr-wrap {
  max-width: 1100px;
  font-family: 'Schibsted Grotesk';
}

.empafr-searchbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px
}

.empafr-search {
  flex: 1;
  border: 1px solid var(--empafr-border);
  border-radius: 999px;
  padding: 12px 14px;
  font-size: 16px;
  outline: none
}

.empafr-count {
  color: var(--empafr-muted);
  font-size: 14px
}

.empafr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px
}

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

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

.empafr-card {
  background: #fff;
  height: 340px;
  width: 350px;
  border: 1px solid #cacaca;
  border-radius: var(--empafr-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column
}

.empafr-card-top {
  background: #d4ffe9;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 261px;
}

.empafr-wave {
  width: 56px;
  height: 56px;
  display: block;
  color: #0e6a09
}

.empafr-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px;
  background: #fff
}

.empafr-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0
}

.empafr-actions {
  display: flex;
  gap: 5px;
  align-items: center
}

.empafr-btn {
  width: 47px;
  height: 47px;
  color: #000;
  font-size: 20px;
  border: 1px solid #000;
  background: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .08s ease, background .15s ease
}

.empafr-btn:hover {
  background: #000;
  color: #fff
}

.empafr-btn:active {
  transform: scale(.97)
}

.empafr-btn svg {
  width: 22px;
  height: 22px
}



.empafr-hidden {
  display: none !important
}


/* toasts */
.empafr-toast-wrap {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  font-family: 'Schibsted Grotesk';
}

.empafr-toast {
  background: #111;
  color: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  min-width: 100px;
  font-weight: 500;
  font-family: 'Schibsted Grotesk' !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  display: flex;
  align-items: center;
  gap: 8px
}

.empafr-toast[data-empafr-variant="ok"] {
  background: var(--empafr-ok)
}

.empafr-toast[data-empafr-variant="err"] {
  background: var(--empafr-err)
}

.empafr-toast-close {
  margin-left: auto;
  cursor: pointer;
  opacity: .7
}






.empafr-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  max-width: 1100px;
  font-family: 'Schibsted Grotesk';
  margin: 0 auto;
  padding: 20px;
  gap: 20px;
}

.empafr-image {
  flex: 1 1 300px;
  max-width: 300px;
}

.empafr-image img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
  margin-bottom: 1em;
}

.empafr-content {
  flex: 2 1 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.empafr-meta {
  font-size: 14px;
  font-weight: bold;
  color: #666;
  margin-bottom: 10px;
}

.empafr-name {
  font-size: 24px;
  font-weight: bold;
  margin: 0 0 15px;
}

.empafr-bio {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 15px;
  padding: 1em;
}

.empafr-readmore {
  color: #888;
  font-weight: 500;
  text-decoration: none;
  padding: 1em;
  margin-bottom: 20px;
  display: inline-block;
}

.empafr-readmore:hover {
  color: #000;
}

@media (max-width: 768px) {
  .empafr-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .empafr-content {
    align-items: center;
  }
}



.empafr-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 1.5rem;
  font-family: 'Schibsted Grotesk';

  color: white;
  width: 75%;
  margin: 0 auto;
}

.empafr-logo {
  font-size: 1.5rem;
  font-weight: bold;
}

.empafr-menu {
  display: flex;
  gap: .3rem;
}


.empg {
  top: 10px;
  position: relative;
  left: -12px;
}

.empafr-menu a {
  color: #000;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}

.empafr-menu a:hover {
  color: #ff9800;
}

/* Mobile styles */
.empafr-toggle {
  display: none;
  font-size: 1.5rem;
  cursor: pointer;
}

@media (max-width: 768px) {
  .empafr-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    right: 8px;
    top: 60px;
    background-color: #333;
    width: 200px;
    padding: 1rem;
  }

  .empafr-menu.empafr-active {
    display: flex;
  }

  .empafr-toggle {
    display: block;
  }
}


:root {
  --scale: 1;
  --phone-w: 270px;
  --phone-h: 580px;

  --body-top: #465366;
  --body-bot: #202a35;
  --bezel: #141b24;
  --accent: #6c7a8d;
  --bevel-light: rgba(255, 255, 255, .4);
  --bevel-dark: rgba(0, 0, 0, .35);

  --screen-top: #dff7d9;
  --screen-bot: #b7d3a9;
  --screen-border: #8ca48c;

  --key-top: #e7e9ee;
  --key-bot: #cfd5df;
  --key-text: #1b232e;
  --key-shadow: rgba(0, 0, 0, .35);

  --softkey: #e2e6ed;
}

.octoria-dpad .up {
  top: 0;
  left: 25%;
  height: 25%;
}

.octoria-dpad .down {
  bottom: 0;
  left: 25%;
  height: 25%;
}

.octoria-dpad .left {
  left: 0;
  top: 25%;
  width: 25%;
}

.octoria-dpad .right {
  right: 0;
  top: 25%;
  width: 25%;
}

.octoria-dpad .center {
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
}

/* arrows */
.octoria-dpad button {
  position: absolute;
  width: 50%;
  height: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* ================================
   OCTORIA PHONE — FULL STYLESHEET
   ================================ */

/* ---- Theme variables (tweak as you like) ---- */
:root {
  --scale: 1;
  --phone-w: 260px;
  --phone-h: 550px;

  --body-top: #e7edf6;
  --body-bot: #b7c2d1;
  --bezel: #95a1b3;

  --screen-border: #7f8e9f;
  --screen-top: #f4fde9;
  --screen-bot: #dbeecf;

  --softkey: #dfe5ef;

  --key-top: #f5f7fb;
  --key-bot: #cfd7e4;
  --key-text: #203040;
  --key-shadow: #8ea1b7;
}

/* ---- Layout / scaling ---- */
.octoria-phone-scale {
  transform: scale(var(--scale));
  transform-origin: top left;
}

/* ---- Phone body ---- */
.octoria-phone {
  position: relative;
  box-shadow: 0 60px 42px rgba(0, 0, 0, .1), 0 30px 6px rgba(0, 0, 0, .1);
  width: var(--phone-w);
  height: var(--phone-h);
  margin: 0 auto;
  border-radius: 55px / 60px;
  padding: 13px 18px 22px;
  background: linear-gradient(180deg, #0d0d0d, #707780);
  border: 10px solid var(--bezel);
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}

.octoria-earpiece {
  width: 92px;
  height: 12px;
  margin: 2px auto 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, #b7c2d1, #8794a6);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, .5), inset 0 -2px 3px rgba(0, 0, 0, .35);
}

.octoria-brand-pill {
  display: none;
  /* toggle if you want it visible */
  font-family: "Orbitron", system-ui, sans-serif;
  font-weight: 900;
  width: 120px;
  height: 24px;
  margin: 0 auto 10px;
  border-radius: 20px / 14px;
  display: grid;
  place-items: center;
  color: #ffffff;
  letter-spacing: .12em;
  font-size: 16px;
  text-transform: uppercase;
}

/* ---- Screen cavity ---- */
.octoria-screen-wrap {
  background: radial-gradient(120% 140% at 50% 10%, #eef8e8, #cfe3c6 40%, #a0ba96 100%);
  border: 6px solid var(--screen-border);
  border-radius: 18px / 22px;
  padding: 8px 10px 10px;
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, .2);
}

.octoria-screen {
  height: 175px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--screen-top), var(--screen-bot));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -3px 10px rgba(0, 0, 0, .18);
  padding: 1px 12px;
  position: relative;
  overflow: hidden;
  /* keeps glow lines inside */
}

.octoria-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom,
      rgba(255, 255, 255, .04),
      rgba(255, 255, 255, .04) 2px,
      rgba(255, 255, 255, 0) 2px,
      rgba(255, 255, 255, 0) 4px);
  mix-blend-mode: soft-light;
  opacity: .8;
  pointer-events: none;
}

/* ---- Status bar ---- */
.octoria-statusbar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #2a3b28;
  margin-bottom: 6px;
}

.octoria-signal {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
}

.octoria-signal span {
  width: 3px;
  height: 6px;
  border-radius: 1px;
  background: #2f4a2d;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .3);
}

.octoria-signal span:nth-child(2) {
  height: 8px
}

.octoria-signal span:nth-child(3) {
  height: 10px
}

.octoria-signal span:nth-child(4) {
  height: 12px
}

.octoria-signal span:nth-child(5) {
  height: 14px;
  opacity: 1
}

.octoria-time {
  font-variant-numeric: tabular-nums;
}

/* Battery icon */
.octoria-battery {
  position: relative;
  width: 22px;
  height: 10px;
  border: 2px solid #2f4a2d;
  border-radius: 2px;
  margin-left: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}

.octoria-battery .octoria-level {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 70%;
  background: #2f4a2d;
}

/* (Optional) charging shimmer */
.octoria-battery[data-charging="1"] .octoria-level {
  animation: octoria-charge 2s linear infinite;
}

@keyframes octoria-charge {
  0% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.25);
  }

  100% {
    filter: brightness(1);
  }
}

/* ---- Screen body + Message window (SCROLLABLE) ---- */
.octoria-screen-body {
  height: 150px;
  display: flex;
  flex-direction: column;
  /* ← make it a vertical stack */
  min-height: 0;
  /* ← allow child to shrink for scrolling */
  gap: 10px;
  font-weight: 700;
  color: #22321f;
}

.octoria-message-window {
  display: block;
  /* block scrolls naturally from top */
  flex: 1;
  /* ← fill remaining height */
  min-height: 0;
  /* ← critical for flex scrolling */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 4px 6px 0;
  font-family: ui-monospace, monospace;
  font-size: 14px;
  line-height: 1.3;

  /* hide scrollbar but keep scroll working */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
}

.octoria-message-window::-webkit-scrollbar {
  display: none;
}

/* Chrome/Safari */


/* Optional: subtle custom scrollbar (WebKit) */
.octoria-message-window::-webkit-scrollbar {
  width: 6px;
}

.octoria-message-window::-webkit-scrollbar-thumb {
  background: rgba(34, 50, 31, .25);
  border-radius: 3px;
}

/* Styling helpers inside message window */
.octoria-message-window .octoria-big {
  font-size: 22px;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

.octoria-message-window .octoria-sub {
  font-size: 12px;
  opacity: .8;
  font-weight: 600;
}

/* ---- Nav row (softkeys + D-pad) ---- */
.octoria-nav {
  margin-top: 6px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 4px;
}

.octoria-softkey {
  text-align: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--softkey), #c8cfda);
  box-shadow: 0 2px 0 var(--key-shadow), inset 0 1px 0 rgba(255, 255, 255, .7);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}

.octoria-softkey:active {
  transform: translateY(1px);
}

/* ---- D-Pad ---- */
.octoria-dpad {
  position: relative;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #dadfe7, #aeb8c7 60%, #8a95a7 100%);
}

/* Decorative inner rings */
.octoria-dpad::before,
.octoria-dpad::after {
  content: "";
  position: absolute;
  inset: auto;
  pointer-events: none;
  /* important: don't block clicks */
}

.octoria-dpad::before {
  inset: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 65% 70%, #cfd6e1, #9da9b9 70%);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .18), inset 0 -2px 4px rgba(255, 255, 255, .5);
}

.octoria-dpad::after {
  inset: 32px;
  border-radius: 50%;
  background: linear-gradient(180deg, #e6eaf1, #b9c2cf);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .9), 0 1px 0 rgba(0, 0, 0, .25);
}

/* Clickable zones — generic rule FIRST */
.octoria-dpad button {
  position: absolute;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1;
  /* above ::before/::after */
  width: auto;
  height: auto;
  /* sizes set below */
  padding: 0;
}

/* Directional hit zones (override sizes/positions) */
.octoria-dpad .up {
  top: 0;
  left: 25%;
  width: 50%;
  height: 25%;
}

.octoria-dpad .down {
  bottom: 0;
  left: 25%;
  width: 50%;
  height: 25%;
}

.octoria-dpad .left {
  left: 0;
  top: 25%;
  width: 25%;
  height: 50%;
}

.octoria-dpad .right {
  right: 0;
  top: 25%;
  width: 25%;
  height: 50%;
}

.octoria-dpad .center {
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
}

/* (Optional) visual arrow hints for testing
.octoria-dpad .up    { background: rgba(255,0,0,.08); }
.octoria-dpad .down  { background: rgba(0,255,0,.08); }
.octoria-dpad .left  { background: rgba(0,0,255,.08); }
.octoria-dpad .right { background: rgba(255,255,0,.08); }
.octoria-dpad .center{ background: rgba(0,0,0,.06); }
*/

/* ---- Keypad ---- */
.octoria-pad {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 14px;
}

.octoria-key {
  position: relative;
  height: 26px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--key-top), var(--key-bot));
  color: var(--key-text);
  cursor: pointer;
  box-shadow: 0 3px 0 var(--key-shadow), inset 0 1px 0 rgba(255, 255, 255, .9);
  display: grid;
  place-items: center;
  transition: transform .05s ease;
  user-select: none;
}

.octoria-key:active {
  transform: translateY(1px);
}

.octoria-key .octoria-num {
  font-size: 12px;
  font-weight: 800;
  line-height: 2.3;
}

.octoria-key .octoria-letters {
  font-size: 10px;
  text-transform: uppercase;
  opacity: .75;
  letter-spacing: .08em;
  margin-top: -3px;
}

.octoria-key.wide {
  grid-column: span 3;
  height: 50px;
  border-radius: 16px;
}

/* Screws (cosmetic) */
.octoria-screw {
  position: absolute;
  bottom: 14px;
  left: 22px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #b7c2d1 40%, #8592a4 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -2px 3px rgba(0, 0, 0, .35);
}

.octoria-screw.r {
  left: auto;
  right: 22px;
}






:root {
  --octorate-bg: #ffffff;
  --octorate-text: #111111;
  --octorate-muted: #6b7280;
  /* gray-500 */
  --octorate-line: #e5e7eb;
  /* gray-200 */
  --octorate-chip: #ffffff;
  /* light gray for chips */
  --octorate-black: #000000;
  --octorate-radius-lg: 22px;
  --octorate-radius-pill: 9999px;
  --octorate-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 24px rgba(0, 0, 0, .06);
}



/* Page centering just for this demo */

/* Card */
.octorate-card {
  position: relative;
  width: min(480px, 96vw);
  background: var(--octorate-bg);
  border-radius: 16px;
  padding: 22px 18px 24px;
  box-shadow: 0 60px 42px rgba(0, 0, 0, .1), 0 30px 6px rgba(0, 0, 0, .1);
}

/* Close */
.octorate-close {
  position: absolute;
  inset: 10px 12px auto auto;
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #111;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: transform .12s ease;
}

.octorate-close:hover {
  transform: scale(1.06);
  background: #f3f4f6;
}

/* Title */
.octorate-title {
  text-align: center;
  font-weight: 700;
  letter-spacing: .12em;
  font-size: 12px;
  color: #0f172a;
  margin: 6px 0 18px;
  text-transform: uppercase;
}

/* Rating row */
.octorate-rating {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}

.octorate-rate-btn {
  --size: 64px;
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: 2px solid var(--octorate-line);
  background: #fff;
  color: #111;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 20px;
  cursor: pointer;
  transition: transform .16s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
  outline: none;
}

.octorate-rate-btn:hover {
  transform: translateY(-1px);
}

.octorate-rate-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .1);
}

.octorate-rate-btn[aria-checked="true"] {
  background: var(--octorate-black);
  color: #fff;
  border-color: var(--octorate-black);
}

/* Ripple for rating selection */
.octorate-rate-btn .octorate-ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .08);
  transform: scale(0);
  animation: octorate-ripple .5s ease-out forwards;
  pointer-events: none;
}

@keyframes octorate-ripple {
  to {
    transform: scale(1.15);
    opacity: 0;
  }
}

/* Chips grid */
.octorate-tags {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 14px;
  place-items: stretch;
  margin: 6px 0 16px;
}

.octorate-tag {
  border-radius: 9999px;
  border: 1px solid #d1d5db;
  background: var(--octorate-chip);
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  font-weight: 600;
  color: #111;
  cursor: pointer;
  transition: transform .12s ease, background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.octorate-tag:hover {
  transform: translateY(-1px);
}

.octorate-tag.octorate-selected {
  background: var(--octorate-black);
  color: #fff;
  border-color: var(--octorate-black);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
  animation: octorate-pop .18s ease-out;
}

@keyframes octorate-pop {
  0% {
    transform: scale(.94);
  }

  100% {
    transform: scale(1);
  }
}

/* Note input like a pill */
.octorate-note {
  width: 100%;
  line-height: 3.5;
  height: 56px;
  border-radius: var(--octorate-radius-pill);
  border: 1px solid var(--octorate-line);
  padding: 0 18px;
  font-size: 16px;
  outline: none;
  resize: vertical;
  min-height: 56px;
  color: #111;
  background: #fff;
}

.octorate-note::placeholder {
  color: #9ca3af;
  text-transform: lowercase;
}

.octorate-note:focus {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .1);
}

/* Submit */
.octorate-submit {
  margin-top: 16px;
  width: 100%;
  height: 64px;
  border-radius: var(--octorate-radius-pill);
  border: 0;
  background: var(--octorate-black);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  cursor: pointer;
  transition: transform .12s ease, opacity .2s ease;
}

.octorate-submit:hover {
  transform: translateY(-1px);
}

.octorate-submit:active {
  transform: translateY(0);
  opacity: .9;
}

/* Success overlay inside the card */
.octorate-success {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  background: rgba(255, 255, 255, .98);
  border-radius: inherit;
  border: 1px solid var(--octorate-line);
  text-align: center;
  padding: 28px;
  opacity: 0;
  pointer-events: none;
  transform: scale(.98);
  transition: opacity .24s ease, transform .24s ease;
}

.octorate-success.octorate-show {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.octorate-success .octorate-check {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #068865;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 28px;
}

.octorate-success h3 {
  margin: 10px 0 0;
  font-size: 18px;
}

.octorate-success p {
  margin: 0;
  color: var(--octorate-muted);
}

/* Responsiveness */
@media (max-width: 360px) {
  .octorate-rate-btn {
    --size: 56px;
    font-size: 18px;
  }

  .octorate-tag {
    font-size: 14px;
    height: 40px;
  }
}

/* a simple visually-hidden class */
.octorate-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}


:root {
  --ow-card-bg: #fff6f7;
  /* soft pink */
  --ow-pill-bg: #f7d7de;
  /* badge background */
  --ow-brand: #c5133c;
  /* deep rose/red */
  --ow-track: #f0dbe0;
  /* progress track */
  --ow-text: #0f0f10;
  --ow-muted: #6b6b6f;
  --ow-radius: 22px;
}



.octowallet-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4cafef, #1e90ff);
  border-radius: 9999px;
  width: 0;
  transition: width 0.8s ease;
  /* smooth animation */
}

.octowallet-plan-badge {
  transition: opacity 0.4s ease;
}



/* ---- Card ---- */
.octowallet-card {
  width: min(80%, 1080px);
  margin-inline: auto;
  background: var(--ow-card-bg);
  border-radius: var(--ow-radius);
  padding: clamp(20px, 4vw, 44px);
  min-height: 320px;
  box-shadow: 0 60px 42px rgba(0, 0, 0, .1), 0 30px 6px rgba(0, 0, 0, .1);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto 1fr;
  gap: clamp(12px, 2vw, 20px);
}

/* Header: label + badge */
.octowallet-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.octowallet-balance-label {
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ow-brand);
  font-weight: 700;
}

.octowallet-plan-badge {
  background: var(--ow-pill-bg);
  color: var(--ow-brand);
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: clamp(12px, 1.6vw, 16px);
  white-space: nowrap;
}

/* Amount */
.octowallet-amount {
  grid-column: 1 / 2;
  font-size: clamp(36px, 8vw, 10px);
  line-height: 1.05;
  font-weight: 700;
  color: black;
}

/* Progress */
.octowallet-progress {
  grid-column: 1 / -1;
}

span.octowallet-scale-left {
  color: #c5143c;
}

.octowallet-progress-track {
  position: relative;
  height: 3px;
  border-radius: 999px;
  background: var(--ow-track);
  overflow: hidden;
}

.octowallet-progress-fill {
  width: 0%;
  /* animated via JS when in view */
  height: 100%;
  background: var(--ow-brand);
  border-radius: 999px;
  transition: width 1200ms cubic-bezier(.22, .77, .36, 1);
}

.octowallet-progress-scale {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  color: var(--ow-muted);
  margin-top: 8px;
  font-size: clamp(12px, 1.6vw, 16px);
}

/* Footer: provider + CTA */
.octowallet-footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  gap: 16px;
}

.octowallet-provider {
  font-size: clamp(16px, 3.6vw, 21px);
  color: black;
  font-weight: 500;
}

.octowallet-cta {
  background: var(--ow-brand);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: clamp(10px, 2.4vw, 19px) clamp(20px, 4vw, 42px);
  font-size: clamp(16px, 2.4vw, 17px);
  font-weight: 700;
  cursor: pointer;
}

/* ---- Responsive adjustments ---- */
@media (max-width: 720px) {
  .octowallet-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto 1fr;
  }

  .octowallet-amount {
    grid-column: 1 / -1;
  }

  .octowallet-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .octowallet-cta {
    align-self: stretch;
    text-align: center;
  }
}




/* iPad Container */
.gkgeipad {
  width: 575px;
  margin-top: 25px;
  height: 400px;
  background: #3a3a3a;
  border-radius: 25px;
  position: relative;
  display: flex;
  box-shadow: 0 60px 42px rgba(0, 0, 0, .1), 0 30px 6px rgba(0, 0, 0, .1);
  justify-content: center;
  align-items: center;
  border: 8px solid #fff;
}

/* iPad Screen */
.gkgeipad .screen {
  width: 90%;
  height: 85%;
  background: url('your-ipad-screen-image.jpg') no-repeat center center;
  background-size: cover;
  border-radius: 30px;
}

/* iPad Front Camera */
.gkgeipad::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: black;
  border-radius: 50%;
  z-index: 1;
  transform: translateX(-50%);
}

/* iPhone 15 Container */
.gkgephone {
  width: 194px;
  height: 389px;
  background: #111;
  border-radius: 27px;
  position: absolute;
  right: 21px;
  top: 8%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 5px solid #000;
}

/* iPhone 15 Screen */
.gkgephone .screen {
  width: 90%;
  /* Larger screen area */
  height: 85%;
  background: url('your-iphone-screen-image.jpg') no-repeat center center;
  background-size: cover;
  border-radius: 25px;
  /* Slightly rounded edges for the screen */
  position: relative;
}

/* iPhone 15 Notch (Horizontal and Correct Positioning) */
.gkgenotch {
  width: 40%;
  height: 13px;
  background: black;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 20px;
}









.macbook {
  width: 565px;
  height: 400px;
  background-color: #ccc;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  margin-top: 1.5em;
}

.browser-bar {
  width: 100%;
  height: 30px;
  background-color: #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.browser-bar .circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}

.red {
  background-color: #ff5f56;
}

.yellow {
  background-color: #ffbd2e;
}

.green {
  background-color: #27c93f;
}


.browser-content {
  width: 100%;
  height: calc(100% - 27px);
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}


.browser-content img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}


/* Overlay for pop-up */
.gkgeexppop-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  backdrop-filter: blur(30px);
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Pop-up box */
.gkgeexppop {
  background: none;

  border-radius: 10px;
  width: 100%;

  position: fixed;
  z-index: 1000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  display: none;
}

/* Close button */

.gkgeexppop-close {
  position: absolute;
  top: -30px;
  right: 19px;
  font-size: 20px;
  background: none;
  border: none;
  cursor: pointer;
}

.gkgeexppop-close:hover {
  opacity: .5;
  transition: width 2s ease-in-out;
}

/* Scrollable content */
.gkgeexppop-content {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  padding: 10px;
  gap: 15px;
  scrollbar-width: none;
  /* Hide scrollbar for Firefox */
}

.gkgeexppop-content::-webkit-scrollbar {
  display: none;
  /* Hide scrollbar for Chrome, Safari */
}

/* Scroll items */
.gkgeexppop-item {
  min-width: 650px;
  height: 580px;
  background: #fff;
  word-wrap: break-word;
  padding: 40px;

  font-size: 18px;

  border-radius: 5px;
}

.gkgeexppop-item p {
  display: block;
}

/* Show overlay when active */
.gkgeexppop-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Show pop-up when active */
.gkgeexppop.active {
  display: block;
}


/* Image inside item */
.gkgeexppop-item img {
  width: 100%;
  height: 600px;
  object-fit: cover;
  border-radius: 8px;
}


/* Title */
.gkgeexppop-item h3 {
  margin: 10px 0 5px;
  font-size: 20px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.4;
  white-space: normal;
  color: #333;
}

/* Subtitle */
.gkgeexppop-item p {
  font-size: 14px;
  letter-spacing: .5px;
  color: #666;
  margin: 0;
}


button#gkgeimgzoom-button {
  background: #00000099;
  height: 50px;
  color: #ffffff;
  border-radius: 50%;
  width: 50px;
  transition: width 2s ease-in-out;
}

button#gkgeimgzoom-button:hover {
  background: #000000;
  transition: width 2s ease-in-out;

}


.zoom-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 24px;
}




.gkgeimgzoom-overlay {
  position: fixed;
  top: -90px;
  left: 0;
  width: 100%;
  height: 130%;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.gkgeimgzoom-modal {

  padding: 20px;
  border-radius: 10px;
  position: relative;
}

.gkgeimgzoom-close {
  position: absolute;
  top: -20px;
  right: 10px;
  cursor: pointer;
  font-size: 20px;
  color: #fff;
}

.gkgeimgzoom-img {
  max-width: 100vw;
  max-height: 100vh;
  border-radius: 10px;
}





:root {

  --octonot-text: #0f172a;
  --octonot-muted: #6b7280;
  --octonot-ring: #e5e7eb;
  --octonot-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 3px 8px rgba(0, 0, 0, .06);
  --octonot-radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --octonot-bg: #ffffff;
    --octonot-text: #000;
    --octonot-muted: #9aa3b2;
    --octonot-ring: #1f2937;
    --octonot-shadow: 0 14px 28px rgba(0, 0, 0, .1), 0 6px 10px rgba(0, 0, 0, .1);
  }
}

/* === PAGE DEMO WRAPPER (optional) === */
.octonot-page {
  padding: 24px;
  background: none;
  font-family: 'IBM Plex Sans';
  display: grid;
  gap: 60px;
  place-items: start center;
}



/* === STACK === */
.octonot-stack {
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* === CARD (music-style layout) === */
.octonot-toast {
  display: grid;
  grid-template-columns: auto 1fr;
  /* icon | body (time + message) */
  align-items: start;
  column-gap: 14px;

  background: var(--octonot-bg);
  color: var(--octonot-text);
  border-radius: var(--octonot-radius);
  padding: 18px;
  box-shadow: var(--octonot-shadow);

  /* start hidden; will animate in when .octonot-show is added */
  opacity: 0;
  transform: translateY(10px) scale(.99);
}

.octonot-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* timestamp — top-left of right column */
.octonot-time {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--octonot-muted);
  line-height: 1.3;
}

/* icon (red rounded square like reference) */
.octonot-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #28B0F1;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 22px;
  margin-top: 1em;
}

/* message text */
.octonot-title {
  font-size: 1rem;
  line-height: 1.6;
}

.octonot-strong {
  font-weight: 700;
}

/* subtle depth hint for lower items */
.octonot-toast:nth-child(2) {
  filter: saturate(.98);
}

.octonot-toast:nth-child(3) {
  filter: saturate(.95);
}

/* reveal animation; delay is per-card via --octonot-delay set by JS */
.octonot-toast.octonot-show {
  animation: octonot-drop .45s cubic-bezier(.2, .9, .25, 1.2) forwards;
  animation-delay: var(--octonot-delay, 0ms);
}

@keyframes octonot-drop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.99);
  }

  to {
    opacity: 1;
    transform: none;
  }
}



.gkge-hide {
  display: none;
}

.octoslide-btn {
  background: white;
  color: black;
  border-radius: 29px;
  padding: .5em;
  width: auto;
  padding-left: 20px;
  padding-right: 20px;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  box-shadow: 0px !important;
}

.octoslide-btn:hover {
  opacity: .9
}

:root {
  --therapy: #0161ef;
  --meditations: #03873e;
  --ai: #3b197f;
  --sleep: #0ea5a0;
  --programs: #fc6100;
  --ussd: #eb1677;

  p.octoslide-subtitle {
    width: 65%;
    margin-bottom: 1.5em;
  }

  .octoslide-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 1rem;
    margin: 0 auto;
    max-width: 1100px;
    justify-content: center;
    margin-bottom: 1em;
  }

  .octoslide-tab-btn {
    appearance: none;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    border-radius: 999px;
    padding: .5rem 1rem;
    font-weight: 600;
    font-size: .925rem;
    cursor: pointer;
    transition: all .15s ease;
    outline-offset: 3px;
  }

  .octoslide-tab-btn[aria-selected="true"] {
    background: #000;
    color: #ffffff;
  }

  .octoslide-tab-btn:hover {
    border-color: var(--sky-700);
  }

  .octoslide-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Panels wrapper */
  .octoslide-panels {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;

    max-width: 100%;
    margin: 0 auto;
    scroll-padding-left: 1rem;
  }

  .octoslide-panel {
    flex: 0 0 88%;
    /* width to allow next slide to peek */
    scroll-snap-align: start;
    border-radius: 0px;
    color: #fff;
    padding: 1.25rem;
    font-family: 'Schibsted Grotesk';
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    align-items: center;
  }

  @media (min-width: 900px) {
    .octoslide-panel {
      grid-template-columns: 0.6fr 0.5fr;
      padding: 2rem
    }
  }

  .octoslide-hero-left {
    position: relative;
    min-height: 260px;
    border-radius: 1.5rem;
    background: linear-gradient(135deg, #0ea5e9 0%, #1e40af 100%);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 1rem;
  }

  .octoslide-hero-card-lg {
    width: min(520px, 90%);
    aspect-ratio: 16/10;
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .25);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .octoslide-hero-card-lg img {
    width: 100%;
    height: 100%;
    object-fit: cover
  }

  .octoslide-hero-card-sm {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    width: 150px;
    aspect-ratio: 3/4;
    border-radius: 1rem;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25)
  }

  .octoslide-hero-card-sm img {
    width: 100%;
    height: 100%;
    object-fit: cover
  }

  .octoslide-hero-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: .25rem .25rem .25rem 0;
  }

  .octoslide-kicker {
    font-weight: 700;
    letter-spacing: .02em
  }

  .octoslide-title {
    font-size: 1.5rem;
    width: 61%;
    line-height: 1.2;
    font-weight: 800;
    margin: .25rem 0;
    padding-bottom: 10px;
  }

  .octoslide-desc {
    line-height: 1.5;
    color: #e6f6ff
  }

  .octoslide-cta {
    display: inline-block;
    background: #fff;
    color: #0c4a6e;
    font-weight: 700;
    border: none;
    border-radius: 999px;
    padding: .85rem 1.25rem;
    cursor: pointer
  }

  .octoslide-cta:hover {
    filter: brightness(.96)
  }

  /* Radio group */
  .octoslide-radios {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center
  }

  .octoslide-radio {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255, 255, 255, .15);
    padding: .5rem .75rem;
    border-radius: .75rem
  }

  .octoslide-radio input {
    width: 1rem;
    height: 1rem
  }

  .octoslide-legend {
    font-weight: 700;
    margin-right: .5rem
  }

  /* Horizontal scroll row */
  .octoslide-scroll-wrap {
    margin-top: 1rem;
    background: rgba(255, 255, 255, .08);
    border-radius: 1rem;
    padding: 1rem;
  }

  .octoslide-scroll-row {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: .25rem;
  }

  .octoslide-card {
    min-width: 280px;
    max-width: 340px;
    flex: 0 0 auto;
    scroll-snap-align: start;
    background: #fff;
    color: #0f172a;
    border-radius: 1rem;
    overflow: hidden
  }

  .octoslide-card img {
    width: 100%;
    height: 160px;
    object-fit: cover
  }

  .octoslide-card .octoslide-pad {
    padding: 1rem
  }

  .octoslide-muted {
    color: var(--ink-500);
    font-size: .9rem
  }

  [hidden] {
    display: none !important
  }

  /* Custom scrollbar for WebKit browsers */
  .octoslide-panels::-webkit-scrollbar {
    height: 0px;
    /* horizontal scrollbar height */
  }

  .octoslide-panels::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
  }

  .octoslide-panels::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 10px;
  }

  .octoslide-panels::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.6);
  }

  /* Firefox custom scrollbar */
  .octoslide-panels {
    scrollbar-width: thin;
    /* makes scrollbar narrow */
    scrollbar-color: rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0.1);
  }



  .octr {
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: .6;
    font-weight: 700;
    font-size: 11px;
  }

  /* Base layout */
  .octogetstarted {
    position: relative;
    display: inline-block;
  }

  .hidden {
    display: none !important;
  }

  /* Get Started button */
  .octogetstarted-btn {
    display: inline-block;
    margin-top: .75rem;
    /* mt-3 */
    font-size: 1.125rem;
    line-height: 1.75rem;
    /* text-lg */
    background: #000;
    color: #fff;
    border: 1px solid #000;
    border-radius: 9999px;
    /* rounded-full */
    padding: .5rem .75rem;
    /* py-2 + a bit of x-padding */
    text-align: center;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
  }

  .octogetstarted-btn:hover {
    background: #fff;
    color: #000;
    border-color: #000;
  }

  /* Dropdown panel */
  .octogetstarted-menu {
    position: absolute;
    left: 0;
    margin-top: .5rem;
    /* mt-2 */
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    /* ~rounded-2xl */
    padding: .5rem;
    /* p-2 */
    left: -47px;
    z-index: 50;
  }

  /* Menu items */
  .octogetstarted-item {
    width: 100%;
    font-weight: 100;
    background: #fff;
    border: 1px solid #e5e7eb;
    width: 175px;
    margin: 0 auto;

    padding: .5rem 1rem;
    /* px-4 py-2 */

    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
  }

  .octogetstarted-item+.octogetstarted-item {
    margin-top: .5rem;
  }

  /* gap-2 */

  .octogetstarted-item:hover {
    background: #000;
    color: #fff;
    border-color: #000;
  }

  .octogetstarted-item:focus {
    outline: 2px solid #000;
    outline-offset: 2px;
    /* focus ring */
  }





  /* Base */
  .octo-carousel {
    display: flex;
    justify-content: center;
    /* center the slides */
    flex-wrap: no-wrap;
    /* allow wrapping to new lines instead of scrolling */
    overflow: hidden;
    /* hides any accidental overflow */
    gap: .5rem;
    padding: 2rem 1rem;
  }

  .octo-slide {
    flex: 0 0 auto;
    width: 350px;
    scroll-snap-align: start;
    text-align: center;
  }

  .octo-mask {
    width: 100%;
    padding-top: 100%;
    position: relative;
    overflow: hidden;
  }

  .octo-mask img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    top: 10px;

    object-fit: cover;
  }

  /* ===== Shapes ===== */

  /* Circle */
  .octo-mask.mask-circle {
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50"/></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50"/></svg>') no-repeat center / contain;
  }

  /* Hexagon */
  .octo-mask.mask-hexagon {
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50,0 93,25 93,75 50,100 7,75 7,25"/></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50,0 93,25 93,75 50,100 7,75 7,25"/></svg>') no-repeat center / contain;
  }

  /* Rounded square */
  .octo-mask.mask-rounded-square {
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="5" y="5" width="90" height="90" rx="20" ry="20"/></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="5" y="5" width="90" height="90" rx="20" ry="20"/></svg>') no-repeat center / contain;
  }

  /* Triangle */
  /* Triangle with margins so it's optically centered */
  .octo-mask.mask-triangle {
    -webkit-mask: url('data:image/svg+xml;utf8,\
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">\
    <polygon points="50,8 92,92 8,92"/>\
  </svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml;utf8,\
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">\
    <polygon points="50,8 92,92 8,92"/>\
  </svg>') no-repeat center / contain;
  }


  /* Blob */
  .octo-mask.mask-blob {
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M78 19c8 6 15 16 16 27 1 10-4 20-11 28-8 8-18 15-29 17-11 2-22-2-31-9-8-8-14-19-15-30-1-11 4-22 12-30 8-8 18-14 29-14 11 0 21 5 29 11z"/></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M78 19c8 6 15 16 16 27 1 10-4 20-11 28-8 8-18 15-29 17-11 2-22-2-31-9-8-8-14-19-15-30-1-11 4-22 12-30 8-8 18-14 29-14 11 0 21 5 29 11z"/></svg>') no-repeat center / contain;
  }

  /* Optional fallback for unsupported mask */
  @supports not (mask: url("#") no-repeat center / contain) {
    .octo-mask.mask-circle {
      clip-path: circle(50% at 50% 50%);
    }

    .octo-mask.mask-hexagon {
      clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
    }

    .octo-mask.mask-rounded-square {
      clip-path: inset(0 round 20%);
    }

    .octo-mask.mask-triangle {
      clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    }

    .octo-mask.mask-blob {
      clip-path: path("M78 19c8 6 15 16 16 27 1 10-4 20-11 28-8 8-18 15-29 17-11 2-22-2-31-9-8-8-14-19-15-30-1-11 4-22 12-30 8-8 18-14 29-14 11 0 21 5 29 11z");
    }
  }





  body {
    -webkit-font-smoothing: antialiased;
  }

  .hover\:text-black:hover a {
    color: black;
  }


  /* Container for the slideshow */
  .ae-slide-show-container {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* Wrapper for slides */
  .ae-slide-show-wrapper {
    display: flex;
    gap: 16px;
    /* Space between slides */
    padding-left: 16px;
    /* Add padding for the first slide */
  }

  /* Individual slide items */
  .ae-slide-show-item {
    flex: 0 0 calc(43% - 10px);
    /* Two full slides in view with some margin */
    height: 600px;
    /* Fixed height for each slide */
    background-color: #1a1a1a;
    /* Dark background */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1rem;



    color: #fff;
    text-align: center;
    padding: 16px;
  }

  /* Headings inside slide items */
  .ae-slide-show-item h2 {
    margin: 0;
    font-size: 2.2rem;
    font-family: 'pine-bold';

  }

  /* Paragraph inside slide items */
  .ae-slide-show-item p {
    margin: 8px 0 16px;
    font-size: 1.2rem;

  }

  /* Buttons container */
  .ae-slide-show-buttons {
    display: flex;
    gap: 8px;
  }

  /* Buttons */
  .ae-slide-show-btn {
    background-color: #007aff;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.3s;
  }

  .ae-slide-show-btn:hover {
    background-color: #005bb5;
  }





  .ae-slide-show-btn-alt {

    color: #fff;
    border: 1px solid;
    border-radius: 50px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.3s;
  }

  .ae-slide-show-btn-alt:hover {
    background-color: #fff;
    color: #000;
    border: 1px solid #fff;
  }

  .ae-slide-show-btn-alt-black {

    color: #000;
    border: 1px solid;
    border-radius: 50px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.3s;
  }

  .ae-slide-show-btn-alt-black:hover {
    background-color: #888;
    color: #fff;
    border: 1px solid #888;
  }




  /* Custom scrollbar styling for Chrome, Edge, and Safari */
  .ae-slide-show-container::-webkit-scrollbar {
    height: 8px;
    display: none;
  }

  .ae-slide-show-container::-webkit-scrollbar-thumb {
    background: #007aff;
    border-radius: 4px;
    display: none;
  }

  .ae-slide-show-container::-webkit-scrollbar-track {
    background: transparent;
    display: none;
  }


  .ae-up-text {
    justify-content: normal;
    padding-top: 5em;
  }


  .ae-down-text {
    justify-content: end;
    padding-bottom: 5em;
  }

  /* Responsive design */
  @media (max-width: 768px) {
    .ae-slide-show-item {
      flex: 0 0 80%;
      /* Smaller width on mobile */
      height: 450px;
    }
  }





  .pnerc {
    margin-top: -6px;
    margin-left: -6px;
    font-size: 22px;
    display: block;
  }

  /* Hidden class */
  .hidden {
    display: none;
  }



  .pneric {
    width: -webkit-fill-available;
    text-align: left;
  }



  .aepine-loading-container {
    position: relative;
  }

  .pine-ai-kolor {
    opacity: 0;
    /* Initially hidden */
    transform: translateY(-20px);
    /* Start slightly above */
    transition: opacity 1s ease, transform 1s ease;
    /* Smooth transition for fade and slide */
    background: linear-gradient(to right, #007AFF, #6B4EFF, #FF5E9F, #FF6200);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }



  .aepine-hidden-text {
    display: inline;
  }

  .aepine-loading-dots {
    display: flex;
    justify-content: flex-start;
    /* Align dots to the left */
    align-items: center;
    margin-top: 10px;
  }

  .aepine-dot {
    width: 12px;
    height: 12px;
    margin: 0 4px;
    background-color: #fff;
    /* Keep the dot color the same (white) */
    border-radius: 50%;
    animation: aepine-traffic-light 1.8s infinite ease-in-out;
    opacity: 0;
    /* Start with dots invisible */
  }

  .aepine-dot:nth-child(1) {
    animation-delay: 0s;
  }

  .aepine-dot:nth-child(2) {
    animation-delay: 0.6s;
    /* Delay to create the sequential effect */
  }

  .aepine-dot:nth-child(3) {
    animation-delay: 1.2s;
    /* Delay to create the sequential effect */
  }

  @keyframes aepine-traffic-light {

    0%,
    100% {
      opacity: 1;
      /* Make the dot visible */
    }

    50% {
      opacity: 0;
      /* Hide the dot at the midpoint */
    }
  }



  .gkgediv-container {
    text-align: center;

    padding: 20px;
  }

  .gkgediv-title {
    font-size: 28px;
    margin-bottom: 30px;
  }

  .gkgediv-offers {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
  }

  .gkgediv-item {
    text-align: center;
    max-width: 250px;
  }

  .gkgediv-icon {
    width: 60px;
    background: #000;
    margin: 0 auto;

    border-radius: 12px;
    padding: 6px;
    height: 60px;

  }




  .gkge-div-img {
    top: 7px;
    position: relative;
  }





  .gkgediv-heading {
    font-size: 20px;

    margin-bottom: 5px;
    margin-top: .7em;

  }

  .gkgediv-text {
    font-size: 16px;
    color: #555;
  }


  .gkgevideo-background {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 15px;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    z-index: 0;
  }

  .gkgeicons {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    width: 150px;
    z-index: 2;
  }

  .gkgeicon-alt {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #333;
    cursor: pointer;
  }


  .gkgeicon-alt:hover {
    opacity: .9;
    transition: width 2s ease-in-out;
  }


  .alt-red {
    background: red;
    color: #fff
  }

  /* Show icons only when video has loaded */
  .gkgeloaded .screen {
    display: block;
  }



  .aenotloop-icon-alt {
    width: 40px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13%;
    font-size: 11px;
    color: white;
  }

  .aenotloop-icon-alt span {
    top: 1px;
    position: relative;
  }


  .aenotloop-message-alt {
    font-size: 8.5px;
    font-family: 'ibm plex sans' !important;
    font-weight: 400;
    width: 100%;
    overflow-wrap: break-word;
    white-space: break-spaces;
    color: #000;
  }



  .aenotloop-header-alt {
    font-weight: 600;
    opacity: .5;
    margin-bottom: .5em;
    text-transform: uppercase;
    font-size: 5px;
    color: #000;
    letter-spacing: 1px;
    font-family: 'ibm plex sans' !important;
  }

  .aenotloop-notification-alt {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    background: white;
    margin-bottom: 1em;
    display: flex;
    align-items: center;
    gap: 10px;
    /* Space between icon and text */
    height: 66px;
    /* Half the container height */
  }




  .gkgemmag {
    margin-top: -3em;
    margin-bottom: -2em
  }

  .gkgeasset-container {
    width: 100%;
    position: absolute;
    -webkit-font-smoothing: antialiased;
    top: 0;
    left: 0;
    display: flex;
    font-family: 'Schibsted Grotesk';
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 70px;
    /* Give space for title and search bar */
    height: 100%;
  }

  .gkgeasset-upload,
  .gkgeasset-search {
    width: 90%;
    opacity: 0;
    -webkit-font-smoothing: antialiased;
    visibility: hidden;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
  }

  .gkgeasset-upload-bar {
    width: 100%;
    height: 1px;
    background: #ccc;
    border-radius: 5px;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    margin: 10px 0;
  }

  .gkgeasset-progress {
    width: 0%;
    height: 100%;
    -webkit-font-smoothing: antialiased;
    background: #4CAF50;
    transition: width 2s ease-in-out;
  }

  .gkgeasset-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    padding: 10px;
    border-radius: 5px;
    -webkit-font-smoothing: antialiased;
    margin: 5px 0;
    width: 100%;
    font-size: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .gkgeasset-check {
    color: green;
    display: none;
  }

  .gkgeasset-search-input {
    width: 100%;
    padding: 17px;
    border: 1px solid #ccc;
    -webkit-font-smoothing: antialiased;
    border-radius: 33px;

    font-size: 12px !important;
    color: #333;
    height: 27px;
    position: relative;
    top: 0;
    outline: none;
  }

  .gkgeasset-result {
    background: lightyellow;
    padding: 10px;
    border-radius: 5px;
    display: none;
  }

  /* Wireframe Styles for File/Folders */
  .gkgeasset-files {
    width: 100%;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    overflow-y: auto;
    height: 350px;
    /* Height of the scrollable area */
  }

  /* Styling the scrollbar itself */
  .gkgeasset-files::-webkit-scrollbar {
    width: 0px;
    /* Width of the scrollbar */
  }

  /* Styling the scrollbar track (the background of the scrollbar) */
  .gkgeasset-files::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    /* Light gray background */
    border-radius: 10px;
    /* Optional: round corners */
  }

  /* Styling the scrollbar thumb (the draggable part of the scrollbar) */
  .gkgeasset-files::-webkit-scrollbar-thumb {
    background-color: #888;
    /* Thumb color */
    border-radius: 10px;
    /* Optional: round corners */
  }

  /* Styling the scrollbar thumb on hover (when you hover over the scrollbar) */
  .gkgeasset-files::-webkit-scrollbar-thumb:hover {
    background-color: #555;
    /* Darker thumb color when hovered */
  }

  /* Optional: Styling the scrollbar corner (where the vertical and horizontal scrollbars meet) */
  .gkgeasset-files::-webkit-scrollbar-corner {
    background-color: #f1f1f1;
  }


  .gkgeasset-file-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    -webkit-font-smoothing: antialiased;
    padding: 0px;
    padding-left: 10px;
    border-radius: 5px;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .gkgeasset-file-item:hover {
    background-color: #f0f0f0;
  }

  .gkgeasset-file-icon {
    font-size: 24px;
    background: linear-gradient(45deg, #4CAF50, #66BB6A);
    /* Gradient from #4CAF50 to #66BB6A */
    -webkit-background-clip: text;
    /* Clip the background to the text */
    color: transparent;
    /* Make text color transparent to show the gradient */
    margin-right: 15px;
  }


  .gkgeasset-file-name {
    font-size: 12px;
    color: #333;
    -webkit-font-smoothing: antialiased;
    font-family: 'IBM Plex Sans';
  }

  .loop-btn {
    background-color: #000;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
    margin-top: 20px;
    font border: none;
    font-weight: 900;
    letter-spacing: 1px;
    font-size: 10px;
    transition: background-color 0.3s;
  }

  .loop-btn:hover {
    background-color: #333;
  }




  .gkgeasset-upload,
  .gkgeasset-search {
    transition: opacity 0.5s ease, visibility 0s 0.5s;
  }

  .gkgeasset-upload-hidden,
  .gkgeasset-search-visible {
    opacity: 0;
    visibility: hidden;
  }

  .gkgeasset-upload-visible,
  .gkgeasset-search-visible {
    opacity: 1;
    visibility: visible;
  }

  /* Shazam Detection Screen */
  .shazam-screen {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
  }

  .shazam-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: linear-gradient(145deg, #3498db, #2980b9);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 20px rgba(0, 128, 255, 0.8);
    position: relative;
  }

  .shazam-wave {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 2px solid rgba(0, 128, 255, 0.5);
    animation: pulsating 1.5s infinite ease-out;
  }

  @keyframes pulsating {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    100% {
      transform: scale(1.5);
      opacity: 0;
    }
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}


.shazam-text {
  margin-top: 20px;
  font-size: 20px;
  font-weight: bold;
}




.iphone-frame {
  width: 280px;
  height: 550px;
  background: linear-gradient(to bottom, #f8f9fa, #dfe4ea);
  border-radius: 40px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  border: 10px solid black;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  align-items: center;
  padding-top: 20px;
}

.iphone-notch {
  width: 40%;
  height: 20px;
  background: black;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 15px;
}

/* Apps Grid */
.iphone-screen {
  width: 90%;
  height: 55%;
  display: grid;
  -webkit-font-smoothing: antialiased;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 10px;
  margin-top: 50px;
}

.iphone-app {
  width: 100%;
  -webkit-font-smoothing: antialiased;
  height: 100%;
  background-color: white;
  border-radius: 15px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

/* Dock */
.dock {
  position: absolute;
  bottom: 20px;
  width: 95%;
  -webkit-font-smoothing: antialiased;
  height: 60px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.dock-app {
  width: 50px;
  height: 50px;
  background: white;
  border-radius: 15px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

/* Notification Container */
.notification-container {
  position: absolute;
  top: 19%;
  width: 95%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.aenotloop-notification {
  background: white;

  border-radius: 10px;
  -webkit-font-smoothing: antialiased;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  gap: 10px;
  width: 100%;
  opacity: 0;
  transform: translateY(-20px);
  position: absolute;
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.aenotloop-notification.show {
  opacity: 1;
  transform: translateY(0);
}







.aenotloop-container {
  position: relative;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  overflow: hidden;
}

.aenotloop-wrapper {
  display: flex;
  flex-direction: column;
  transition: transform 0.7s ease-in-out;
}

.aenotloop-notification {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  background: white;
  margin-bottom: 1em;

  display: flex;
  align-items: center;
  gap: 10px;
  /* Space between icon and text */
  height: 100px;
  /* Half the container height */
}

.aenotloop-notification.active {
  opacity: 1;
}

.aenotloop-icon {
  width: 80px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13%;
  font-size: 16px;
  color: white;
}

.aenotloop-header {
  font-weight: 600;
  opacity: .5;
  margin-bottom: .5em;
  text-transform: uppercase;
  font-size: 8px;
  letter-spacing: 1px;
  font-family: 'IBM Plex Sans' !important;
}

.aenotloop-message {
  font-size: 12px;
  font-family: 'IBM Plex Sans' !important;
  font-weight: 400;

}

/* Icon Background Colors */
.aenotloop-icon-purple {
  background: #7d31ff;
}

/* Rewind Icon */
.aenotloop-icon-yellow {
  background: #f4c724;
  color: #947c01
}

/* Play Icon */
.aenotloop-icon-red {
  background: #ff4d4d;
  width: 70px
}

/* Music Note Icon */
.aenotloop-icon-blue {
  background: #068865;
  width: 70px
}

/* Music Note Icon */






.gkgeicon {

  height: 195px;
  overflow: hidden;
  position: relative;
}

.gkgeicon div {
  display: flex;
  flex-direction: column;
  transition: transform 0.5s ease-in-out;
}

.gkgeicon span {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 195px;
  font-size: 8em;
  opacity: 1;
  transition: opacity 0.8s ease-in-out;
}


.gkgecirc-circle {
  position: absolute;
  border-radius: 50%;
}

.gkgecirc-left-circle {
  width: 200px;
  height: 200px;
  background-color: blue;
  left: calc(65% - 300px);
  top: calc(50% - 100px);
}

.gkgecirc-right-circle {
  width: 200px;
  height: 200px;
  border: 3px solid #7f04c3;
  background: rgb(46, 48, 48);
  background: linear-gradient(0deg, rgba(46, 48, 48, 1) 0%, rgba(25, 25, 25, 1) 51%, rgba(0, 0, 0, 1) 100%);
  left: calc(34% + 100px);
  top: calc(50% - 100px);
}

.gkgecirc-center-circle {
  width: 80px;
  height: 80px;
  line-height: 2.1;
  color: #7f04c3 !important;
  background-color: #ffffff;
  border: 3px solid #7f04c3;
  left: calc(50% - 40px);
  top: calc(50% - 40px);
  position: absolute;
  text-align: center;
  border-radius: 50%;
  z-index: 2;
}

/* Expanding Pulse Rings */
.gkgepulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(127, 4, 195, 0.3);
  transform: translate(-50%, -50%);
  animation: gkgepulse-animation 1s linear infinite;
  z-index: 1;
}

.gkgepulse:nth-child(1) {
  animation-delay: 0s;
}

.gkgepulse:nth-child(2) {
  animation-delay: 1s;
}

.gkgepulse:nth-child(3) {
  animation-delay: 2s;
}

@keyframes gkgepulse-animation {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(1.8);
    opacity: 0;
  }
}


.gkgecirc-container {
  position: relative;
  width: 100%;
  height: 100%;
}




.gkgeyt-video-section {
  width: 100%;
  position: relative;
  background-color: #000;
  overflow: hidden;
}

.gkgeyt-video-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 45%;
  /* Aspect ratio 16:9 */
  background-color: #000;
}

.gkgeyt-thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.gkgeyt-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  border: none;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  cursor: pointer;
  background-image: url('play-icon.svg');
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
}

.gkgeyt-text-overlay {
  position: absolute;
  bottom: 30px;
  height: 45px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 10px 18px;
  border-radius: 32px;
  font-size: 16px;
  text-align: center;
}

.gkgeyt-video-container {
  position: absolute;
  top: -40px;
  left: 0;
  width: 100%;
  height: 100%;
}

.gkgeyt-video-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}



.gkgeyt-title-container {
  position: absolute;
  top: 75px;
  /* Adjust the position */
  width: 100%;
  text-align: center;
  z-index: 2;
  color: #fff;
}

.gkgeyt-title {

  padding: 0px;
  margin: 0;
}

.gkgeyt-subtitle {

  margin: 5px 0 0 0;
  font-weight: 400;
}




.aehero {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  padding: 50px 20px;
  background: linear-gradient(180deg, #fff4d7 0, #ffffff 100%);
  text-align: center;
}

.octo-p {
  border-radius: 5px;
  position: absolute;
  right: -62px;
  box-shadow: none !important;
}

.aehero-text h1 {
  font-size: 2.25rem;
  padding-top: 50px;

  color: #000;
  padding-bottom: 0px;
  line-height: 1.1;

}

.aehero-cards {
  display: flex;
  position: relative;
  margin-bottom: -7em;
  justify-content: center;


}

.card {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  margin-right: -2em;
  position: relative;
  border: none !important;
  animation: float 4s ease-in-out infinite;
}

.card.yellow {
  background-color: #ff1d7d;
  transform: rotate(-10deg);
  animation-delay: 0s;
  border-radius: 50%;
}

.card.yellow::before {
  font-size: 3rem;
  color: white;
  content: "\F075A";
  position: absolute;
  font-family: 'material design icons';
  -webkit-font-smoothing: antialiased;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card.blue {
  background-color: #66ccff;
  transform: rotate(-5deg);
  animation-delay: 0.3s;
  border-radius: 50%;
}

.card.blue::before {
  content: "\F02E2";
  position: absolute;
  font-family: 'material design icons';
  -webkit-font-smoothing: antialiased;
  font-size: 3rem;
  color: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card.orange {
  background-color: #ff7020;
  transform: rotate(3deg);
  border-radius: 50%;
  animation-delay: 0.6s;
}

.card.orange::before {
  content: "\F07AF";
  position: absolute;
  font-family: 'material design icons';
  -webkit-font-smoothing: antialiased;
  font-size: 2.5rem;
  color: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card.green {
  background-color: #66cc66;
  transform: rotate(10deg);
  border-radius: 50%;
  animation-delay: 0.9s;
}

.card.green::before {
  content: url('https://res.cloudinary.com/dih0krdcj/image/upload/v1710656700/Arroweye%20Pro/afvbz7ssvozntzoz9yhh.svg');
  font-family: 'material design icons';
  width: 58px;
  -webkit-font-smoothing: antialiased;
  font-size: 3rem;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card.purple {
  background-color: #9b59b6;
  transform: rotate(15deg);
  animation-delay: 1.2s;
  border-radius: 50%;
}

.card.purple::before {
  content: url('https://res.cloudinary.com/dih0krdcj/image/upload/v1737615745/Arroweye%20Pro/spins_rcifvk.svg');

  -webkit-font-smoothing: antialiased;
  width: 48px;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card.red {
  background-color: #e74c3c;
  transform: rotate(-20deg);
  animation-delay: 1.5s;
  border-radius: 50%;
  margin-right: 0px;
}

.card.red::before {
  content: url('https://res.cloudinary.com/dih0krdcj/image/upload/v1737617099/Arroweye%20Pro/CANVAS_2_d5p0fh.svg');
  font-family: 'material design icons';
  -webkit-font-smoothing: antialiased;
  width: 130px;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card.teal {
  background-color: #1abc9c;
  transform: rotate(25deg);
  animation-delay: 1.8s;
  border-radius: 50%;
}

.card.teal::before {
  content: url('https://res.cloudinary.com/dih0krdcj/image/upload/v1737615047/Arroweye%20Pro/drops_whz5gz.svg');
  -webkit-font-smoothing: antialiased;
  width: 45px;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}



/* Keyframes Animation */
@keyframes float {
  0% {
    transform: translateY(0) rotate(0deg);
  }

  25% {
    transform: translateY(-10px) rotate(-5deg);
  }

  50% {
    transform: translateY(0) rotate(5deg);
  }

  75% {
    transform: translateY(10px) rotate(-3deg);
  }

  100% {
    transform: translateY(0) rotate(0deg);
  }
}




.hhyde {
  display: none
}

.ae-container {
  position: relative;
  overflow: hidden;
  height: 300px;
  /* Set your desired height */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* Subtle shadow */
}

.ae-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.ae-active {
  opacity: 1;
}


.ae-slide:nth-child(1) {
  background-color: #FFC3A0;
  /* Pastel orange */
}

.ae-slide:nth-child(2) {
  background-color: #A0FFD7;
  /* Pastel green */
}

.ae-slide:nth-child(3) {
  background-color: #FFA0E0;
  /* Pastel pink */
}

/* Add more nth-child rules for additional slides as needed */



@font-face {
  font-family: 'Kolapo-Book';
  src: url('../fonts/Cera/Kolapo-Book.eot');
  src: url('../fonts/Cera/Kolapo-Book.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Cera/Kolapo-Book.woff2') format('woff2'),
    url('../fonts/Cera/Kolapo-Book.woff') format('woff'),
    url('../fonts/Cera/Kolapo-Book.ttf') format('truetype'),
    url('../fonts/Cera/Kolapo-Book.svg#Kolapo-Book') format('svg');
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}

.mot-5 {
  margin-top: 2.7rem !important;
}

button {
  outline: none !important
}

.m-f {

  animation: rodar 80s infinite linear;
  transform: rotate(30deg);

}

span.gk-lgr {
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -.3px;
  opacity: .9;
}

/* Styles for tabs */
.tab {
  display: none;
}

.tab.active {
  display: block;
}

.tabs {
  text-align: left;
  width: 70%;
  font-size: 1.15em;
  margin: 0 auto;
}


.tab-button {
  font-weight: 500;
  /* Set the font weight for the tab buttons */
}

.tab-button.inactive {
  font-weight: normal;
  /* Set the font weight for inactive state */
}

#video-container {
  position: relative;
}

#video-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
}

#video-popup {
  position: fixed;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  padding: 1px;
  text-align: center;
  display: none;
}

#close-btn {
  position: absolute;
  top: -30px;
  right: 10px;
  color: #fff;
  cursor: pointer;
}


/* Style for the checkbox and label */
input[type="checkbox"] {

  margin-right: 5px;
  position: relative;
  top: 1px;
}

label[for="rememberPassword"] {
  font-size: 15px;
  font-weight: 500;
}

.remember-password-label {
  width: 70%;
  margin-bottom: 1.5em;
  align-items: center;
  font-size: 14px;
  margin-top: 5px;
  /* Adjust as needed */
}

.remember-password-checkbox {
  width: 13px;
  height: 13px;
  margin-right: 10px;
  /* Add spacing between the checkbox and text */
}


.d-blessed-b-y {
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  border-radius: 50%;
  background: none;
  z-index: 1 !important;
  color: #132c18 !important;
  border: 1px solid #132c18;

  width: 80px;
  height: 80px;
  position: relative;
  /* or static */
  z-index: 0;
  /* or adjust according to your needs */
}

.d-blessed-b-y:hover {
  color: #ffffff !important;
  background: #132c18;

}




.collapsible-container {
  position: absolute;
  bottom: -80px;
  right: 20px;
  /* Adjusted for open state */
  width: 400px;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  /* Start with opacity set to 0 */
  transition: right 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.5s ease-out;

}



.collapsible-tag {
  font-size: 18px;
  color: #122C18;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.collapsible-headline {
  font-size: 24px;
  color: #122C18;
  margin-bottom: 10px;
}

.collapsible-bottom {
  font-size: 17px;
  color: #0e3531;
  text-align: left;
}

.collapsible-content {
  display: none;
}


.collapsible-container.open {
  right: 20px;
  opacity: 1;
  /* Fade in when the panel is open */
}

.collapsible-container.open .collapsible-content {
  display: block;
}

.close-button {
  cursor: pointer;
  font-size: 16px;
  color: #0e3531;
}




.kp-gkge {
  font-family: 'ibm plex sans' !important;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 4px !important;
}


.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in.delayed {
  transition-delay: .4s;
}

.fade-in.delayeder {
  transition-delay: .9s;
}

.fade-in.delayedest {
  transition-delay: .12s;
}

.fade-in.delayedest-m {
  transition-delay: 5.1s;
}

.fade-in.delayedest-q {
  transition-delay: 6s;
}


.d-but-newt {
  padding-left: 2em !important;
  padding-right: 2em !important;
  -webkit-font-smoothing: antialiased;
  padding: 0.9em;
  display: inline-block;
  border-radius: 34px;
  color: #0d3531;
  background: #f2ff00;
  width: 260px;
  font-size: 18px;
}

.d-but-newt:hover {
  color: #0d3531;
  background: #fff
}



.d-but-alt {
  border: 1px solid #fff;
  font-family: ''Tw Cen Classified MT Std'';
  padding-left: 2em !important;
  padding-right: 2em !important;
  -webkit-font-smoothing: antialiased;
  padding: .9em;
  display: inline-block;
  border-radius: 34px;
  background: #00d72d61;
  color: #0e3531;
  width: 260px;
  font-size: 18px;
}


.d-but-alt:hover {
  background: #16A085;
  color: #fff;
  transition: all 0.2s ease-out;
}

.d-but-or {

  padding-left: 2em !important;
  padding-right: 2em !important;
  -webkit-font-smoothing: antialiased;
  padding: 0.9em;
  display: inline-block;
  border-radius: 34px;
  background: #ff5733;
  color: #fff;
  width: 260px;
  font-size: 18px;
}


.d-but-or:hover {
  color: #fff;
  background: #000;
}


@keyframes rodar {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
    left: 30px;
  }
}

.brown-reg {
  font-family: 'Brown-Regular';
}

.hero-top {
  position: relative;
  height: auto;
  padding-bottom: 10px;
  width: 100%;
  overflow: hidden;
}

.sac {
  font-family: 'sacramento';
}

video {
  display: block;
  height: 450px !important;

  object-fit: cover;

}

.pine-tall {
  font-family: 'Schibsted Grotesk';
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

.pine-medium {
  font-family: 'Schibsted Grotesk';
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

.pine-light {
  font-family: 'Schibsted Grotesk';
  -webkit-font-smoothing: antialiased;
}

.pine-bold {
  font-family: 'Schibsted Grotesk';
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
}

#button {
  display: inline-block;
  background-color: #c80740;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 50px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s,
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}

#button::after {
  content: "\F005D";
  font-family: 'material design icons';
  font-weight: normal;
  font-style: normal;
  font-size: 1.2em;
  line-height: 50px;
  color: #fff;
}

#button:hover {
  cursor: pointer;
  background-color: #333;
}

#button:active {
  background-color: #555;
}

#button.show {
  opacity: 1;
  visibility: visible;
}

/* Styles for the content section */


@media (min-width: 500px) {
  .content {
    width: 43%;
  }

  #button {
    margin: 30px;
  }
}


.stast {
  border: 1px solid;
  border-radius: 50px;
  padding: 10px;
  padding-left: 3em;
  padding-top: 1.2em;
  padding-bottom: 1.2em;
  padding-right: 3em;
}

.stast :hover {
  background: #000 !important;
  color: #fff ! important;
}


.photo {

  height: 465px;
  background-repeat: no-repeat;
  background-size: cover;

  opacity: 0;
  transition: opacity 0.35s linear;
  */
}

.photo[data-scroll=in] {
  opacity: 1;
  transition-duration: 1s;
}



.playlist {
  border-radius: 10px 10px 0px 0px;
}


.capt {
  background: #141414;
  color: #fff;
  padding: 12px;
}


.capt-alt {
  background: #ffffff;
  color: #000;
  border: 1px solid #000;
  padding: 12px;
}

.capt-alt-a {
  background: #ffffff;
  color: #000;

  padding: 12px;
}

.capt-alt-cap {
  background: #ffffff;
  color: #000;
  border-bottom: none !important;
  border: 1px solid #000;
  padding: 12px;
}

.d-but-new {
  border: 1px solid;
  padding-left: 2em !important;
  padding-right: 2em !important;
  padding: 1em;
  border-radius: 34px;
  width: 220px;
  text-align: center;
  font-size: 15px;
}

.d-but-new:hover {
  background: #690410;
  color: #fff;
  transition: all 0.2s ease-out;
}

.kp-b {
  color: #51070f;
}

.wip {
  background: #c9f9c4;
  color: #35a62b;
  padding: 8px;
  font-size: 13px;
  border-radius: 7px;
  letter-spacing: 1px;
}

.hero-nav {
  width: 100%;
  margin: auto;
  background: none;
  display: flex;
  /* grid-template-columns: 1fr 1fr; */
  justify-content: space-between;
  align-items: center;
}

.insta-color {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.butt-add {
  background: #ec5829 !important;
  color: #fff !important;
  margin-left: .5em;
}

.hero-nav-list {
  justify-self: end;

  font-weight: 100;
  position: relative;
}

.d-but {
  border: 1px solid;
  padding-left: 2em !important;
  padding-right: 2em !important;
  padding: 1em;
  border-radius: 34px;
  font-size: 16px;
}


.d-but:hover {
  background: #690410;
  color: #fff;
  transition: all 0.2s ease-out;
}





.hero-nav-listItem {

  width: 165px;
  height: 5.5vh;
  border-radius: 48px;
  /* border: 0.7px solid #ffea07; */
  padding-left: 20px;
  border: 1px solid #fff;
  font-size: .93em;
  background: none;
  color: #fff;
  z-index: ;

  cursor: pointer;
  display: flex;
  align-items: center;
}

.hero-nav-listItem span {
  position: relative;
  left: 65px;
  transition: all 0.6s ease;
}

.hero-nav-listItem span.active {
  transform: rotate(180deg);
}

.hero-nav-listItem2 {
  position: absolute;
  z-index: 1000;
  margin-left: 6px;
  top: 26px;
  /* transform: scaleX(0); */
  opacity: 0;
  transition: all 0.3s ease-in;
  pointer-events: none;
}

.hero-nav-listItem2.show {
  /* transform: scaleX(1); */
  opacity: 1;
  top: 68px;
  pointer-events: auto;
}

.hero-nav-listItem2 li {
  background: #fff;
  width: 160px;
  min-height: 4.5vh;
  padding: 1.5vh 0 1.6vh 20px;
  font-size: .93em;
  line-height: 2.3vh;
  color: #69040f;
  cursor: pointer;
  border-bottom: 1px solid #20010540;
  transition: color 0.1s ease;
}


ol,
ul {
  padding: inherit !important;
}



.hero-nav-listItem2 li:hover {
  color: #fff;
  background: #51070f;
  transition: all 0.3s ease-in;
}

.hero-nav-list li,
.hero-nav-list ul li {
  list-style: none;
}

.hero-image {
  position: absolute;
  top: 25vh;
  left: 14vw;
  height: 100%;
  width: 100%;
  object-fit: cover;
  transform: scale(1.3);
  z-index: -1;
}

button {
  outline: none !important;
}

.hero-words-box {
  margin-top: 12vh;
  margin-left: 10vw;
  height: 40vh;
  width: 80vw;
  /* border: 1px solid red; */
}

.hero-word-top {
  /* overflow:hidden; */
  height: 50%;
  width: 100%;
  /* border: 1px solid red; */
}

.hero-words {
  display: inline-block;


  line-height: 1.1;

}

.cera-l {
  font-family: "ITC Clearface Std";
  -webkit-font-smoothing: antialiased;
}

.inner-span {
  position: relative;
  top: 1.1vh;
  border-bottom: 1px solid #54d516;
  overflow: hidden;
  transition: all 0.8s ease-out;
}

@media (max-width: 500px) {

  .hero-nav-listItem {
    width: 150px;
  }

  .hero-nav-listItem span {
    left: 57px;
  }

  .hero-words {
    font-size: 10vh;
  }



  .hero-words-box {
    margin-top: 10vh;
    margin-left: 5vw;
  }
}

@media (max-width: 400px) {
  .hero-words {
    font-size: 9vh;
  }

  .hero-nav-listItem span {
    left: 40px;
  }

  .hero-nav-listItem2 li {
    width: 150px;
  }

  .inner-span {
    top: 2.5vh;
  }
}

.inner-span span {
  position: relative;
  /* transition: all 0.8s ease; */
}

.inner-span span.animate {
  animation: animateDown 7s ease infinite;
}

@keyframes animateDown {
  0% {
    top: 16vh;
  }

  20% {
    top: 0vh;
  }

  70% {
    top: 0vh;
  }

  80% {
    top: 0vh;
  }

  100% {
    top: 16vh;
  }
}

.services-container {
  position: relative;
  width: 100%;
  height: 90vh;
  overflow: hidden;
  margin: auto;
  transition: all 0.8s linear;
}

.line-but {
  border: 1px solid #0c0c0c;
  padding: 1.2em;
  background: background: rgb(219, 238, 255);
  background: linear-gradient(229deg, rgba(219, 238, 255, 1) 80%, rgba(206, 232, 255, 1) 80%);
  width: 250px;
  transition: all 0.8s ease;
  border-radius: 2px;
}

button.line-but.mt-1:hover {
  background: #dbeeff;
  transition: all 0.8s ease;
}


.line-butt {
  border: 1px solid #0c0c0c;
  background: background: none;
  height: 50px;
  font-size: 1.4em;
  width: 50px;
  transition: all 0.8s ease;
  border-radius: 50%;
}

button.line-butt.mt-1:hover {
  background: #dbeeff;
  transition: all 0.8s ease;
}

.services-filter {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  min-width: 100%;
  transition: all 0.8s linear;
}

.services-container:hover .services-filter {
  right: 0%;
}

.services-item {
  height: 100%;
  width: 100%;
  border-right: 1px solid #ddd;
  display: grid;
  /* grid-template-rows: 1fr 3fr 1fr; /*
    /* background: yellow; */
}

.item-header {
  background: linear-gradient(to left, #2c3e50, #1b1d1e);
  font-family: 'vivo-medium';
  width: 100%;
  padding: 2em;
  display: flex;
  margin-top: 31.3em;
  align-items: center;
  justify-content: center;
  text-rendering: optimizelegibility;
}


.text-scr {
  font-size: 6em !important;
}

.item-div {
  width: 90%;
  height: 90%;
  /* background:skyblue; */
  overflow: hidden;
}

.item-div img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.item-footer-alt {
  width: 100%;
  display: flex;
  align-items: center;
  color:
    justify-content: center;
  /* background:grey; */
}


.item-footer-alt-new button {
  width: 220px;
  padding: .8vh 0;
  color: #fff;
  border-radius: 5px;
  transition: all 0.8s ease;
  font-family: 'Cera-Medium';
  font-size: 18px;
}

.item-footer-alt-new {
  width: 100%;
  border-radius: 5px;
  display: block;
  align-items: center;
  color:
    justify-content: center;
  /* background:grey; */
}

.iitem-footer button {
  width: 550px;
  padding: 1.5vh 0;
  color: #fff;
  background: black;
  border-radius: 48px;
  text-transform: uppercase;
  font-size: 31px;
}

.item-footer {
  width: 100%;
  display: flex;
  align-items: center;

  /* background:grey; */
}

.plate {
  background: #fff;
  width: 70px;
  margin: 0 auto;
  justify-content: space-between;
  color: #000;
  padding-top: 13px;
  border-radius: 50px;
  height: 70px;
  transition: color 0.4s ease;
}


.plate:hover {
  background: none;
  width: 70px;
  border: 1px solid #fff;
  margin: 0 auto;
  justify-content: space-between;
  color: #fff;
  padding-top: 13px;
  border-radius: 50px;
  height: 70px;
  transition: color 0.4s ease;
}


.item-footer button {
  background: #fc3c44;
  width: 40%;
  padding: 1.5vh 0;
  color: #fff;

  transition: all 0.8s ease;
  font-family: 'Cera-Bold';
  font-size: 15px;
}

.item-footer button:hover {
  background: #fff;
  color: #fc3c44;
}

.item-footer-alt {
  width: 100%;
  display: flex;
  align-items: center;
  color:
    justify-content: center;
  /* background:grey; */
}




.nav-link {
  display: block;
  padding: .5rem .1rem !important;
  text-decoration: none;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}




@-webkit-keyframes $animation_name {
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes $animation_name {
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes $animation_name {
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes $animation_name {
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes $animation_name {
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes $animation_name {
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.no-id {
  visibility: hidden !important;
}


.video {
  width: 100%;
  height: 700px;
  border: 1px solid #fff;



  position: relative;
}

/* .video video { */
/* width: 100%; */
/* height: 700px;  */
/* } */

.playbutton {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  text-indent: -9999;
  color: transparent;
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 600ms;
  -o-transition-duration: 600ms;
  -webkit-transition-duration: 600ms;
  transition-duration: 600ms;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.playbutton:before {
  content: '';
  position: absolute;
  top: 30px;
  left: 40px;
  display: block;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 30px solid #FFF;
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 300ms;
  -o-transition-duration: 300ms;
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.playbutton:after {
  content: '';
  opacity: 0;
  position: absolute;
  top: 30px;
  left: 40px;
  display: block;
  width: 30px;
  height: 40px;
  border-left: 10px solid #FFF;
  border-right: 10px solid #FFF;
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 300ms;
  -o-transition-duration: 300ms;
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-transform: translate3d(0, 0, 0);
}

.playbutton:hover:after {
  opacity: 1;
  width: 150px;
  left: -25px;
}

.playbutton.loading:before {
  opacity: 0;
}

.playbutton.loading:after {
  opacity: 1;
  width: 150px;
  left: -25px;
  border-radius: 3px;
  -webkit-animation: spin 800ms linear infinite;
  -moz-animation: spin 800ms linear infinite;
  -ms-animation: spin 800ms linear infinite;
  -o-animation: spin 800ms linear infinite;
  animation: spin 800ms linear infinite;
}

.playbutton.playing {
  top: 90%;
  left: 90%;
}

.playbutton.playing:after {
  -webkit-animation: endspin 600ms;
  -moz-animation: endspin 600ms;
  -ms-animation: endspin 600ms;
  -o-animation: endspin 600ms;
  animation: endspin 600ms;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
  top: 30px;
  left: 40px;
  width: 30px;
  opacity: 1;
  opacity: .1;
}

.playbutton.playing:before {
  opacity: 0;
}

.playbutton.playing:hover:after {
  opacity: 1;
}

.playbutton.playing.paused:before {
  opacity: 1;
}

.playbutton.playing.paused:after {
  opacity: 0;
}

.cap:hover {
  filter: contrast(1.5);
}

.cape:hover {
  filter: contrast(1.1);
}

.cog-small {
  width: 50px;
  height: 50px;
  background: #102BA3;
  margin: 50px auto;
}

.pd-fx {
  padding: 0.5em;
}

#cog {
  -webkit-animation: cog 1s infinite;
  -moz-animation: cog 1s infinite;
  -ms-animation: cog 1s infinite;
  animation: cog 1s infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -ms-animation-timing-function: linear;
  animation-timing-function: linear
}

@keyframes cog {
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}


@media only screen and (max-width: 35em) {
  /* .video video { display: none; */
  /* width: 100%; */
  /* height: 100%  ; object-fit: cover; */
  /* } */

  /* .pauseBtn{ */
  /* display:none; */
  /* } */

  .empset-container {
    width: 100%;
  }

  .lgg {
    width: 375px;
  }


  .subf {
    line-height: 1.3;
    width: 95%;
    padding: 17px;
    opacity: .8;
    padding-top: 0px;
    font-size: 20px;
  }


  .emprfx {
    font-size: 2.5em !important;
    line-height: .8;
    margin-left: x;
  }

  .emprhx {
    display: flex;
    gap: 10px;
    width: 94%;
    margin: 0 auto;
  }

  .empafr-navbar {
    width: 100%;
    padding: 0.8rem 1rem;
  }

  .empri-tabs {
    display: flex;
    /* arrange tabs in a row */
    flex-wrap: nowrap;
    /* prevent wrapping */
    overflow-x: auto;
    /* enable horizontal scroll */
    -webkit-overflow-scrolling: touch;
    /* smooth scroll on iOS */
    gap: 12px;
    /* spacing between tabs */
    scrollbar-width: none;
    /* hide scrollbar (Firefox) */
  }

  .empri-tabs::-webkit-scrollbar {
    display: none;
    /* hide scrollbar (WebKit) */
  }

  .empri-tabs>* {
    flex: 0 0 auto;
    /* prevent shrinking so items keep width */
  }


  .pc-location {
    font-size: 20px;
    margin-bottom: 1.8em;
  }

  .pc-name {
    font-size: 20px
  }

  .magila {
    width: 100% !important;
    margin: 0 auto;
    margin-top: 1.5em;
  }



  .empafr-menu {
    flex-direction: column;
    position: relative;
    right: 0px;
    top: -2px;
    background-color: #ffffff;
    width: auto;
    padding: 1rem;
    display: flex
  }
}

;

}



.empwdd {
  margin: 0 auto !important;
  width: 91%;
}






.empri-panels {
  justify-content: center;
  display: flex;
}

.octo-carousel {
  overflow-x: scroll;
}

.gkpdfx {
  padding: 5px !important
}

.hyde {
  display: none !important;
}

.gkge-hide {
  display: block !important;
}


span.aepine-hidden-text {
  font-size: 33.5px;
  line-height: 1;
}


.pne-ae-txt-fix {
  font-size: 33.5px !important;
  line-height: 40px !important;
}


.pne-bg-fix-1 {
  background-size: contain !important;
  background-repeat: no-repeat !important;

  background-position: 50% 220% !important;
}


.pne-bg-fix-2 {

  background-repeat: no-repeat !important;
  background-color: #79a0b1 !important;
  background-position: 50% -81% !important;
}


.pne-bg-fix-3 {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: 50% 275% !important;
}


.ae-slide-show-item p {
  font-size: 1.1rem
}

.ae-slide-show-item h2 {

  font-size: 1.8rem;
}





.gkgemmag {
  margin-top: -6em
}

.bord-pne {
  border: none !important
}

.pne-recipe-scrollable {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  /* Hide scrollbar in Firefox */
  -ms-overflow-style: none;
  /* Hide scrollbar in Internet Explorer */
}

.pne-recipe-scrollable::-webkit-scrollbar {
  display: none;
  /* Hide scrollbar in Webkit-based browsers */
}

.pne-recipe-scrollable>* {
  flex: 0 0 auto;
  /* Prevent items from shrinking */
  margin-right: 8px;
  /* Optional: Add spacing between items */
  width: calc(85% - 16px);
  /* Each item takes almost full width with some space */
}

.pne-recipe-scrollable>*:nth-child(n) {
  margin-right: 8px;
  /* Ensure there's space between items */
}

/* This will make the last item slightly cut off to show part of the next one */
.pne-recipe-scrollable::after {
  content: '';
  display: block;
  width: 8px;
  /* Adding space to show part of the next item */
}

.pne-bt {
  width: 315px !important
}

.pne-flx {
  display: flex;
  align-items: center !important;
  gap: 32px !important;
  flex-direction: column !important;
}







.gkgeyt-text-overlay {

  width: 280px;

}

.gkgeyt-title {
  font-size: 2em;
}

.aefnt {
  line-height: 47px !important;
  font-size: 33px;
}

.gkgeyt-video-wrapper {

  padding-top: 135% !important;


  font-size: 2em;
}

.gkgeicon span {
  top: -21px !important;
  position: relative;
}

.gkgecirc-left-circle {
  width: 150px;
  height: 150px;
  background-color: blue;
  left: calc(89% - 300px);
  top: calc(50% - 78px);
}

.gkgecirc-right-circle {
  width: 150px;
  height: 150px;
  border: 3px solid #7f04c3;
  background: rgb(46, 48, 48);
  background: linear-gradient(0deg, rgba(46, 48, 48, 1) 0%, rgba(25, 25, 25, 1) 51%, rgba(0, 0, 0, 1) 100%);
  left: calc(22% + 100px);
  top: calc(50% - 81px);
  font-size: .5em;
}


.gkgeicon span {
  top: 0px
}

.pne-recipe-scrollable {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}


.aehero {

  padding: 0px 20px;

}

.bg-s {
  background: #fff5d8 !important
}

.aehero-cards {
  margin-bottom: -1.2em;
}

.card.yellow {
  margin-left: -1em;
}

.card.yellow::before {
  font-size: 2em;
}

.card.blue::before {
  font-size: 2em
}

.card.orange::before {
  font-size: 2em
}

.card.green::before {
  width: 40px;
  top: 35px
}

.card.teal::before {
  width: 35px;
  top: 45px
}

.card.purple::before {
  width: 35px;
  top: 45px
}

.card.red::before {
  width: 65px;
  top: 43px;
}

.card.red {
  margin-right: -1em !important
}

.card {
  width: 80px;
  height: 80px;
  margin-right: -1.5em
}


#video-popup {
  padding: 1px;
}

#video-popup iframe {
  width: 360px;
  height: 200px;
}

.ar-fixc {
  margin-top: -7.4px;
}

.ae-logos {
  padding-top: 13px !important;
}

.ae-full {
  width: 100.1%
}

.hero-words {
  line-height: 1;
  top: 5px;
  font-size: 2.25rem;
  padding-right: 5.5px;
}

.gk-lgr {
  font-size: 1.2em
}

.gkge-wts {
  margin-top: -0.8em !important
}

.gkge-p-fix {
  margin-top: -1em !important
}

.gkge-margin-fx {
  margin-left: 0em !important;
}

.gkge-no-pad {
  padding-right: 0px !important;
}

.gkge-nwb {
  border-radius: 0px !important
}

.gkge-border-r {
  border-radius: 0px 0px 10px 10px !important;
}

.gkge-border-l {
  border-radius: 10px 10px 0px 0px !important;
}

.fiix {
  font-size: 2rem !important;
}

.cd-morph-dropdown {
  position: relative;
  height: 100px !important;
  z-index: 1000;
}

.h-fx {
  height: 100% !important
}

.fxxx {
  font-size: 1.95rem !important;
}

.m-f {
  margin-top: 3em !important;
}

.da-block {
  display: block;
}

.cd-morph-dropdown .morph-dropdown-wrapper {
  top: 100px !important;
}

.hide-hide {
  display: none;
}

.pd-fx {
  padding: none !important;
}

.hight-fx {
  height: auto !important;
  padding-bottom: 2em;
}

.betn {
  background: #ff7101 !important;
  margin-top: 1em;
  border-radius: 40px !important;
  width: 330px;
  color: #fff !important;
}

.font-correct-small {
  width: 100% !important;
}

.nobg-img {
  background-image: none !important;
}

.hide-pon-mobile {
  display: none;
}

.font-correct-big {
  width: 100% !important;
  font-size: 5em !important;
}

.text-scr {
  font-size: 4em !important;
}

.wedth {
  width: 100% !important;
}

.jusibe-fx {
  height: 40%;
}

.lowks {
  text-align: center !important;
  margin: 0 auto !important;
}

.hero-f {
  height: 100% !important;
  padding-bottom: 5px !important
}

.full-fix {
  width: 100% !important
}

.line-but {
  width: 100%;
}

.newboys {
  margin: 0 auto;
  text-align: center;
}

.fot-fx {
  font-size: 2.5em;
}

.sp-op {
  display: none;
}

.no-marg-top {
  margin-top: 0em !important;
}

.width-mobile {
  width: 100% !important;
}

.floot-none {
  float: none !important;
  text-align: center;
  margin: 0 auto;
  padding-top: 1em
}

.item-header {
  margin-top: 31em;
}

.iitem-footer button {
  width: 100%;
}

.hyde {
  display: none !important;
}


.hhyde {
  display: block;
}

html {
  overflow: none;
}

body {
  overflow: none
}

.no-disp {
  visibility: hidden;
}

}

@media only screen and (max-width: 64em) {
  .hyde {
    display: none !important;
  }

  html {
    overflow: none;
  }

  body {
    overflow: none
  }

  .no-disp {
    visibility: hidden;
  }

  .magin-mob {
    margin: 0 auto;
    padding-bottom: 1em
  }

  .magin-mob-alt {
    margin: 0 auto;
    margin-bottom: 1.5em
  }

  .floot-none {
    float: none !important;
    text-align: center;
    margin: 0 auto;
    padding-top: 1em
  }
}

.cera-medium {
  font-family: 'Cera-Medium';
}

.cera-regular {
  font-family: 'Cera-Regular';
}

.cera-bold {
  font-family: 'Cera-Bold';
}

.item-footer-alt button {
  background: #ec5829;
  width: 220px;
  padding: 1.5vh 0;
  color: #fff;

  border-radius: 35px;
  transition: all 0.8s ease;
  font-family: 'Cera-Medium';
  font-size: 18px;
}

.item-footer-alt button:hover {
  background: rgba(255, 255, 255, 1);
  color: #000;
}




.services-btns-box {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
}

.services-btns,
.services-btns2 {
  border-radius: 50%;
  background: #fff;
  height: 8.5vh;
  width: 8.5vh;
  color: #000;
  font-size: 5vh;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
}

.services-btns3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: skyblue;
  height: 8.5vh;
  width: 8.5vh;
  color: #034c45;
  font-size: 5vh;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;

}

.services-btns4 {
  position: absolute;
  bottom: 5%;
  right: 5%;
  border-radius: 50%;
  /* background: skyblue; */
  height: 8.5vh;
  width: 8.5vh;
  color: white;
  font-size: 5vh;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
}




.services-right {
  left: 96%;
}



@media (max-width: 500px) {

  .services-right {
    left: 88%;
  }


}

@media (max-width: 400px) {
  .services-right {
    left: 80%;
  }

  .brands-outer-box {
    position: relative;
    overflow-x: auto;

  }


  .brands-box {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 750%;
    right: 30%;
  }

  .single-brand-box {
    width: 80%;
    /* border-right: 1px solid white; */
  }

  .services-btns2 {
    visibility: visible;
  }

}



/* Make full width on small screens */
@media (max-width: 768px) {
  #bottom-player .bp-inner {
    width: 100%;
    margin: 0;
    /* remove auto centering so it spans edge-to-edge */
    border-radius: 0;
    /* optional, so edges touch screen sides */
  }
}



/* Mobile view adjustment */
@media (max-width: 600px) {
  .profile-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "avatar"
      "main"
      "actions";
    text-align: center;
    /* optional, for nicer alignment */
  }

  .pc-avatar {
    margin-inline: auto;
    /* center avatar */
  }

  .pc-actions {
    justify-self: center;
    margin-top: 10px;
    bottom: 31px;
    left: 0px;
    right: 0px;
  }
}
}