.demo-hero {
	border-radius:0px!important;
	padding: 0px!important;
    min-height: 130px!important;
}

.headersection{
	padding-top: 110px!important
}

.demo-hero .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}


.demo-hero p {
	max-width:100%!important;
}

@media (max-width: 700px) {
	.headersection{
		padding-top: 80px!important;
	}
}


/*video*/
/* .imgfeat {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: stretch;
	position: relative;
}

@media (max-width: 900px) {
	.imgfeat {
	  grid-template-columns: 1fr;
	}
} */

.prodfeat__img img {
    width: 110%;      /* scale beyond container */
    max-width: 142%;
    height: auto;
    transform: scale(1.1);
	margin-top: 35px;
}

@media (max-width: 767px) {
	.prodfeat__img img {
		width: 110%;
        max-width: 142%;
        height: auto;
        /*transform: scale(1.1);
        top: 9px;*/
        position: relative;
	}
}

.imgfeat {
	display: grid;
	/* Change from 1fr 1fr to 7fr 3fr (70% / 30%) */
	grid-template-columns: 7fr 3fr;
	gap: 24px;
	align-items: stretch;
	position: relative;
}

@media (max-width: 900px) {
	.imgfeat {
	  grid-template-columns: 1fr; /* Retains 100% full width on mobile */
	}
}

.stepdesc{
	font-size:32px;
}

@media (max-width: 767.98px) {
	/* .stepdesc{
		font-size: inherit;
	} */
}

#video{
	background: #eef0fb;
}

.video-card {
    width: 100%;
    padding: 0;
    overflow: hidden;
	min-height:auto;
}

.video-card iframe {
    display: block;
    width: 100%;
    height: 600px; /* Adjust as needed */
    border: 0;
}

@media (max-width: 767.98px) {
    .video-card iframe {
        height: 240px;
    }
}

/* Panel */
/* .imgfeat__panel {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	margin: 0 !important;
	border-radius: 20px;
	height: 100%;
	z-index: 1;
}
 */

/*elements*/
/* Elements card */
.elements-card {
	background: #ffffff;
	border-radius: 20px;
	padding: 32px;
	box-shadow: 0 10px 30px rgba(19, 26, 61, 0.06);
}

.elements-card__title {
	font-size: 1.3rem;
	font-weight: 800;
	margin: 0 0 24px;
}

.element-row {
	display: flex;
	align-items: flex-start;
	/* gap: 16px; */
	gap: 5px;
	margin-bottom: 22px;
}

.element-row:last-of-type {
	margin-bottom: 28px;
}

.element-icon {
	flex-shrink: 0;
	width: 44px;
	/* height: 44px; */
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* .element-icon--sparkle { background: #3d3df5; }
.element-icon--myt-viv { background: #a8d92e; }
.element-icon--myt-serye { background: #14c4c4; } */

.element-icon svg {
	/* width: 20px;
	height: 20px; */
	width: 30px;
	height: 30px;
}

/* .element-info h3 {
	margin: 0 0 4px;
	font-size: 1.05rem;
	font-weight: 700;
} */

/* .element-info p {
	margin: 0;
	font-size: 0.92rem;
	color: #6b7080;
	line-height: 1.4;
} */

/* Responsive */
@media (max-width: 520px) {
	.elements-card {
	  padding: 24px;
	}
}

/* Reduced motion / focus visibility */
a:focus-visible {
	outline: 2px solid #3d3df5;
	outline-offset: 2px;
}

/*form*/

#entry, #entry *{ box-sizing:border-box; }
#entry{
  /* background:#eef0fb; */
  background:$fff;
  padding:40px 16px 80px;
}
#entry .qa-wrap{ max-width:1190px; margin:0 auto; }

#entry .qa-h1{
  font-size:38px !important;
  margin:0 0 10px !important;
  font-weight:500 !important;
  letter-spacing:-0.5px !important;
  line-height:1.15 !important;
  color:#14142b !important;
  font-family: inherit !important;
}
#entry .qa-lead{

  font-size:18px !important;
  /* max-width:560px; */
  line-height:1.5 !important;
  font-family: inherit !important;
}
#entry .qa-lead b{ color:#14142b; }

/* progress bar */
#entry .qa-progress-card{
  background:#ffffff;
  border-radius:16px;
  padding:18px 22px;
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:22px;
  flex-wrap:wrap;
}
#entry .qa-progress-left{ display:flex !important; align-items:center; gap:16px; flex-wrap:wrap; }
#entry .qa-progress-total{ font-weight:700 !important; font-size:14px; white-space:nowrap; color:#14142b; }
#entry .qa-progress-total span{ color:#3d33d6; }
#entry .qa-dots{ display:flex !important; gap:8px; }
#entry .qa-dot{
  width:26px; height:26px;
  border-radius:8px;
  background:#e2e4f5;
  transition:background .2s ease;
  flex-shrink:0;
}
#entry .qa-dot.filled{ background:#3d33d6; }
#entry .qa-remaining{ font-weight:700 !important; font-size:13px; color:#3d33d6; white-space:nowrap; }
#entry .qa-remaining.zero{ color:#1f9d5a; }
#entry .qa-remaining.over{ color:#e0574c; }

/* generic card */
#entry .qa-card{
  /* background:#ffffff; */
  background:#eef0fb;
  border-radius:50px;
  margin-bottom:22px;
}

/* #entry .qa-card h3{
  font-size:19px !important;
  margin:0 0 4px !important;
  font-weight:700 !important;
  letter-spacing:normal !important;
  color:#14142b !important;
  font-family: inherit !important;
  line-height:1.3 !important;
} */

#entry .qa-card .qa-sub{
  color:#6b7086 !important;
  font-size:16px !important;
  margin:0 0 18px !important;
  font-family: inherit !important;
}

/* -----------------------
   Finds list ("What did you spot, and when?")
   ----------------------- */
#entry #findsCard .qa-lead{
  margin:0 0 20px !important;
}
#entry #findsCard .qa-lead em{
  color:#14142b;
  font-style:italic;
  font-weight:bold;
}

#entry #findsList{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:16px;
}

/* Each timestamp row: [number badge] [label] [MIN:SEC group - centered] [remove] */
/* Fixed column widths (not auto) are important here: each .qa-find-row is its
   own independent grid, so if columns sized to content, rows with different
   label text ("1st appearance" vs "10th appearance") would produce different
   column boundaries and the centered box would drift out of alignment
   between rows. Fixed widths guarantee identical boundaries on every row. */
#entry .qa-find-row{
  display:grid !important;
  grid-template-columns:34px 230px 1fr 40px;
  align-items:center;
  gap:16px;
  padding:14px 18px;
  background:#ffffff;
  border-radius:16px;
}

/* numbered blue badge */
#entry .qa-find-num{
  flex:0 0 34px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#153ED9;
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:15px;
}

#entry .qa-find-info{
  min-width:0;
}

#entry .qa-find-label{
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display:block;
  font-size:18px;
  color:#14142b;
}

/* MIN / SEC input group */
#entry .qa-find-time-group{
  display:flex;
  align-items:center;
  gap:10px;
  border:1.5px solid #e2e4f5;
  border-radius:14px;
  /* padding:8px 32px; */
  padding:8px 140px;
  background:#ffffff;
  justify-self:center;
}

#entry .qa-time-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}

#entry .qa-time-box-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  color:#9aa0b4;
}

#entry .qa-time-box input{
  width:44px;
  border:none;
  outline:none;
  text-align:center;
  font-size:20px;
  font-weight:700;
  color:#14142b;
  background:transparent;
  padding:0;
  color-scheme:light;
  -webkit-text-fill-color:#14142b;
}

#entry .qa-time-box input:focus{
  outline:none;
}

#entry .qa-time-box input.invalid{
  color:#e0574c;
  -webkit-text-fill-color:#e0574c;
}

#entry .qa-time-sep{
  font-size:18px;
  font-weight:700;
  color:#c2c6dc;
  margin-top:14px; /* aligns with the digits, below the MIN/SEC labels */
}

/* trash / remove button */
#entry .qa-find-remove{
  width:40px;
  height:40px;
  border:none;
  background:#f1f2f8;
  color:#6b7086;
  font-size:16px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  justify-self:end;
  transition:background .15s ease, color .15s ease;
}

#entry .qa-find-remove svg{
  width:18px;
  height:18px;
}

#entry .qa-find-remove:hover{
  background:#fdeceb;
  color:#e0574c;
}

#entry .qa-find-remove:disabled{
  opacity:.35;
  cursor:not-allowed;
}

#entry .qa-add-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1.5px solid #153ED9;
  background:#ffffff;
  color:#153ED9;
  font-weight:700;
  font-size:15px;
  padding:12px 22px;
  border-radius:999px;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}

#entry .qa-add-btn::before{
  content:"+";
  flex:0 0 20px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#153ED9;
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  line-height:1;
}

#entry .qa-add-btn:hover:not(:disabled){
  background:#eef1fb;
  border-color:#3d33d6;
}

#entry .qa-add-btn:disabled{
  color:#b8bfdc;
  border-color:#e6e8f5;
  cursor:not-allowed;
}

#entry .qa-add-btn:disabled::before{
  background:#b8bfdc;
}

/* Tip line below the finds card (e.g. "Tip: Pause the video when you spot the phrase.") */
#entry .qa-tip-line{
  text-align:center;
  margin:18px 0 0 !important;
  font-size:15px !important;
  color:#5b6072 !important;
  font-family:inherit !important;
}

#entry .qa-tip-label{
  color:#153ED9;
  font-weight:700;
}

/* -----------------------
   Tiebreaker
   ----------------------- */
#entry .qa-tiebreaker{
  margin-top:24px;
  padding-top:20px;
  border-top:1px dashed #e6e8f5;
}

#entry .qa-tiebreaker h4{
  display:flex;
  align-items:baseline;
  gap:6px;
  font-size:16px !important;
  font-weight:700 !important;
  color:#14142b !important;
  margin:0 0 10px !important;
}

#entry .qa-optional{
  font-weight:500;
  font-size:14px;
  color:#8b90ab;
}

#entry .qa-input{
  width:100%;
  height:48px;
  border:1px solid #e2e4f5;
  border-radius:12px;
  background:#ffffff;
  padding:0 16px;
  font-size:16px;

  color:#000;
  color-scheme:light;
  -webkit-text-fill-color:#14142b;
}

#entry .qa-input::placeholder{ color:#000 !important; opacity:1; -webkit-text-fill-color:#000 !important; }

/* Textarea variant (tiebreaker) — lets the placeholder wrap instead of being clipped on mobile */
#entry .qa-input--textarea{
  height:auto;
  min-height:48px;
  padding:12px 16px;
  line-height:1.4;
  resize:none;
  white-space:pre-wrap;
  font-family:inherit;
}

#entry .qa-input:focus{
  outline:none;
  border-color:#3d33d6;
  box-shadow:0 0 0 3px rgba(61,51,214,.12);
}

#entry .qa-hint{
  color:#000 !important;
  font-size:16px !important;
  margin:8px 0 0 !important;
  padding-top:20px;
}

/* -----------------------
   Mobile (< 480px)
   ----------------------- */
@media (max-width:480px){
  #entry .qa-find-row{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:
      "num label remove"
      "time time time";
    row-gap:10px;
    padding:14px;
  }
  #entry .qa-find-num{
    grid-area:num;
  }
  #entry .qa-find-info{
    grid-area:label;
  }
  #entry .qa-find-remove{
    grid-area:remove;
  }
  #entry .qa-find-time-group{
    grid-area:time;
    justify-self:center;
    padding:8px 20px;
  }
  #entry .qa-find-label{
    font-size:16px;
  }
}

/* details form */
#entry .qa-field{ margin-bottom:18px; }
#entry .qa-field label{ display:block !important; font-size:24px; margin-bottom:6px; color:#14142b; }
#entry .qa-field label .qa-req{ color:#e0574c; }
#entry .qa-field input[type="text"],
#entry .qa-field input[type="email"],
#entry .qa-field input[type="tel"]{
  width:100% !important;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #e6e8f5;
  font-size:16px;
  outline:none;
  background:#fff;
  color:#000;
  font-family:inherit !important;
}
#entry .qa-field input:focus{ border-color:#3d33d6; box-shadow:0 0 0 3px rgba(61,51,214,.12); }
#entry .qa-field input.invalid{
  border-color:#e0574c;
  background:#fff8f8;
}
#entry .qa-field-error{ color:#e0574c; font-size:12.5px; margin-top:4px; display:none; }
#entry .qa-field-error.show{ display:block; }
#entry .qa-two-col{ display:grid !important; grid-template-columns:1fr 1fr; gap:20px 24px; }
@media (max-width:620px){ #entry .qa-two-col{ grid-template-columns:1fr !important; } }

#entry .qa-checkbox-row{ display:flex !important; align-items:flex-start; gap:10px; margin:6px 0 24px; font-size:16px; color:#14142b; }
#entry .qa-checkbox-row input{ margin-top:3px; width:16px; height:16px; accent-color:#3d33d6; flex-shrink:0; }
#entry .qa-checkbox-row a{ color:#153ED9; font-weight:700; text-decoration:none; }
#entry .qa-checkbox-row a:hover{ text-decoration:underline; }

#entry .qa-actions{ display:flex !important; justify-content:flex-end; gap:12px; margin-top:6px; flex-wrap:wrap; }
#entry .qa-btn{
  border:none;
  border-radius:999px;
  padding:13px 24px;
  font-weight:700 !important;
  font-size:14.5px;
  cursor:pointer;
  font-family:inherit !important;
}
#entry .qa-btn-reset{ background:#fff; color:#14142b; border:1px solid #e6e8f5; }
#entry .qa-btn-reset:hover{ background:#f5f6fd; }
#entry .qa-btn-submit{ background:#153ED9; color:#fff; }
#entry .qa-btn-submit:hover{ background:#241f8f; }
#entry .qa-btn-submit:disabled{ background:#b9b6f2; cursor:not-allowed; }

#entry .qa-banner{
  display:none;
  background:#e9f9ef;
  color:#1f9d5a;
  border-radius:12px;
  padding:16px 22px;
  font-weight:700;
  font-size:14px;
  margin-bottom:22px;
}
#entry .qa-banner.show{ display:block; }
#entry .qa-banner.error{ background:#fdeceb; color:#e0574c; border:1px solid #f6c9c4; }
#entry .qa-banner ul{ margin:0; padding:0; list-style:none; }
#entry .qa-banner li + li{ margin-top:6px; }

#entry .qa-stepper.invalid{
  border-color:#e0574c;
  box-shadow:0 0 0 3px rgba(224,87,76,.18);
}

/* success popup modal */
#entry .qa-modal-overlay{
  display:none;
  position:fixed; inset:0;
  background:rgba(20,20,43,0.45);
  align-items:center; justify-content:center;
  padding:20px;
  z-index:1000;
}
#entry .qa-modal-overlay.show{ display:flex !important; }
#entry .qa-modal-box{
  background:#fff;
  border-radius:20px;
  padding:36px 32px 28px;
  max-width:380px; width:100%;
  text-align:center;
  box-shadow:0 20px 60px rgba(20,20,43,.25);
}
#entry .qa-modal-icon{
  width:56px; height:56px;
  border-radius:50%;
  background:#e6f8ee;
  color:#1f9d5a;
  font-size:26px;
  display:flex !important; align-items:center; justify-content:center;
  margin:0 auto 18px;
}
#entry .qa-modal-box h3{ margin:0 0 8px !important; font-size:20px !important; font-weight:800 !important; color:#14142b !important; }
#entry .qa-modal-box p{ margin:0 0 22px !important; color:#6b7086 !important; font-size:14px; line-height:1.5; }
#entry .qa-modal-box .qa-btn-submit{ width:100%; }

@media (max-width:768px){

  #entry .qa-stepper button{
    width:38px;
    height:38px;
    font-size:20px;
  }

  #entry .qa-stepper .qa-count{
    width:46px;
    height:38px;
    font-size:16px;
  }

  #entry .qa-time-input{
    width:100%;
    max-width:260px;
  }

  #entry .qa-time-input input{
    font-size:20px;
  }

}

/* Offsets sticky/fixed headers so the section isn't hidden behind a top menu */
#conditions {
  scroll-margin-top: 80px;
}

.conditions li{
	font-size:16px!important;
}


/* Footer Container Styling */
.site-footer {
  background-color: #080718; /* Dark navy background */
  color: #4b629b; /* Soft muted blue text */
  padding: 24px 80px;
  font-size: 14px;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

/* Copyright text */
.copyright {
  margin: 0;
  color: #fff;
}

/* Links Section */
.footer-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-links a {
  color: #ffffff; /* Bright white links */
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.footer-links a:hover {
  text-decoration: underline;
  opacity: 0.8;
}

.separator {
  color: #ffffff;
  font-weight: bold;
}

.pt-8-big{
	padding-top: 6rem !important;
}

.pb-6-big{
	padding-bottom: 4rem !important;
}


/* Responsive adjustment for small screens */
@media (max-width: 600px) {
  .footer-container {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  .pt-8-big{
	padding-top: 0rem !important;
  }
  .pb-6-big{
	padding-bottom: 0rem !important;
  }
}

.small-fs-14{
	font-size:14px!important;
}

.imgfeat__panel {
	border-radius: 50px!important;
}


.font01 {
    display: block !important;
    font-size: 24px;
    margin-bottom: 6px;
    color: #14142b;
}
.quickactionsicon-circle {
    flex: 0 0 44px;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.svg-mask {
    display: inline-block;
    width: 84px;
    height: 84px;
    background-color: #3355fc !important;
    -webkit-mask-image: var(--glow-icon-mask);
    mask-image: var(--glow-icon-mask);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

#entry .qa-btn-whatsapp{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:#25D366;
  color:#ffffff;
  width:100%;
  margin-bottom:12px;
  text-decoration:none;
  box-sizing:border-box;
}

#entry .qa-btn-whatsapp:hover{
  background:#1ebc59;
  color:#ffffff;
}