/* =============================================================
   StreamPlay — style.css
   Single unified stylesheet for all pages.

   CONTENTS:
   ── Sections 1–32  : Main page styles (index.html)
   ── Section 33+    : Contact page styles (contact.html)

   Usage:
     <link rel="stylesheet" href="assets/css/style.css">
   ============================================================= */

/* =============================================================
   StreamPlay - Main Stylesheet
   Consolidated from 30 inline style blocks (browser inspect)
   Organized into logical sections for easy maintenance
   ============================================================= */


/* =============================================================
   SECTION 1: FONT FACES
   proxima-nova via Adobe Typekit
   ============================================================= */

@font-face {
  font-family: proxima-nova;
  src: url("https://use.typekit.net/af/e3ed45/00000000000000007735e602/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff2"),
       url("https://use.typekit.net/af/e3ed45/00000000000000007735e602/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff"),
       url("https://use.typekit.net/af/e3ed45/00000000000000007735e602/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 900;
  font-stretch: normal;
}

@font-face {
  font-family: proxima-nova;
  src: url("https://use.typekit.net/af/2555e1/00000000000000007735e603/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),
       url("https://use.typekit.net/af/2555e1/00000000000000007735e603/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),
       url("https://use.typekit.net/af/2555e1/00000000000000007735e603/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
}

@font-face {
  font-family: proxima-nova;
  src: url("https://use.typekit.net/af/8738d8/00000000000000007735e611/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3") format("woff2"),
       url("https://use.typekit.net/af/8738d8/00000000000000007735e611/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3") format("woff"),
       url("https://use.typekit.net/af/8738d8/00000000000000007735e611/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3") format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 800;
  font-stretch: normal;
}

@font-face {
  font-family: proxima-nova;
  src: url("https://use.typekit.net/af/78aca8/00000000000000007735e60d/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"),
       url("https://use.typekit.net/af/78aca8/00000000000000007735e60d/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"),
       url("https://use.typekit.net/af/78aca8/00000000000000007735e60d/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 600;
  font-stretch: normal;
}

@font-face {
  font-family: proxima-nova;
  src: url("https://use.typekit.net/af/efe4a5/00000000000000007735e609/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),
       url("https://use.typekit.net/af/efe4a5/00000000000000007735e609/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),
       url("https://use.typekit.net/af/efe4a5/00000000000000007735e609/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
}

@font-face {
  font-family: proxima-nova;
  src: url("https://use.typekit.net/af/1be3c2/00000000000000007735e606/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2"),
       url("https://use.typekit.net/af/1be3c2/00000000000000007735e606/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff"),
       url("https://use.typekit.net/af/1be3c2/00000000000000007735e606/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 300;
  font-stretch: normal;
}

.tk-proxima-nova {
  font-family: proxima-nova, sans-serif;
}


/* =============================================================
   SECTION 2: CSS RESET & BASE
   ============================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  font-family: "proxima-nova", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 23px;
  letter-spacing: 0.2px;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Block-level semantic elements */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

/* Headings */
h1, h2, h3, h4, h5, h6, p, span {
  font-weight: inherit;
}

h1, h4, h5, h6 {
  margin: 0;
  line-height: normal;
  font-family: proxima-nova, sans-serif;
  font-weight: 600;
}

h2, h3 {
  margin: 0;
  line-height: normal;
  font-family: proxima-nova, sans-serif;
  font-weight: 700;
}

p {
  line-height: 26px;
  letter-spacing: 0.4px;
  color: #131313;
  font-size: 16px;
}

/* Lists */
ol, ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Tables */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Links */
a {
  text-decoration: none;
}

a:focus {
  outline: 0;
}

/* Images & media */
img, video {
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto;
}

img {
  display: block;
}

/* Italic */
i {
  font-style: normal;
}

em {
  font-style: italic;
}

/* Blockquotes */
blockquote, q {
  quotes: none;
}

blockquote::before, blockquote::after,
q::before, q::after {
  content: "";
  content: none;
}

/* Forms */
form {
  margin: 0;
}

button, input, select, textarea {
  margin: 0;
  font-size: 100%;
  vertical-align: middle;
  font-family: proxima-nova, sans-serif;
}

button, input {
  overflow: visible;
  line-height: normal;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

button {
  cursor: pointer;
  appearance: button;
}

button, select {
  cursor: pointer;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  appearance: none;
}

input:focus,
textarea:focus {
  outline: 0;
}

label {
  display: block;
  margin-bottom: 5px;
}

/* Form field base sizing */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime-local"],
input[type="color"],
textarea,
select {
  display: inline-block;
  border-radius: 0;
  box-shadow: none;
  font-size: 16px;
  margin: 0;
  padding: 6px 8px;
  border: 1px solid #ccc;
  color: #000;
  width: 100%;
}

select {
  box-sizing: border-box;
  background-color: #fff;
  height: 30px;
  margin-top: 4px;
  line-height: 30px;
  appearance: none;
}

select::-ms-expand {
  display: none;
}

input[type="button"],
input[type="checkbox"],
input[type="file"],
input[type="image"],
input[type="radio"],
input[type="reset"],
input[type="submit"] {
  width: auto;
}

audio, canvas, video {
  display: inline-block;
}


/* =============================================================
   SECTION 3: GLOBAL UTILITIES & LAYOUT
   ============================================================= */

.container {
  width: 1225px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.clear {
  clear: both;
}

.clearfix {
  clear: both;
  zoom: 1;
}

.clearfix::before,
.clearfix::after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix::after {
  clear: both;
}

/* Font weight helpers */
.light    { font-family: proxima-nova, sans-serif; font-weight: 300; }
.regular  { font-family: proxima-nova, sans-serif; font-weight: 400; }
.semi     { font-family: proxima-nova, sans-serif; font-weight: 600; }
.bold     { font-family: proxima-nova, sans-serif; font-weight: 700; }
.extrabold{ font-family: proxima-nova, sans-serif; font-weight: 800; }
.black    { font-family: proxima-nova, sans-serif; font-weight: 900; }
.titlefont  { font-family: proxima-nova, sans-serif; font-weight: 600; }
.boldfont   { font-family: proxima-nova, sans-serif; font-weight: 600; }
.regularfont{ font-family: proxima-nova, sans-serif; font-weight: 800; }

/* Margin helpers */
.ml0    { margin-left: 0; }
.mlauto { margin-left: auto; }

/* Width helpers */
.w70  { width: 68%;  margin: 0 auto; }
.w80  { width: 80%  !important; margin: 0 auto; }
.w90  { width: 90%  !important; margin: 0 auto; }
.w98  { width: 98%;  margin: 0 auto; }
.pb0  { padding-bottom: 0; }

/* Misc */
.model-open { overflow: hidden; position: relative; height: 100%; }
#contact_error { color: red; }
#ajx-loader    { vertical-align: middle; margin-left: 12px; }
#resp          { display: none; }
li.no-margin   { margin: 0 !important; }


/* =============================================================
   SECTION 4: BUTTONS
   ============================================================= */

.button {
  min-width: 133px;
  height: 55px;
  display: inline-block;
  background: #fb7d17;
  border-radius: 3px;
  color: #fff;
  text-align: center;
  font-size: 18px;
  line-height: 55px;
  padding: 0 30px;
  border: none;
  text-transform: none;
  margin: 20px 0 0;
  position: relative;
  z-index: 1;
  box-shadow: 8px 9px 27px 0 rgba(5, 122, 171, 0.2);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.button:focus,
button:focus {
  outline: 0;
}

.button:hover {
  background: #f56f01;
  box-shadow: 0 4px 8px 0 rgba(5, 122, 171, 0.2),
              0 6px 20px 0 rgba(5, 122, 171, 0.19);
  transition: 0.5s box-shadow ease;
}

.button:hover::before {
  opacity: 1;
}

/* Talk to us variant */
.button.talk-to-us {
  min-width: 234px;
  font-weight: 600;
  margin-right: 10px;
  transition: all ease 0.3s;
}

.button.talk-to-us::after {
  content: url(assets/images/new-home/arrow-right.svg);
  line-height: 0;
  display: inline-block;
  opacity: 0;
  transition: all 0.4s;
  width: 0;
  position: relative;
  top: 5px;
}

.button.talk-to-us:hover::after {
  margin-left: 8px;
  opacity: 1;
  width: 20px;
}

/* Secondary outline variant */
.button.secondary {
  border: solid 1px #FA7D18;
  background: transparent;
  color: #FA7D18;
  min-width: 230px;
  font-weight: 600;
  box-shadow: 8px 9px 27px 0 rgba(5, 122, 171, 0.25);
  transition: all ease 0.2s;
}

.button.secondary::after {
  content: url(assets/images/new-home/arrow-bold.svg);
  line-height: 0;
  display: inline-block;
  opacity: 0;
  transition: all 0.4s;
  width: 0;
  position: relative;
  top: 5px;
}

.button.secondary:hover::after {
  margin-left: 8px;
  opacity: 1;
  width: 20px;
}

.button.secondary.outline {
  border: solid 1px #fff;
  color: #fff;
}

.button.secondary.outline::after {
  content: url(assets/images/new-home/arrow-right.svg);
}

.button.secondary.alt {
  border: solid 1px #000;
  color: #000;
  background: transparent;
}

/* Border only variant */
.button.border-only {
  border: solid 1px #fb7d17;
  font-weight: 600;
  color: #fb7d17;
  background: transparent;
}

.button.border-only:hover {
  background: #fb7d17;
  color: #fff;
  border: solid 1px transparent;
}

/* Button with embedded video */
.button.secondary video {
  display: inline;
  width: 80px;
  height: auto;
  vertical-align: middle;
  position: relative;
  bottom: 2px;
}

/* Centered button block */
.btn-center {
  text-align: center;
}

.btn-center .button {
  margin: 40px auto 0;
}

/* Button link (text link with arrow) */
.button-link {
  font-size: 18px;
  line-height: 26px;
  display: inline-block;
  font-family: proxima-nova, sans-serif;
  font-weight: 700;
  color: #1967d2;
  margin-top: 30px !important;
  height: 43px;
  vertical-align: middle;
}

.button-link i {
  display: inline-block;
  vertical-align: middle;
}

.button-link i svg {
  width: 20px;
  height: 20px;
  margin: 7px 0 0 5px;
  fill: #1967d2;
  transition: transform ease 0.4s;
}

.button-link:hover svg {
  transform: translateX(5px);
}

.button-link.clr       { color: #fff !important; }
.button-link.clr svg   { fill: #fff !important; }
.button-link.clrb      { color: #000 !important; }
.button-link.clrb svg  { fill: #000 !important; }

.card-content .button-link { margin-top: 0; }

/* CTA link variants */
a.link {
  font-size: 18px;
  font-weight: 600;
  margin: 0 10px 0 0;
  background-color: #0042FF;
  color: #fff;
  text-align: center;
  border-radius: 8px;
  max-height: 48px;
  padding: 15px 25px;
  text-decoration: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transition: all ease 0.5s;
}

a.link svg {
  margin-left: 5px;
  transition: all ease 0.5s;
  position: relative;
  left: 0;
}

a.link:hover svg { left: 5px; }

a.links {
  font-size: 18px;
  font-weight: 700;
  color: #1967d2;
  margin: 0;
}

a.links svg {
  margin-left: 5px;
  transition: all ease 0.5s;
  position: relative;
  left: 0;
}

a.links:hover svg { left: 5px; }

/* Responsive buttons */
@media (max-width: 480px) {
  .button.secondary {
    margin: 15px auto 0 auto;
  }
}

@media screen and (max-width: 768px) {
  .button.secondary,
  .button.talk-to-us {
    font-size: 20px;
    margin-bottom: 0;
    width: 85%;
    margin-right: 0;
    height: 50px;
    line-height: 50px;
    font-weight: 700 !important;
  }

  .button.secondary video {
    bottom: 2px;
    width: 55px;
  }
}

@media screen and (max-width: 391px) {
  .button {
    font-size: 16px;
    height: 44px;
    line-height: 46px;
    margin: 5px 0 0;
    padding: 0 20px;
  }
}

@media screen and (max-width: 820px) {
  .button-link {
    font-size: 14px;
    margin: 0 auto;
    text-align: center;
    display: block;
  }
}

@media screen and (max-width: 750px) {
  .button-link i svg {
    width: 15px;
    height: 15px;
  }

  .button-link {
    font-size: 16px;
    margin-top: 15px !important;
  }
}


/* =============================================================
   SECTION 5: SECTION HEADS & LAYOUT CONTAINERS
   ============================================================= */

.section_container {
  padding: 45px 0;
  position: relative;
}

.section-head {
  text-align: center;
  margin-bottom: 50px;
  position: relative;
}

.section-head .section-title {
  font-size: 36px;
  color: #000;
  font-family: proxima-nova, sans-serif;
  font-weight: 700;
  text-transform: capitalize;
  line-height: 40px;
  margin-bottom: 10px;
}

.section-head .section-title span      { color: #000; }
.section-head .section-title span.nocolor { color: #000; }
.flex-col-right .section-title span    { color: #1967d2; }
.section-head p.subtext {
  font-family: proxima-nova, sans-serif;
  font-weight: 600;
  font-size: 20px;
}

.section-subtitle {
  font-size: 20px;
  line-height: 30px;
  font-family: proxima-nova, sans-serif;
  font-weight: 400;
  color: #000;
  max-width: 900px;
  margin: auto;
  margin-bottom: 20px;
}

/* Decorative underline after section titles */
.section-head::after {
  content: '';
  width: 97px;
  height: 2px;
  background: #0453d5;
  position: relative;
  display: block;
  margin: 20px auto 0;
}

.section-head.left-alligned::after {
  content: none;
}

.globalsection {
  position: relative;
  padding: 80px 0;
}

.bg-svgicon {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.6;
}

.flex-center {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex_center {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}

.flex_center a.blue {
  color: #0042ff;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
  margin-top: 20px;
  display: block;
  padding-left: 40px;
}

.flex_center a.blue i {
  position: relative;
  left: 0;
  transition: all ease 0.3s;
}

.animation-box {
  position: relative;
}

.key-feature {
  padding-bottom: 0 !important;
}

img.LoadImg.loading {
  width: 100%;
  height: 100%;
}

/* Responsive section layout */
@media screen and (max-width: 1281px) {
  .container {
    width: 100% !important;
    padding: 0 20px;
  }

  .grid-child {
    padding: 20px;
  }

  .solution-content .solution-text {
    width: 90%;
  }
}

@media screen and (max-width: 1200px) {
  p {
    font-size: 14px;
  }

  .section-head .section-title {
    font-size: 32px;
  }
}

@media screen and (max-width: 1025px) {
  .section-subtitle br,
  .section-head .section-title br {
    display: none;
  }

  .globalsection {
    padding-top: 60px;
  }
}

@media screen and (max-width: 981px) {
  .section_container {
    padding: 25px 0;
  }

  .section-head {
    margin-bottom: 35px;
  }

  .solution-content .solution-text {
    width: 80%;
    text-align: center;
    margin: 0 auto;
  }

  .solution-content .button {
    display: none;
  }

  .app-img {
    width: 100% !important;
  }
}

@media screen and (max-width: 820px) {
  .section-head .section-title {
    font-size: 26px;
    line-height: 34px;
  }

  .section-head {
    margin-bottom: 25px;
  }

  .section_container::after,
  .section_container::before {
    display: none !important;
  }
}

@media screen and (max-width: 641px) {
  .container {
    padding: 0 15px;
  }

  .section-head .section-title {
    font-size: 22px;
  }

  .section-subtitle {
    display: none;
  }

  .section-head {
    margin-bottom: 30px;
  }
}

@media screen and (max-width: 391px) {
  .section-head .section-title {
    font-size: 21px;
  }
}

@media screen and (max-width: 360px) {
  .section-head .section-title {
    font-size: 24px;
  }
}

@media screen and (max-width: 750px) {
  .globalsection {
    padding: 50px 0;
  }
}


/* =============================================================
   SECTION 6: POPUP OVERLAY
   ============================================================= */

.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.52);
  height: 100%;
  width: 100%;
}


/* =============================================================
   SECTION 7: COOKIES BANNER
   ============================================================= */

.cookies-section {
  position: fixed;
  left: 10px;
  bottom: 10px;
  width: 450px;
  padding: 10px 20px;
  height: 50px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 9999;
  border-top: solid 4px #1211de;
  box-shadow: -1px 2px 18px 0 rgba(0, 0, 0, 0.12);
  border-radius: 2px;
}

.cookies-section .left p {
  font-family: proxima-nova, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  color: #000;
}

.cookies-section .left a {
  color: #1211de;
  text-decoration: underline;
}

.cookies-section .right span {
  cursor: pointer;
}

.cookies-section .right span svg {
  width: 13px;
  height: 13px;
  fill: #000;
}

.cookies-section .right button.settings {
  background-color: transparent;
}

@media screen and (max-width: 1025px) {
  .cookies-section {
    width: 50%;
  }
}

@media screen and (max-width: 820px) {
  .cookies-section {
    width: 55%;
    padding: 10px 15px;
  }

  .cookies-section .left p {
    line-height: 20px;
    font-size: 13px;
  }

  .cookies-section .right button {
    font-size: 13px;
    line-height: 16px;
    margin-right: 0;
    margin-left: 10px;
  }
}

@media screen and (max-width: 830px) {
  .cookies-section {
    width: 100%;
    left: 0;
    bottom: 0;
  }
}


/* =============================================================
   SECTION 8: SCROLL ANIMATIONS
   ============================================================= */

/* Initial hidden states - elements start translated down */
.fadeinup1, .fadeinup2, .fadeinup3,
.fadeinup4, .fadeinup5, .fadeinup6, .fadeinup7,
.textup1, .textup2, .textup3,
.textup4, .textup5, .textup6 {
  transform: translate3d(0, 50px, 0);
  transition: all 1s ease;
  opacity: 0;
}

/* Animated state - elements slide into view */
.section-animated .fadeinup1,  .section-animated .fadeinup2,
.section-animated .fadeinup3,  .section-animated .fadeinup4,
.section-animated .fadeinup5,  .section-animated .fadeinup6,
.section-animated .fadeinup7,
.section-animated .fadeindown1, .section-animated .fadeindown2,
.section-animated .fadeindown3,
.section-animated .fadeinleft1, .section-animated .fadeinleft3,
.section-animated .fadeinleft4, .section-animated .fadeinright1,
.section-animated .textup1,    .section-animated .textup2,
.section-animated .textup3,    .section-animated .textup4,
.section-animated .textup5,    .section-animated .textup6 {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Fade in from left */
.section-animated .fadeinleft1,
.section-animated .fadeinleft2,
.section-animated .fadeinleft3,
.section-animated .fadeinleft4 {
  opacity: 1;
  transform: translate3d(-50px, 0, 0);
  transition: all 1s ease;
}

/* Fade in from right */
.section-animated .fadeinright1,
.section-animated .fadeinright2,
.section-animated .fadeinright3,
.section-animated .fadeinright4 {
  opacity: 1;
  transform: translate3d(0, 0, 50px);
  transition: all 1s ease;
}

/* Staggered transition delays */
.fadeinright1, .fadeinleft1, .fadeindown1, .fadeinup1, .textup1 {
  transition-delay: 0.2s;
}

.fadeindown2, .fadeinup2, .textup2 {
  transition-delay: 0.4s;
}

.fadeinleft3, .fadeindown3, .fadeinup3, .textup3 {
  transition-delay: 0.6s;
}

.fadeinleft4, .fadeindown4, .fadeinup4, .textup4 {
  transition-delay: 0.8s;
}

/* Bounce animations for floating elements */
.section-animated .bounce1 { animation: bounce1 5s ease infinite; animation-delay: 1s; }
.section-animated .bounce2 { animation: bounce2 5s ease infinite; animation-delay: 2s; }
.section-animated .bounce3 { animation: bounce3 5s ease infinite; animation-delay: 3s; }
.section-animated .bounce4 { animation: bounce4 5s ease infinite; animation-delay: 1s; }
.section-animated .bounce5 { animation: bounce5 5s ease infinite; animation-delay: 3s; }
.section-animated .bounce6 { animation: bounce6 5s ease infinite; animation-delay: 5s; }
.section-animated .bounce7 { animation: bounce6 5s ease infinite; }

@keyframes bounce1 {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
@keyframes bounce2 {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
@keyframes bounce3 {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
@keyframes bounce4 {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-35px); }
  100% { transform: translateY(0); }
}
@keyframes bounce5 {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-35px); }
  100% { transform: translateY(0); }
}
@keyframes bounce6 {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(-35px); }
  100% { transform: translateX(0); }
}
@keyframes bounce7 {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(-35px); }
  100% { transform: translateX(0); }
}

/* Animated logo list */
.anim-logos {
  position: relative;
}

.anim-logos ul {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 100%;
}

.anim-logos ul li {
  transform: scale(0.2);
  transition: all 0.8s ease-out;
  opacity: 0;
}

.section-animated .anim-logos ul li {
  transform: scale(1);
  opacity: 1;
}

/* Chat bubble slide animations */
.position {
  position: absolute;
  opacity: 0;
  transition: transform 0.3s ease-in-out 0s, opacity 0.3s ease-in-out 0s;
}

.main-image {
  left: 0;
  z-index: 30;
  text-align: center;
  position: relative;
  animation: top-move 0.3s ease-in-out 0.1s forwards;
}

.chat2 {
  z-index: 31;
  top: 20%;
  text-align: right;
  width: auto;
  right: -50px;
}

.chat5 {
  z-index: 31;
  left: -50px;
  right: auto;
  text-align: left;
  bottom: 9%;
  width: auto;
}

.chat6 {
  z-index: 31;
  bottom: -35px;
  text-align: right;
  width: auto;
  right: 100px;
}

.section-animated .chat2 { animation: left-move 0.4s ease-in-out 0.4s forwards; }
.section-animated .chat5 { animation: left-out  0.4s ease-in-out 0.7s forwards; }
.section-animated .chat6 { animation: left-move 0.4s ease-in-out 0.4s forwards; }

@keyframes left-move {
  0%   { opacity: 0; transform: translateX(50px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes left-out {
  0%   { opacity: 0; transform: translateX(0); }
  100% { opacity: 1; transform: translateX(50px); }
}

/* Dots loading animation */
div.dots {
  display: inline-flex;
}

div.dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #000;
  position: relative;
  animation: wave 1.3s linear infinite;
  margin-right: 2px;
}

div.dots span:first-child  { background: #ff0935; }
div.dots span:nth-child(2) { background: #ffd119; animation-delay: -1.1s; }
div.dots span:last-child   { background: #0dcea6; animation-delay: -0.9s; }

@keyframes wave {
  0%, 60%, 100% { transform: initial; }
  30%           { transform: translateY(-10px); }
}


/* =============================================================
   SECTION 9: DARK THEME OVERRIDE (StreamPlay Purple Theme)
   CSS custom properties + cascade overrides
   ============================================================= */

:root {
  --sp-purple:      #491275;
  --sp-purple-hover:#360d57;
  --sp-purple-soft: rgba(73, 18, 117, 0.12);
  --sp-bg:          #0a0a0a;
  --sp-surface:     #141414;
  --sp-surface-2:   #1c1c1c;
  --sp-border:      #262626;
  --sp-text:        #f5f5f5;
  --sp-muted:       #a3a3a3;
}

body {
  background: var(--sp-bg) !important;
  color: var(--sp-text) !important;
}

/* Header */
header.header,
#streamplay-menu-new,
#vplayed-menu-new {
  background: #0a0a0a !important;
  box-shadow: 0 1px 0 #1a1a1a !important;
}

.streamplay-menu .nav-menu li.dropmenu-new > a,
.vplayed-menu .nav-menu li.dropmenu-new > a {
  color: #f5f5f5 !important;
}

.streamplay-menu .nav-menu li.dropmenu-new > a svg,
.vplayed-menu .nav-menu li.dropmenu-new > a svg {
  fill: #f5f5f5 !important;
}

#ham span {
  background: #f5f5f5 !important;
}

/* Primary CTA buttons */
.button,
.button.talk-to-us,
.button.ripple,
.streamplay-menu .nav-menu .expert #sales-header,
.vplayed-menu .nav-menu .expert #sales-header,
.new-sticky ul li a,
.floating-cta a,
.scroll-cta-button,
#ads-submit-button,
input.hs-button.primary.large,
.demo-form .hs-button.primary,
.get_started a,
.contents a,
.mid-cta a,
.cta-com a {
  background: var(--sp-purple) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(73, 18, 117, 0.25) !important;
  border-color: var(--sp-purple) !important;
}

.button:hover,
.button.talk-to-us:hover,
.floating-cta a:hover,
.scroll-cta-button:hover,
.new-sticky ul li a:hover,
.get_started a:hover,
.cta-com a:hover {
  background: var(--sp-purple-hover) !important;
  box-shadow: 0 10px 28px rgba(73, 18, 117, 0.35) !important;
}

/* Secondary / outline CTAs */
.button.secondary,
.button.secondary.outline,
.button.border-only,
.streamplay-menu .nav-menu .expert a.request-demo,
.vplayed-menu .nav-menu .expert a.request-demo,
#sticky1 {
  background: transparent !important;
  color: var(--sp-purple) !important;
  border: 1px solid var(--sp-purple) !important;
  box-shadow: none !important;
}

.button.secondary.outline {
  color: #fff !important;
  border-color: #fff !important;
}

.button.secondary:hover,
.button.border-only:hover,
.streamplay-menu .nav-menu .expert a.request-demo:hover,
.vplayed-menu .nav-menu .expert a.request-demo:hover {
  background: var(--sp-purple) !important;
  color: #fff !important;
}

/* Section backgrounds */
#clients,
.section_container,
#playersection,
#test,
#faq-block,
.footer {
  background: var(--sp-bg) !important;
}

.sip-bg,
.sip-bg.blackbg,
.vip-bg {
  background: linear-gradient(135deg, #0a0a0a 0%, #141414 100%) !important;
}

.monetize {
  background: linear-gradient(135deg, #150420 0%, #0a0a0a 60%, #150420 100%) !important;
  background-color: #0a0a0a !important;
}

.amazon-banner.video-solution::before { background: #0a0a0a !important; }
.video-banner                          { background: #0a0a0a; }

/* Typography on dark background */
.section-head .section-title,
.section-head .section-title span,
.section-head .section-title span.nocolor,
.section-subtitle,
.our-clients h2,
.player-wrapper h3,
.player-wrapper h5,
.card-content h4,
.user-wrap div strong,
.h5.accordion,
.central-left h4,
.central-left ul li,
.middle-left h3,
.middle-left p,
.form-title {
  color: #f5f5f5 !important;
}

.section-subtitle,
.panel p,
.user-wrap div span,
.testimonial-section p,
.player-wrapper p,
.card-content p {
  color: #cbcbcb !important;
}

.section-head::after { background: var(--sp-purple) !important; }

/* Brand gradient text */
#sub,
#sub strong {
  background-image: linear-gradient(90deg, #a78bfa, #c084fc, #e9d5ff) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.amazon-banner .banner-heading h1 cite,
.amazon-banner .banner-heading h1 cite span {
  color: #f5f5f5 !important;
  -webkit-text-fill-color: #f5f5f5 !important;
}

.flex-col-right .section-title span {
  color: var(--sp-purple) !important;
  -webkit-text-fill-color: var(--sp-purple) !important;
}

.section-title ul li        { color: #e5e5e5 !important; }
.section-title ul li::after { filter: hue-rotate(-135deg) saturate(1.4); }

/* Cards */
.player-wrapper,
.vip-bg .player-wrapper,
.accordion-slide,
.cards-wrapper,
.flip-card-front,
.form-card-section,
.middle-link,
.central-link {
  background: var(--sp-surface) !important;
  border-color: var(--sp-border) !important;
  color: #e5e5e5 !important;
}

.flip-card:hover .flip-card-back             { background: var(--sp-purple) !important; }
.flip-card-back div strong,
.flip-card-back div span                     { color: #fff !important; }

.vip-bg .player-wrapper:hover {
  background: #1f1f1f !important;
  border-color: var(--sp-purple) !important;
  box-shadow: 0 0 28px rgba(73, 18, 117, 0.15) !important;
}

.vip-bg .player-wrapper:hover .flex svg circle { fill: var(--sp-purple) !important; }

/* Monetization hover cards */
.hover-sec .hover-image,
.hover-sec .player-child {
  background: #141414 !important;
  border-color: #262626 !important;
}

.hover-sec .player-wrapper:hover .player-child,
.hover-sec .player-wrapper.active .player-child { background: var(--sp-purple) !important; }
.hover-sec .player-wrapper h5::after           { background: var(--sp-purple) !important; }
.hover-sec .player-wrapper.active h5::after    { background: #fff !important; }

/* Accordion */
.accordion-slide {
  box-shadow: none !important;
  border: 1px solid #262626 !important;
}

.h5.accordion                             { color: #f5f5f5 !important; }
.faq-arrow::after, .faq-arrow::before     { background: var(--sp-purple) !important; }
.open .faq-arrow::after,
.open .faq-arrow::before                  { background: #fff !important; }

/* Feature tick marks */
.player-wrapper ul li::before             { filter: hue-rotate(-145deg) saturate(1.6) brightness(0.95); }
.central-left ul li svg path              { fill: var(--sp-purple) !important; }

/* Mid CTA section */
.middle-link {
  background: linear-gradient(135deg, #150420 0%, #141414 100%) !important;
  background-image: none !important;
  flex-direction: column !important;
  text-align: center !important;
  padding: 48px 32px !important;
}

.middle-link .middle-left {
  width: 100% !important;
  text-align: center !important;
}

.middle-link .middle-left h3 {
  width: 100% !important;
  max-width: 780px;
  margin: 0 auto 14px !important;
}

.middle-link .middle-left p {
  width: 100% !important;
  max-width: 560px;
  margin: 0 auto 24px !important;
}

.middle-link .buttonsline {
  display: flex !important;
  justify-content: center !important;
}

.central-link {
  background: linear-gradient(135deg, #150420 0%, #0a0a0a 100%) !important;
}

.middle-cta {
  background: linear-gradient(135deg, #491275 0%, #2a0a44 100%) !important;
  background-color: #491275 !important;
}

.mid-cta h3, .mid-cta p { color: #fff !important; }
.mid-cta a               { background: #fff !important; color: #491275 !important; }

/* Notification bar */
.banner-notification {
  background: linear-gradient(180deg, #491275 0%, #2a0a44 100%) !important;
}

.banner-notification .strip a.white-btn {
  background: #fff !important;
  color: #491275 !important;
  border-color: #fff !important;
}

.banner-notification .strip p a { color: #fff !important; }

/* Links */
a:not(.button):not(.scroll-cta-button):not(.link):not(.links) {
  color: var(--sp-purple);
}

.button-link, .links, .action-link, .card-content a {
  color: var(--sp-purple) !important;
}

.button-link svg { fill: var(--sp-purple) !important; }
.link            { background: var(--sp-purple) !important; color: #fff !important; }
.link:hover      { background: var(--sp-purple-hover) !important; }

/* Forms on dark */
.contact-page ul li input,
.contact-page ul li select,
.contact-page ul li textarea,
.demo-form input,
.demo-form select,
.demo-form textarea {
  background: #1c1c1c !important;
  border: 1px solid #2a2a2a !important;
  color: #f5f5f5 !important;
}

.form-card-section   { background: #141414 !important; }
.section-heading h2  { color: #f5f5f5 !important; }
.section-heading p   { color: #cbcbcb !important; }

/* Testimonials */
#test { background: #0a0a0a !important; }

.testimonial-section .flip-card-front {
  background: #141414 !important;
  border-color: #262626 !important;
}

.testimonial-section .flip-card-front p   { color: #cbcbcb !important; }
.testimonial-section .flip-card-front img { filter: brightness(0) invert(1); }

/* Footer */
section.footer {
  background: #0a0a0a !important;
  border-top: 1px solid #1a1a1a;
}

section.footer p { color: #a3a3a3 !important; }

/* Floating CTA */
.floating-cta {
  background: #0a0a0a !important;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.6) !important;
}

/* Loading dots colors */
div.dots span:first-child  { background: #491275 !important; }
div.dots span:nth-child(2) { background: #9170ac !important; }
div.dots span:last-child   { background: #b89bca !important; }

/* Misc overrides */
.trusted-text, .action-link     { color: var(--sp-purple) !important; }
#backToTop                       { background-color: var(--sp-purple) !important; }
#backToTop svg                   { fill: #fff !important; }
.player-wrapper img.arrows       { display: none !important; }
.player-wrapper .anim-svg        { display: none !important; }

/* Feature cards - hide bottom media, compact layout */
.vip-bg .player-wrapper .flex,
.vip-bg .player-wrapper .flex img,
.vip-bg .player-wrapper .flex video,
.vip-bg .player-wrapper .ott-img,
.vip-bg .player-wrapper .security-img,
.vip-bg .player-wrapper .play,
.vip-bg .player-wrapper .bottom-img {
  display: none !important;
}

.vip-bg .player-wrapper {
  padding: 28px 32px !important;
  min-height: auto !important;
}

.vip-bg .player-child   { margin-bottom: 0 !important; }

.vip-bg .player-wrapper h3 {
  font-size: 24px !important;
  line-height: 1.25 !important;
  margin-bottom: 12px !important;
  padding-bottom: 0 !important;
}

.vip-bg .player-wrapper p {
  font-size: 15px !important;
  line-height: 1.5 !important;
  margin-bottom: 14px !important;
}

.vip-bg .player-wrapper ul      { margin: 14px 0 4px !important; }
.vip-bg .player-wrapper ul li   { font-size: 15px !important; line-height: 1.4 !important; margin-bottom: 8px !important; }
.vip-bg .player-wrapper a       { display: none !important; }

/* Accent underlines - recolor to purple */
.player-wrapper h3::after,
.player-wrapper h5::after     { background: var(--sp-purple) !important; }
.section-head::after           { background: var(--sp-purple) !important; }

.text {
  background: linear-gradient(to right, var(--sp-purple) 0%, var(--sp-purple) 100%) !important;
}

.middle-animated .text {
  background: linear-gradient(to right, var(--sp-purple) 30%, #fff 90%) !important;
}

/* Monetization model cards */
.mixed-bg .hover-image,
.mixed-bg .player-wrapper .hover-image img { display: none !important; }

.mixed-bg .player-wrapper {
  padding: 32px 28px !important;
  min-height: auto !important;
}

.mixed-bg .player-wrapper .player-child  { margin: 0 !important; }

.mixed-bg .player-wrapper h5 {
  font-size: 26px !important;
  line-height: 1.2 !important;
  margin: 0 0 10px !important;
  padding-bottom: 0 !important;
}

.mixed-bg .player-wrapper .hidden-section p {
  font-size: 15px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* Hero banner CTA centering */
.buttonsline,
.buttonsnone,
.middle-left > .buttonsline {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Header logo sizing */
header.header .logo-image {
  width: auto !important;
  padding: 8px 24px !important;
  background: transparent !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
}

header.header .logo-image a.logo {
  display: inline-flex !important;
  align-items: center !important;
}

header.header .fixed-logo {
  height: 72px !important;
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  object-fit: contain !important;
  background: transparent !important;
}

header.header { padding: 0 !important; }

/* Hero clears fixed header */
header.header + section,
header.header + .video-banner,
header.header ~ section.video-banner,
.video-banner {
  margin-top: 90px !important;
}

@media (max-width: 768px) {
  .video-banner               { margin-top: 74px !important; }
  header.header .fixed-logo   { height: 52px !important; }
  header.header .logo-image   { padding: 6px 14px !important; }
}

@media (max-width: 900px) {
  .monetize .flex-container { flex-direction: column; }

  .monetize .central-left,
  .monetize .central-right  { flex: 1 1 100%; }
}


/* =============================================================
   SECTION 10: HEADER / NAVIGATION
   ============================================================= */

.header {
  position: fixed;
  top: 0;
  width: 100% !important;
  z-index: 9;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  background: #fff;
}

header#streamplay-menu.fixed-header {
  position: fixed;
  top: 0;
}

.header-section .logo-image {
  min-width: inherit !important;
  position: relative;
}

header.header .header-section .container.clearfix {
  max-width: 1340px;
  width: 100% !important;
  padding: 0 30px;
}

.header .header-section .container {
  max-width: 1280px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1280px;
}

/* Logo */
.streamplay-menu .logo .main-logo {
  padding-left: 0;
  width: 199px;
  position: relative;
  top: 0;
  height: auto;
}

.streamplay-menu .logo a .fixed-logo  { display: block; }
.streamplay-menu .logo .fixed-logo    { width: 205px; height: auto; min-height: 31px; }

/* Hamburger */
.streamplay-menu .hamburger {
  display: none;
  height: 18px;
  width: 25px;
  position: absolute;
  top: 17px;
  right: 30px;
}

.streamplay-menu #ham span {
  display: block;
  position: static;
  width: 25px;
  height: 2px;
  background-color: #4a4a4a;
  margin-bottom: 5px;
  transition: 0.3s;
}

.streamplay-menu .hamburger.ham-toggle span:first-of-type {
  transform: translateY(5px) rotate(-45deg);
}

.streamplay-menu .hamburger.ham-toggle span:last-of-type {
  transform: translateY(-9px) rotate(45deg);
}

.streamplay-menu .hamburger.ham-toggle span:nth-of-type(2) {
  opacity: 0;
}

/* Nav menu */
.streamplay-menu .nav-menu {
  margin-left: 62px;
  width: 100%;
  display: flex;
  height: 68px;
}

.streamplay-menu .nav-menu > ul {
  position: relative;
  width: 70%;
  display: flex;
  align-items: center;
}

.streamplay-menu .nav-menu li {
  display: block;
  width: 100%;
  vertical-align: middle;
  position: relative;
  margin-left: 0;
  margin-bottom: 20px;
}

.streamplay-menu .nav-menu li.dropmenu-new {
  display: inline-block;
  position: relative;
  margin-bottom: 0;
  padding: 22px 0;
}

.streamplay-menu .nav-menu li.dropmenu-new:first-child      { width: 30%; margin-right: 30px; }
.streamplay-menu .nav-menu li.dropmenu-new:nth-child(2)     { width: 31%; margin-right: 30px; }
.streamplay-menu .nav-menu li.dropmenu-new:nth-child(3)     { width: 19%; margin-right: 30px; }
.streamplay-menu .nav-menu li.dropmenu-new:last-child       { width: 20%; margin-right: 30px; white-space: nowrap; }

.streamplay-menu .nav-menu li.dropmenu-new > a {
  white-space: nowrap;
  color: #000;
  font-size: 18px;
  padding-bottom: 10px;
  font-family: "proxima-nova", sans-serif;
  font-weight: 600;
  transition: all ease 0.3s;
  position: relative;
}

.streamplay-menu .nav-menu li.dropmenu-new > a svg {
  width: 10px;
  height: 20px;
  vertical-align: sub;
  fill: #000;
  margin-left: 7px;
  position: relative;
  top: 2px;
}

/* Dropdown submenu */
.streamplay-menu .nav-menu li.dropmenu-new .submenu {
  position: absolute;
  background: #fff;
  width: 950px;
  top: 38px;
  left: -100px;
  box-shadow: 0 0 20px rgba(0, 0, 255, 0.12);
  transition: 0.5s ease;
  border-radius: 15px;
  display: flex;
  opacity: 0;
  visibility: hidden !important;
}

.streamplay-menu .nav-menu li.dropmenu-new .submenu::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 14%;
  width: 18px;
  height: 18px;
  z-index: 0;
  background: #fff;
  transform: rotate(45deg);
  transition: 0.5s ease;
}

.streamplay-menu .nav-menu li.dropmenu-new .submenu.small::before { left: 48%; }
.streamplay-menu .nav-menu li.dropmenu-new:nth-child(2) .submenu::before { left: 35%; }

li.dropmenu-new.dropmenu-active .submenu {
  display: block !important;
}

/* Hover menu inner */
.streamplay-menu .nav-menu li.dropmenu-new .hover-menu ul {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}

.streamplay-menu .nav-menu li.dropmenu-new .hover-menu ul li a {
  display: inline-flex;
  align-items: flex-start;
  width: 100%;
  position: relative;
}

.streamplay-menu .nav-menu li.dropmenu-new .hover-menu ul li a svg {
  width: 40px;
  height: 40px;
  vertical-align: sub;
  fill: #000;
  margin-left: 9px;
  position: relative;
  top: 10px;
}

.streamplay-menu .nav-menu li.dropmenu-new .hover-menu ul li a .sub-list {
  padding-left: 25px;
  width: 90%;
}

.streamplay-menu .nav-menu li.dropmenu-new .hover-menu ul li a .sub-list h4 {
  font-size: 16px;
  margin-bottom: 0;
  line-height: 18px;
  color: #000;
  font-family: "proxima-nova", sans-serif;
  font-weight: 700;
  position: relative;
  display: inline-block;
  transition: all ease 0.3s;
  top: 0;
}

.streamplay-menu .nav-menu li.dropmenu-new .hover-menu ul li a .sub-list p {
  padding-bottom: 0;
  color: #000;
  font-size: 14px;
  line-height: 18px;
  text-transform: capitalize;
  transition: all ease 0.1s;
  visibility: visible;
  opacity: 1;
}

.streamplay-menu .nav-menu li.dropmenu-new .hover-menu ul li:hover .sub-list p {
  visibility: hidden;
  opacity: 0;
}

.streamplay-menu .nav-menu li.dropmenu-new .hover-menu ul li:hover .sub-list h4 {
  top: 18px;
}

/* Hover background effect on menu items */
.streamplay-menu .nav-menu .hover-menu li a::before {
  content: '';
  position: absolute;
  background: #f2f7ff;
  height: 100%;
  width: 56px;
  border-radius: 5px;
  top: 0;
  left: 0;
  transition: all ease 0.3s;
}

.streamplay-menu .nav-menu .hover-menu li a:hover::before {
  width: 100%;
  background: #f2f7ff;
}

/* Arrow after menu item title */
.streamplay-menu .nav-menu li.dropmenu-new .hover-menu ul li a .sub-list h4::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 4px;
  background-image: url(assets/images/menu-arrow.svg);
  height: 9px;
  width: 12px;
  background-size: cover;
  background-repeat: no-repeat;
  transition: all ease 0.3s;
  opacity: 0;
}

.streamplay-menu .nav-menu li.dropmenu-new .hover-menu ul li:hover .sub-list h4::after {
  opacity: 1;
}

/* Inner menu & features menu */
.streamplay-menu .nav-menu .inner-menu {
  width: 40%;
  padding: 30px 30px 0 30px;
}

.streamplay-menu .nav-menu .hover-menu h6,
.streamplay-menu .nav-menu .features-menu h6,
.resource h6 {
  color: #002dff;
  font-size: 18px;
  padding-bottom: 15px;
  font-family: "proxima-nova", sans-serif;
  font-weight: 600;
}

.features-menu {
  background: #e9f2ff;
  flex: 1;
  padding: 30px 0 0 30px;
  display: flex;
}

.streamplay-menu .nav-menu li.dropmenu-new .submenu .features-menu ul {
  width: 50%;
}

.streamplay-menu .nav-menu li.dropmenu-new .submenu .features-menu ul li {
  margin-bottom: 5px;
}

.streamplay-menu .nav-menu li.dropmenu-new .submenu .features-menu ul li a {
  display: inline-block;
  align-items: center;
  position: relative;
  padding: 6px 20px 6px 0;
}

.streamplay-menu .nav-menu li.dropmenu-new .submenu .features-menu ul li a svg {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  fill: #000;
  margin-right: 10px;
  position: relative;
  top: 0;
}

.streamplay-menu .nav-menu li.dropmenu-new .submenu .features-menu ul li h4 {
  font-size: 16px;
  margin-bottom: 0;
  line-height: 18px;
  color: #000;
  font-family: "proxima-nova", sans-serif;
  font-weight: 600;
  position: relative;
  display: inline-block;
  transition: all ease 0.3s;
  top: 0;
}

.streamplay-menu .nav-menu li.dropmenu-new .submenu .features-menu ul li a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 1px;
  background: #000;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  transition: all ease 0.4s;
}

.streamplay-menu .nav-menu li.dropmenu-new .submenu .features-menu ul li a:hover::after {
  width: 50%;
}

.streamplay-menu .nav-menu .features-menu .header-cta {
  font-size: 16px;
  line-height: 18px;
  color: #002dff;
  position: relative;
  display: flex;
  align-items: center;
  margin: 15px 0;
}

.streamplay-menu .nav-menu .features-menu .header-cta svg {
  width: 14px;
  height: auto;
  fill: #002dff;
  vertical-align: middle;
  transition: all ease 0.3s;
  margin-left: 5px;
}

.streamplay-menu .nav-menu .features-menu .header-cta:hover svg {
  transform: translateX(5px);
}

/* External links & video wrapper */
.external-links {
  width: 50%;
  padding: 0 25px;
}

.video-wrapper {
  border-radius: 7px;
  position: relative;
  min-height: 85px;
}

.video-wrapper img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.video-wrapper a { display: block; }

.video-wrapper::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.42);
  top: 0;
  left: 0;
  opacity: 0;
  border-radius: 7px;
  transition: all ease 0.3s;
}

.video-wrapper:hover::after { opacity: 1; }

.streamplay-menu .nav-menu li.dropmenu-new .submenu .video-wrapper svg {
  position: absolute;
  height: 30px;
  width: 30px;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  margin: 0;
  transition: all ease 0.3s;
  z-index: 2;
}

/* Features submenu variant */
.streamplay-menu .nav-menu .submenu.featurres {
  width: 800px !important;
  flex-direction: column;
}

.streamplay-menu .nav-menu .submenu.featurres .hover-menu {
  width: 100%;
  padding: 30px;
}

.streamplay-menu .nav-menu .submenu.featurres .hover-menu ul li {
  width: 45%;
  margin-bottom: 25px;
  margin-left: 0;
}

.streamplay-menu .nav-menu .submenu.featurres .hover-menu ul li:last-child,
.streamplay-menu .nav-menu .submenu.featurres .hover-menu ul li:nth-child(7) {
  margin-bottom: 0;
}

.streamplay-menu .nav-menu li.dropmenu-new .submenu.featurres a.all-featurelnks {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  padding: 10px 0 15px;
  position: relative;
  font-size: 14px;
  line-height: 17px;
  font-family: "proxima-nova", sans-serif;
  font-weight: 600;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  transition: all ease 0.4s;
  cursor: pointer;
  color: #0d60e8;
}

.streamplay-menu .nav-menu li.dropmenu-new .submenu.featurres a.all-featurelnks svg {
  width: 15px;
  height: 20px;
  vertical-align: sub;
  fill: #0d60e8;
  margin-left: 7px;
  position: relative;
  top: 2px;
}

/* Small submenu */
.streamplay-menu .nav-menu li.dropmenu-new .submenu.small {
  width: 500px;
  left: -200px;
}

.streamplay-menu .nav-menu li.dropmenu-new .submenu.small .external-links {
  display: flex;
  width: 100%;
  padding: 0;
  justify-content: space-between;
}

.streamplay-menu .nav-menu .submenu.small .header-cta {
  font-size: 16px;
  line-height: 18px;
  color: #002dff;
  position: relative;
  display: flex;
  align-items: center;
  margin: 15px 0;
}

.streamplay-menu .nav-menu .submenu.small .header-cta svg {
  width: 12px;
  height: auto;
  fill: #0d60e8;
  vertical-align: middle;
  transition: all ease 0.3s;
  margin-left: 5px;
}

.streamplay-menu .nav-menu .submenu.small .header-cta:hover svg {
  transform: translateX(5px);
}

/* About / resource sections */
.about-streamplay  { width: 45%; }
.resource-flex     { width: 75%; }
.resource          { padding: 30px 30px 0 30px; }
.about-links       { display: flex; align-items: flex-start; }
.about-links > div { width: 50%; }

/* CTA expert buttons */
.streamplay-menu .nav-menu .expert {
  flex: 1;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.streamplay-menu .nav-menu .expert a {
  font-size: 16px;
  border: solid 1px #fb7d17;
  padding: 7px 10px;
  border-radius: 3px;
  transition: all ease 0.4s;
  margin: 0 5px;
  display: inline-block;
  text-align: center;
  box-shadow: 0 5px 12px 0 rgba(163, 165, 171, 0.4);
  font-family: "proxima-nova", sans-serif;
  font-weight: 600;
  position: relative;
  animation: wiggle 3s linear infinite;
}

.streamplay-menu .nav-menu .expert #sales-header {
  color: #fff;
  background: #fb7d17;
  min-width: 155px;
}

.streamplay-menu .nav-menu .expert a.request-demo {
  border: solid 1px #fb7d17;
  background: transparent;
  color: #fb7d17;
  min-width: 145px;
}

.streamplay-menu .nav-menu .expert a.request-demo:hover {
  color: #fff;
  background: #fb7d17;
}

/* Show submenu on hover (desktop) */
@media screen and (min-width: 1200px) {
  .streamplay-menu .nav-menu li.dropmenu-new:hover .submenu {
    display: flex;
    opacity: 1;
    visibility: visible !important;
    top: 100%;
  }
}

/* Mobile sticky CTA bar */
.new-sticky { display: none; }

@media screen and (max-width: 768px) {
  .new-sticky {
    display: block;
    width: 100%;
  }

  .new-sticky ul {
    width: 100%;
  }

  .new-sticky ul li {
    padding: 6px 20px;
    background: #f5f5f5;
    width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .new-sticky ul li a {
    min-width: 140px;
    background: #fb7d17;
    border: solid 1px #fb7d17;
    padding: 7px 10px;
    border-radius: 3px;
    transition: all ease 0.4s;
    margin: 0 5px;
    display: inline-block;
    text-align: center;
    color: #fff;
    max-width: 150px;
    font-family: "proxima-nova", sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 23px;
  }

  #sticky1 {
    border: solid 1px #fb7d17;
    color: #fb7d17;
    background: #fff;
    transition: all ease 0.2s;
  }

  #sticky1:hover {
    background: #fb7d17;
    color: #fff;
  }

  .streamplay-menu .nav-menu .expert #companymenu6,
  .streamplay-menu .nav-menu .expert #sales-header {
    display: none;
  }

  .streamplay-menu .nav-menu li.expert { padding: 0; }
}

/* Mobile nav breakpoint - 1200px */
@media screen and (max-width: 1200px) {
  .streamplay-menu .hamburger           { display: inline-block; }
  .banner-notification                  { display: none !important; }

  .streamplay-menu .nav {
    display: none;
    position: relative;
    width: 100%;
    top: 0;
    right: 0;
    margin-top: 0;
    margin-left: 0 !important;
    padding: 0;
    background: #f4f6f9;
    padding-bottom: 0 !important;
    overflow: auto;
    max-height: 600px;
  }

  .header-section .logo-image {
    padding: 10px 30px;
    width: 240px;
    margin-right: auto;
  }

  #streamplay-menu-new.header {
    position: fixed !important;
    height: auto !important;
    padding: 7px 0 0 0;
    top: 0;
  }

  .header .header-section .container,
  .streamplay-menu .nav-menu ul {
    display: block;
    max-width: 100% !important;
  }

  .header-section { position: relative; }

  .streamplay-menu .nav-menu > ul { width: 100%; }

  .streamplay-menu .nav-menu li {
    display: block;
    width: 100% !important;
    padding: 0 !important;
  }

  .streamplay-menu .nav-menu li.dropmenu-new > a {
    padding: 17px 13px !important;
    font-family: "proxima-nova", sans-serif;
    font-weight: 700;
    color: #000;
    opacity: 80%;
    min-height: inherit !important;
  }

  .streamplay-menu .nav-menu li a {
    width: 100%;
    display: block;
    padding: 5px 13px !important;
    color: #000;
    position: relative;
    font-size: 16px;
    text-align: left !important;
    min-height: 69px;
    align-items: center !important;
  }

  .streamplay-menu .nav-menu li.dropmenu-new > a svg {
    position: absolute;
    right: 20px;
    top: 15px;
  }

  .streamplay-menu .nav-menu li.dropmenu-new .submenu {
    opacity: 1 !important;
    visibility: visible !important;
    background-color: #e9f2ff;
    width: 100%;
    position: relative;
    padding: 30px !important;
    display: none;
    transition: none;
    box-shadow: none;
    left: 0;
    top: 0 !important;
    border-radius: 0;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .streamplay-menu .nav-menu li.dropmenu-new .submenu::before { content: none; }

  .streamplay-menu .nav-menu .inner-menu {
    width: 100%;
    padding: 0;
  }

  .streamplay-menu .nav-menu li.dropmenu-new .hover-menu ul li a svg {
    margin-left: 0;
    top: 0;
  }

  .streamplay-menu .nav-menu .hover-menu li a::before {
    width: 65px;
    background: transparent;
  }

  .streamplay-menu .nav-menu .hover-menu li a:hover::before {
    background: #f2f7ff;
  }

  .features-menu {
    flex-wrap: wrap;
    padding: 0;
    border-radius: 10px;
  }

  .streamplay-menu .nav-menu li.dropmenu-new .submenu .features-menu ul {
    width: 100%;
  }

  .external-links {
    width: 100%;
    padding: 0;
    padding-top: 20px;
  }

  .streamplay-menu .nav-menu li.dropmenu-new:nth-child(2) .submenu {
    left: 0;
    width: 100% !important;
  }

  .streamplay-menu .nav-menu .submenu.featurres .hover-menu           { padding: 0; }
  .streamplay-menu .nav-menu .submenu.featurres .hover-menu ul li     { width: 100%; margin-bottom: 10px !important; }
  .streamplay-menu .nav-menu li.dropmenu-new .submenu.featurres a.all-featurelnks { padding-bottom: 0 !important; padding-top: 13px !important; }

  .streamplay-menu .nav-menu li.dropmenu-new .submenu .features-menu ul li a {
    padding-left: 0 !important;
    min-height: inherit !important;
  }

  .streamplay-menu .nav-menu li.dropmenu-new .submenu .features-menu ul li a:hover::after {
    width: 20px;
    left: 0;
    transform: inherit;
  }

  .streamplay-menu .nav-menu li.dropmenu-new .submenu .features-menu ul li h4 {
    font-size: 15px;
    font-family: "proxima-nova", sans-serif;
    font-weight: 700;
    color: #000;
  }

  .streamplay-menu .nav-menu .features-menu .header-cta,
  .streamplay-menu .nav-menu .submenu.small .header-cta {
    justify-content: center;
    font-family: "proxima-nova", sans-serif;
    font-weight: 700;
    margin-bottom: 0;
    min-height: inherit;
    white-space: nowrap;
  }

  .streamplay-menu .nav-menu .expert {
    justify-content: center;
    background: #f4f6f9;
    padding: 10px 0;
  }

  .streamplay-menu .nav-menu li.dropmenu-new .submenu.small {
    width: 100%;
    left: 0;
    padding-bottom: 0 !important;
  }

  .resource         { padding: 0; }
  .about-streamplay { width: 49%; }
  .resource-flex    { width: 100%; }

  .video-wrapper img {
    min-height: 85px;
    width: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
  }

  .nav-menu li a.active-menu2       { color: #fff; }
  .nav-menu li a.active-menu2::after { background: transparent; }
}

@media screen and (min-width: 1200px) and (max-device-width: 1300px) {
  .streamplay-menu .nav-menu li.dropmenu-new > a { font-size: 16px; }
  .streamplay-menu .nav-menu > ul               { width: 68%; }
}

@media screen and (max-width: 340px) {
  .streamplay-menu .nav-menu li.dropmenu-new .hover-menu ul li a .sub-list h4 { font-size: 15px !important; }
  .streamplay-menu .nav-menu li.dropmenu-new .submenu                         { padding: 30px 15px !important; }
}

/* Back to top button */
#backToTop {
  position: fixed;
  bottom: 75px;
  right: 20px;
  width: 35px;
  height: 35px;
  background-color: rgba(0, 0, 0, 0.48);
  display: none;
  padding: 8px;
  font-size: 16px;
  color: #fff;
  border: none;
  border-radius: 80px;
  cursor: pointer;
  transition: opacity 0.3s ease;
  z-index: 9999;
}

#backToTop:hover { opacity: 1; }
#backToTop svg  { fill: #fff; }

@media screen and (min-width: 1201px) {
  #backToTop { display: none !important; }
}


/* =============================================================
   SECTION 11: HERO BANNER
   ============================================================= */

.video-banner {
  position: relative;
  margin-top: 54px;
}

.amazon-banner .banner-heading {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
}

.amazon-banner .banner-content {
  width: 100%;
  float: none;
  text-align: center;
  margin: 70px auto 0;
  position: relative;
  z-index: 1;
}

.amazon-banner .banner-heading h1 {
  font-size: 47px;
  line-height: 60px;
  font-family: "proxima-nova", sans-serif;
  font-weight: 700;
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.amazon-banner .banner-heading h1 span {
  color: #000;
  display: block;
  font-weight: 600;
}

.amazon-banner .banner-heading h1 span.in {
  line-height: 50px;
  color: #000 !important;
  font-family: "proxima-nova", sans-serif;
  font-weight: 700;
  display: block;
  font-size: 24px;
  position: relative;
  margin-bottom: 15px;
  -webkit-text-fill-color: initial;
}

.amazon-banner .banner-heading h1 span.in strong {
  color: #004DFF;
  font-weight: 700;
}

.amazon-banner .banner-heading h1 span.for-mobile { display: none; }

.amazon-banner .banner-heading p {
  font-size: 20px;
  line-height: 28px;
  font-family: "proxima-nova", sans-serif;
  font-weight: 600;
  margin-top: 45px;
  margin-bottom: 12px;
  color: #000;
  -webkit-text-fill-color: #000;
  position: relative;
}

.amazon-banner .banner-image {
  width: 100%;
  padding: 30px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.amazon-banner.video-solution::before {
  content: '';
  position: absolute;
  background: #fff;
  background-size: contain;
  background-position: bottom;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* Gradient headline text */
#sub {
  color: #000 !important;
  -webkit-text-fill-color: #000;
  display: inline;
  font-weight: 800;
  background-image: linear-gradient(to right, #0042ff, #0049f4, #004de7, #0051da, #0054cd, #0e57cc, #1759cc, #1f5ccb, #2561d8, #2c66e5, #346af2, #3c6fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#sub strong {
  position: relative;
  background-image: linear-gradient(to right, #1856ba, #1f5ccb, #2763dc, #3169ee, #3c6fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#sub strong::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 16px;
  background-image: url(assets/images/new-home/brush.svg);
  background-size: cover;
  left: 0;
  bottom: 6px;
  z-index: -1;
}

/* Hero feature list with tick marks */
.section-title ul {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 35px !important;
}

.section-title ul li {
  font-size: 18px;
  line-height: 26px;
  font-family: proxima-nova, sans-serif;
  font-weight: 400;
  margin: 0 0 15px 0;
  display: inline-block;
  color: #242424;
  text-align: left;
  position: relative;
  width: 42%;
}

.section-title ul li::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-image: url(assets/images/new-home/tick.svg);
  background-size: cover;
  left: -30px;
  top: 1px;
}

/* Supported devices */
.supported-devices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.supported-devices img {
  margin: 0 20px;
  width: 70%;
  display: block;
}

.tv-banner { width: 55%; }

/* Banner content with chatapi list */
.amazon-banner .banner-content.chatapi-list ul {
  width: 900px;
  margin: 0 auto;
}

.amazon-banner .banner-content ul li i {
  height: 20px;
  width: 20px;
  display: inline-block;
  background-image: url(assets/images/amazon/round.svg);
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  margin-right: 6px;
  vertical-align: middle;
}

/* Banner notification bar */
.banner-notification {
  background: linear-gradient(180deg, #491275 0%, #2a0a44 100%);
}

/* Background decorative line */
.bg-line { position: relative; }

.bg-line::before {
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  background-image: url(assets/images/amazon/line.svg);
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  top: -16%;
  z-index: -1;
}

/* Banner h1 underline after p */
.amazon-banner .banner-heading h1 p::after {
  content: '';
  position: absolute;
  height: 2px;
  width: 150px;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  background: #000;
}

.banner-content .in::after {
  content: "";
  width: 145px;
  height: 1px;
  background: #000;
  display: block;
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}

/* cite element in banner */
cite {
  font-weight: 600;
}

/* Responsive - hero banner */
@media screen and (min-device-width: 1280px) {
  .banner-image video {
    width: 90%;
    margin: auto;
    min-height: 630px;
  }
}

@media (max-width: 1200px) {
  .video-banner { padding-top: 0; }
}

@media (max-width: 1024px) {
  .amazon-banner .banner-heading h1    { font-size: 46px; }
  .amazon-banner .banner-content       { margin: 50px auto 0; }
  .amazon-banner .banner-heading h1 span.in { font-size: 18px !important; line-height: inherit; }
  .amazon-banner .banner-heading h1 span.in::after { bottom: 0; width: 100px; }
  .faq-acc h4 { font-size: 14px; }
}

@media (max-width: 991px) {
  .banner-image .responsive { display: block; }
  .tv-banner                 { width: 100%; padding: 20px 0; }
}

@media (max-width: 820px) {
  .amazon-banner .banner-image { display: none; }

  cite {
    font-weight: 800 !important;
    display: inline;
    width: 80%;
  }

  cite span { font-weight: 800 !important; }

  .section-title ul li { width: 100% !important; }

  .amazon-banner.video-solution::before {
    height: 100%;
    background-image: none;
  }

  .amazon-banner .banner-heading h1 {
    line-height: 45px !important;
    font-size: 35px !important;
    text-align: center;
  }

  .amazon-banner .banner-heading h1 br    { display: none; }
  .amazon-banner .banner-heading p        { font-size: 15px; }

  .amazon-banner .banner-content.chatapi-list ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-left: 25%;
    flex-wrap: wrap;
  }

  .amazon-banner .banner-content { margin: 40px auto 40px; width: 85%; }
}

@media (max-width: 641px) {
  #sub                        { display: inline; }
  strong#sub                  { display: inline; }
  div.dots                    { display: none !important; }

  .amazon-banner .banner-content.chatapi-list ul { padding-left: 15%; }
  .tv-banner                  { padding-top: 0; }
  .amazon-banner              { background-image: none; }
  .amazon-banner .banner-content { width: 90%; }
  .amazon-banner .banner-heading h1 span { display: inline; }

  .mob {
    display: inline !important;
    width: 80%;
  }

  .amazon-banner .banner-heading h1 span.for-devices { display: none; }
  .amazon-banner .banner-heading h1 span.for-mobile  { display: block; }

  #sub strong {
    display: inline-block;
  }

  #sub strong::after { bottom: -2px; }

  .amazon-banner .banner-content { width: 100% !important; }

  cite {
    font-size: 29px;
    line-height: 40px;
  }

  .amazon-banner .banner-heading h1 {
    font-size: 29px !important;
    line-height: 40px !important;
  }

  #sub strong::after {
    background-image: url(assets/images/live-streaming-solution/underline.png);
    height: 12px;
    bottom: -7px;
    background-size: contain;
    background-repeat: no-repeat;
  }
}

@media screen and (min-device-width: 400px) and (max-device-width: 641px) {
  cite {
    font-size: 28px;
    line-height: 40px;
  }
}

@media screen and (max-device-width: 360px) {
  .amazon-banner .banner-heading h1 span.mob {
    font-size: 27px;
    background-repeat: no-repeat;
  }

  div.dots span {
    width: 7px;
    height: 7px;
  }
}


/* =============================================================
   SECTION 12: CLIENTS LOGO BAR
   ============================================================= */

#clients {
  background: #FAFAFA;
}

.our-clients h2 {
  text-align: center;
  margin-bottom: 50px;
  font-size: 22px;
  font-weight: 700;
}

.onlymobile { display: none; }
.desktop    { display: block; }

@media (max-width: 768px) {
  .onlymobile { display: block; width: auto; }
  .desktop    { display: none; }
}

/* Scrolling logo marquee (mobile only) */
@media (max-width: 641px) {
  .customer-logos {
    box-shadow: inset 120px 0 50px -50px #F7F8FA, inset -120px 0 50px -50px #F7F8FA;
    background: repeat left center;
    background-size: auto 100%;
    display: inline-block;
    height: 1.5rem;
    animation: bgslide 1300s infinite linear;
    background-image: url(assets/images/new-home/logos.png);
    width: 100%;
    position: relative;
    mix-blend-mode: multiply;
    overflow: hidden;
    margin-bottom: 30px;
  }

  .customer-logos2 {
    box-shadow: inset 120px 0 50px -50px #F7F8FA, inset -120px 0 50px -50px #F7F8FA;
    background: repeat left center;
    background-size: auto 100%;
    display: inline-block;
    height: 1.5rem;
    animation: bgslide2 1300s infinite linear;
    background-image: url(assets/images/new-home/logos1.png);
    width: 100%;
    position: relative;
    mix-blend-mode: multiply;
    overflow: hidden;
  }

  @keyframes bgslide {
    0%   { background-position: 0 0; }
    100% { background-position: -100000px; }
  }

  @keyframes bgslide2 {
    0%   { background-position: 0 0; }
    100% { background-position: 100000px; }
  }
}

/* Client ratings widget in banner */
.client-and-ratings {
  max-width: 320px;
  margin-top: 25px;
  transform: scale(0.9);
  position: relative;
}

.rating-div {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  max-width: 320px;
  margin-top: 25px;
  transform: scale(0.9);
  position: relative;
}

.rating-div img {
  margin-bottom: 6px;
  width: 70%;
  height: auto;
}

.rating-div span {
  font-size: 17px;
  color: #58595B;
  white-space: nowrap;
}

.santagif {
  position: absolute;
  top: -8px;
  right: -13px;
}

span.santagif::after {
  content: '';
  position: absolute;
  width: 30%;
  height: 90%;
  top: 0;
  right: 0;
  box-shadow: inset -120px 0 18px -105px #ffffff, inset 120px 0 20px 0 rgba(255,255,255,0.4);
}

@media (max-width: 1200px) {
  .santagif { display: none; }
}

@media (max-width: 1024px) {
  .client-and-ratings {
    max-width: 275px;
    margin: auto;
    margin-top: 20px;
    transform: scale(0.7);
  }

  .rating-div img                           { width: 100%; }
  .flex_wrapper                              { display: block; }
  .client-and-ratings ul                    { left: 30px; }
  .client-and-ratings ul li:nth-child(2),
  .client-and-ratings ul li:nth-child(4)    { display: none; }
  .rating-div span                          { font-size: 14px; }
  .client-and-ratings ul li img             { width: 40px; height: 40px; }

  .rating-div {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

@media (max-width: 820px) {
  .client-and-ratings {
    max-width: 275px;
    margin: auto;
    margin-top: 20px;
    left: -5px;
  }
}


/* =============================================================
   SECTION 13: FEATURE CARDS (Player / VIP BG Cards)
   ============================================================= */

.sip-bg {
  background: transparent linear-gradient(119deg, #0B0A0A 0%, #111933 100%) 0% 0% no-repeat padding-box;
}

.sip-bg .section-title   { color: #fff; }
.sip-bg .section-subtitle { color: #fff; }

/* Player wrapper base */
.player-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.player-wrapper {
  width: 31%;
  margin: 10px;
  background-image: linear-gradient(to bottom, #1b1b1b, #181818, #141414, #101010, #0b0b0b);
  border-radius: 23px;
  border: 1px solid #262626;
}

.player-wrapper img.width100 { width: 100%; }

.player-wrapper h3,
.player-wrapper h5 {
  font-size: 30px;
  font-family: "proxima-nova", sans-serif;
  font-weight: 600;
  line-height: 40px;
  color: #fff;
  position: relative;
  padding-bottom: 0;
  margin: 5px 0 20px 0;
}

/* Decorative underline under h3/h5 */
.player-wrapper h3::after {
  content: '';
  width: 57px;
  height: 3px;
  position: relative;
  display: block;
  margin: 0;
  bottom: -10px;
  background: #0453d5;
  transition: all ease 0.1s;
  left: 50%;
  transform: translateX(-50%);
}

.player-wrapper h5::after {
  content: '';
  width: 57px;
  height: 3px;
  position: relative;
  display: block;
  margin: 0;
  bottom: -5px;
  background: #fff;
  transition: all ease 0.1s;
  left: 50%;
  transform: translateX(-50%);
}

.player-wrapper p {
  transition: all ease 0.3s;
  font-size: 18px;
  line-height: 28px;
  color: #bababa;
  margin-bottom: 10px;
}

.player-child {
  text-align: center;
  padding: 30px 20px;
  border-top: none;
  border-radius: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Feature list inside card */
.player-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 10px 0;
}

.player-wrapper ul li {
  font-size: 18px;
  width: 50%;
  line-height: 28px;
  position: relative;
  margin-bottom: 10px;
  padding-left: 25px;
}

.player-wrapper ul li::before {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  background-image: url(assets/images/ott-provider/round.svg);
  background-size: cover;
  left: 0;
  top: 6px;
}

.player-wrapper video { border-radius: 10px; }

/* VIP-bg card variant */
.vip-bg .player-wrapper {
  width: 50%;
  border: 1px solid #EFF0EF;
  border-radius: 50px;
  background: #F1F2F4;
  padding: 40px;
  padding-bottom: 0;
  transition: all ease 0.3s;
  background-position: right;
  margin: 0;
}

.vip-bg .player-wrapper:hover {
  border-style: solid;
  border-color: #fff;
  background: #fff;
  background-size: cover;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.1);
}

.vip-bg .player-wrapper:hover .flex svg circle { fill: #2D63F4; }
.vip-bg .player-wrapper:hover .flex svg .arrow  { fill: #fff; }

.vip-bg .player-child { border: none; padding: 0; text-align: left; margin-bottom: 35px; }

.vip-bg .player-wrapper h3,
.vip-bg .player-wrapper h5 { color: #191919; }

.vip-bg .player-wrapper p { color: #151515; }

.vip-bg .player-child h3::after { left: 30px; }

/* VIP card CTA button */
.vip-bg .player-wrapper a {
  height: 45px;
  display: inline-block;
  background: #fb7d17;
  border-radius: 3px;
  color: #fff;
  text-align: center;
  font-size: 18px;
  line-height: 45px;
  padding: 0 30px;
  border: none;
  font-weight: 600;
  box-shadow: 0 4px 8px 0 rgba(5, 122, 171, 0.2), 0 6px 20px 0 rgba(5, 122, 171, 0.19);
}

.vip-bg .player-wrapper a i {
  vertical-align: middle;
  position: relative;
  left: 0;
  transition: all ease 0.3s;
}

/* Player container wrappers */
.player-container .wrapper { width: 32%; }

.player-container .wrapper:last-child .player-wrapper:last-child img {
  padding-bottom: 10px;
}

.player-container .wrapper .player-wrapper { width: 100%; }

/* Flex layout inside cards */
.flex {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
}

.flex img { width: 100%; }

.flex svg {
  transition: all ease 0.3s;
  position: relative;
  bottom: 50px;
}

/* SVG border container */
.svg-border {
  color: rgb(33, 33, 33);
  background-color: rgb(245, 245, 247);
  border: 1px solid #ddd;
  border-radius: 8px;
  height: 54px;
  display: inline-block;
  transition: all ease 0.3s;
}

.vip-bg .player-wrapper:hover .svg-border {
  border-color: rgba(33, 96, 256, 0.5);
  background-color: rgba(33, 96, 256, 0.098);
}

.vip-bg .player-wrapper:hover .flex svg        { transform: rotate(45deg); }
.vip-bg .player-wrapper:hover .svg-border svg path { fill: rgb(47, 99, 244); stroke: rgb(47, 99, 244); }
.vip-bg .player-wrapper:hover h6               { color: rgb(47, 99, 244); }

/* Card decorative images */
img.player-img {
  position: absolute;
  right: 0;
  top: -80px;
  width: 200px;
}

@keyframes floatingrev {
  0%   { transform: translateY(0); }
  100% { transform: translateY(30px); }
}

.play {
  position: absolute;
  width: 100%;
  transform: scale(1.1);
  bottom: 0;
}

.uploads-contain {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  right: 20px;
  bottom: 40px;
}

.uploads-contain img { width: 85px; margin: 0 5px; }

.uploads-contain img.loader {
  position: absolute;
  width: 40px;
  height: 40px;
  left: 50%;
  transform: translateX(-50%);
}

.player-wrapper img.ott-img {
  position: absolute;
  top: -40px;
  right: 0;
  height: auto;
  z-index: 1;
  width: auto;
}

.player-wrapper img.security-img {
  position: absolute;
  width: 200px;
  left: -35px;
  top: -17px;
}

.player-wrapper img.analytics-img {
  position: absolute;
  width: 200px;
  right: -30px;
  top: -50px;
}

.bottom-img {
  position: relative;
  bottom: 50px;
}

/* Animated text bar */
.text {
  background: linear-gradient(to right, #25418f 0%, #25418f 0%);
  background-size: 100% 100%;
  background-position: right bottom;
  transition: all 2s ease-out;
  height: 5px;
  width: 200px;
  top: 41px;
  right: 0;
  position: absolute;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.middle-animated .text {
  background: linear-gradient(to right, #25418f 30%, #fff 90%);
  background-size: 200% 100%;
  background-position: left bottom;
}

.player-wrapper img.arrows {
  position: absolute;
  width: 27px;
  height: auto;
  right: 0;
  top: 88px;
  left: 55px;
  transition: 5s;
}

.middle-animated .arrows    { transform: translateX(100px); }

.middle-animated .anim-button {
  position: absolute;
  bottom: 21px;
  height: 37px;
  right: 27px;
  width: 148px;
  border-radius: 7px;
  background: #d10540;
  color: #fff;
  border: none;
  font-size: 14px;
  animation: colorChange 4s;
  cursor: auto;
  pointer-events: none;
}

@keyframes colorChange {
  0%   { background-color: #d10540; }
  25%  { background-color: #0642d1; }
  50%  { background-color: #12d133; }
  75%  { background-color: #d0b909; }
  100% { background-color: #d0b909; }
}

.anim-svg {
  position: absolute;
  bottom: 0;
  left: 55px;
}

.clouds {
  position: absolute;
  bottom: 0;
  width: 25% !important;
  height: auto !important;
  left: 50%;
  transform: translateX(-50%);
}

.cloud-over { width: 100%; height: auto; }

.mobile-box { display: none; }

/* Light variant */
.light .player-wrapper {
  position: relative;
  transition: all ease 0.5s;
}

.cs-ellipse {
  position: absolute;
  top: auto;
  bottom: 0%;
  left: 0%;
  right: auto;
}

.m40t { margin-top: 110px; }
.m40b { margin-bottom: 110px; }

/* Responsive - feature cards */
@media screen and (max-width: 1200px) {
  .uploads-contain { display: none; }

  .text {
    width: 100px;
    top: 30px;
  }

  .animation-box { display: none; }
  .mobile-box    { display: block; }
}

@media screen and (max-width: 1024px) {
  .player-wrapper h3,
  .player-wrapper h5 {
    font-size: 22px;
    line-height: 30px;
  }

  p { font-size: 16px !important; }

  .vip-bg .player-wrapper {
    width: 47% !important;
    padding-top: 0 !important;
  }

  .player-wrapper   { width: 46%; }
  img.player-img    { top: -60px; width: 150px; }
}

@media screen and (max-width: 820px) {
  .player-container { align-items: stretch; }

  .wrapper:nth-child(2) .player-wrapper { height: 95%; }
}

@media screen and (max-width: 641px) {
  .sip-bg { overflow: hidden; }

  .vip-bg .player-wrapper .flex img { width: 100%; }
  .vip-bg .player-wrapper           { padding-top: 20px !important; }

  .vip-bg .player-wrapper .flex a   { display: none; }

  .vip-bg .player-wrapper {
    width: 100% !important;
    margin: 0 !important;
    margin-bottom: 20px !important;
  }

  .m40t { margin-top: 20px; }
  .m40b { margin-bottom: 20px; }

  .bottom-img { bottom: 0; }

  .player-wrapper ul li {
    font-size: 16px;
    width: 100%;
  }

  .no-bg.player-container {
    flex-wrap: inherit;
    overflow-x: scroll;
    overflow-y: scroll;
    justify-content: flex-start;
  }

  .player-container .wrapper { width: 100%; }

  .no-bg .player-wrapper {
    width: 100%;
    margin-bottom: 15px;
    padding: 15px !important;
    min-width: 257px;
    left: 0;
    position: relative;
    box-shadow: 3px 6px 10px rgba(0, 0, 0, 0.16);
    background: #fff;
  }

  .player-child        { padding: 0; border: 0; }
  .vip-bg .player-child { padding: 0; }

  .no-bg .player-wrapper h3,
  .player-wrapper h5 {
    font-size: 22px;
    line-height: 32px;
    font-weight: 700;
    padding-bottom: 0;
    color: #000;
  }

  .no-bg .player-wrapper p {
    color: #000;
    font-size: 16px !important;
    line-height: 24px;
  }

  .sip-bg .player-wrapper h5::after {
    background: #0042ff;
    left: 30px !important;
  }
}

/* SVG Artista stroke animations */
@-webkit-keyframes animate-svg-stroke-1 {
  0%   { stroke-dashoffset: 690px; stroke-dasharray: 690px; }
  100% { stroke-dashoffset: 1380px; stroke-dasharray: 690px; }
}
@keyframes animate-svg-stroke-1 {
  0%   { stroke-dashoffset: 690px; stroke-dasharray: 690px; }
  100% { stroke-dashoffset: 1380px; stroke-dasharray: 690px; }
}
@-webkit-keyframes animate-svg-fill-1 {
  0%   { fill: transparent; }
  100% { fill: rgb(255, 255, 255); }
}
@keyframes animate-svg-fill-1 {
  0%   { fill: transparent; }
  100% { fill: rgb(255, 255, 255); }
}
.svg-bro-1 {
  -webkit-animation: animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
                     animate-svg-fill-1   0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
          animation: animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
                     animate-svg-fill-1   0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
}

/* SVG bro 2-16 share the same stroke path length - grouped for brevity */
@keyframes animate-svg-stroke-small {
  0%   { stroke-dashoffset: 80.656px; stroke-dasharray: 80.656px; }
  100% { stroke-dashoffset: 161.312px; stroke-dasharray: 80.656px; }
}

.svg-bro-2  { animation: animate-svg-stroke-small 1s cubic-bezier(0.47,0,0.745,0.715) 0.12s both; }
.svg-bro-3  { animation: animate-svg-stroke-small 1s cubic-bezier(0.47,0,0.745,0.715) 0.24s both; }
.svg-bro-4  { animation: animate-svg-stroke-small 1s cubic-bezier(0.47,0,0.745,0.715) 0.36s both; }
.svg-bro-5  { animation: animate-svg-stroke-small 1s cubic-bezier(0.47,0,0.745,0.715) 0.48s both; }
.svg-bro-8  { animation: animate-svg-stroke-small 1s cubic-bezier(0.47,0,0.745,0.715) 0.84s both; }
.svg-bro-9  { animation: animate-svg-stroke-small 1s cubic-bezier(0.47,0,0.745,0.715) 0.96s both; }
.svg-bro-10 { animation: animate-svg-stroke-small 1s cubic-bezier(0.47,0,0.745,0.715) 1.08s both; }
.svg-bro-11 { animation: animate-svg-stroke-small 1s cubic-bezier(0.47,0,0.745,0.715) 1.2s  both; }
.svg-bro-13 { animation: animate-svg-stroke-small 1s cubic-bezier(0.47,0,0.745,0.715) 1.44s both; }
.svg-bro-14 { animation: animate-svg-stroke-small 1s cubic-bezier(0.47,0,0.745,0.715) 1.56s both; }
.svg-bro-15 { animation: animate-svg-stroke-small 1s cubic-bezier(0.47,0,0.745,0.715) 1.68s both; }
.svg-bro-16 { animation: animate-svg-stroke-small 1s cubic-bezier(0.47,0,0.745,0.715) 1.8s  both; }

@keyframes animate-svg-stroke-6 {
  0%   { stroke-dashoffset: 650.316px; stroke-dasharray: 650.316px; }
  100% { stroke-dashoffset: 1300.632px; stroke-dasharray: 650.316px; }
}
@keyframes animate-svg-fill-6 {
  0%   { fill: transparent; }
  100% { fill: rgb(32, 34, 36); }
}
.svg-bro-6 {
  animation: animate-svg-stroke-6 1s cubic-bezier(0.47,0,0.745,0.715) 0.6s both,
             animate-svg-fill-6   0.7s cubic-bezier(0.47,0,0.745,0.715) 1.3s both;
}

@keyframes animate-svg-stroke-7 {
  0%   { stroke-dashoffset: 274.31px; stroke-dasharray: 274.31px; }
  100% { stroke-dashoffset: 548.619px; stroke-dasharray: 274.31px; }
}
.svg-bro-7 {
  animation: animate-svg-stroke-7 1s cubic-bezier(0.47,0,0.745,0.715) 0.72s both;
}

@keyframes animate-svg-stroke-12 {
  0%   { stroke-dashoffset: 268.285px; stroke-dasharray: 268.285px; }
  100% { stroke-dashoffset: 536.569px; stroke-dasharray: 268.285px; }
}
.svg-bro-12 {
  animation: animate-svg-stroke-12 1s cubic-bezier(0.47,0,0.745,0.715) 1.32s both;
}


/* =============================================================
   SECTION 14: PLATFORM TILES
   ============================================================= */

.platforms-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  max-width: 1100px;
  margin: 30px auto 36px;
  padding: 0 12px;
}

.platform-tile {
  flex: 0 0 calc(20% - 18px);
  background: #0f0f0f;
  border: 1.5px solid #262626;
  border-radius: 14px;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #cbcbcb;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  cursor: default;
  min-height: 120px;
}

.platform-tile:hover {
  transform: translateY(-3px);
  border-color: #491275;
  box-shadow: 0 12px 28px rgba(73, 18, 117, 0.25);
}

.platform-tile svg  { width: 34px; height: 34px; color: #a78bfa; }
.platform-tile span { font-size: 15px; font-weight: 600; letter-spacing: 0.02em; color: #e5e5e5; }

@media (max-width: 900px) {
  .platform-tile { flex: 0 0 calc(33.333% - 16px); }
}

@media (max-width: 560px) {
  .platforms-grid { gap: 12px; }

  .platform-tile {
    flex: 0 0 calc(50% - 8px);
    padding: 18px 12px;
    min-height: 96px;
  }

  .platform-tile svg  { width: 28px; height: 28px; }
  .platform-tile span { font-size: 13px; }
}


/* =============================================================
   SECTION 15: MID-SECTION CTA BANNER
   ============================================================= */

.middle-link {
  position: relative !important;
  background-image: url(assets/images/new-home/mid-bg.png);
  background-size: cover;
  text-align: center;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 40px 70px !important;
}

.middle-left {
  text-align: left;
  width: 50%;
}

.middle-right {
  width: 50%;
  position: relative;
}

.middle-right img { width: 100%; }

.middle-right video {
  width: 95%;
  border-radius: 20px;
}

.middle-left h3 {
  font-size: 32px;
  line-height: 45px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  width: 85%;
}

.middle-left p {
  font-size: 18px;
  line-height: 26px;
  color: #fff;
  margin-bottom: 30px;
  width: 85%;
}

.buttonsnone { display: none; }

img.player {
  position: absolute;
  right: -20px;
  top: -40px;
  width: 190px;
}

img.playerc-controls {
  position: absolute;
  width: 100%;
  bottom: 10px;
  transform: scale(1.05);
}

@media only screen and (max-width: 1024px) {
  .middle-left p    { margin-bottom: 20px; }
  .middle-link      { padding: 40px !important; }
  .middle-left h3   { width: 90%; }
}

@media only screen and (max-width: 920px) {
  img.playerc-controls { display: none; }
  img.player           { width: 110px; }

  .middle-link {
    flex-wrap: wrap;
    padding: 20px 30px !important;
  }

  .middle-left {
    width: 100%;
    text-align: center;
  }

  .middle-left h3 {
    width: 100%;
    font-size: 26px;
    line-height: 36px;
  }

  .middle-right  { width: 100%; }
  .middle-left p { width: 100%; margin-bottom: 30px; }

  .middle-right img  { margin-bottom: 10px; }

  .buttonsline  { display: none; }
  .buttonsnone  { display: block; }

  .flex svg { bottom: 0; }

  .vip-bg .flex          { align-items: center; }
  .vip-bg .flex video    { display: none; }
}

@media only screen and (max-width: 380px) {
  .middle-link .button.secondary video { width: 58px; }
}


/* =============================================================
   SECTION 16: OUTCOME CARDS SECTION
   ============================================================= */

#playersection { background: #FAFAFA; }

.cards-container { width: 49%; }

.cards-container:last-child {
  position: relative;
  top: -50px;
}

.cards-wrapper {
  box-shadow: 3px 6px 12px rgba(0, 0, 0, 0.2);
  border: 1px solid #E6E6E6;
  border-radius: 6px;
  padding: 30px;
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 30px;
  transition: all ease 0.3s;
}

.cards-wrapper:last-child { margin-bottom: 0; }

.cards-wrapper:hover {
  background: transparent linear-gradient(180deg, #FFFFFF 0%, #FAFBFE 35%, #EAF0FF 53%, #EAF0FF 100%) 0% 0% no-repeat padding-box;
}

.cards-wrapper svg                     { margin-right: 20px; }
.cards-wrapper svg g                   { transition: all ease 0.3s; }
.cards-wrapper:hover > svg             { fill: #0251D2; stroke: #0251D2; }
.cards-wrapper:hover > svg path        { fill: #0251D2; stroke: #0251D2; }

.cards-wrapper svg .show               { opacity: 0; }
.cards-wrapper:hover svg .show         { opacity: 1; }

.card-content h4 {
  font-size: 30px;
  line-height: 38px;
  color: #101010;
  margin-bottom: 15px;
}

.card-content p {
  color: #3D4057;
  margin-bottom: 40px;
  line-height: 24px;
}

.card-content a {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: #152658;
}

.card-content a i {
  vertical-align: middle;
  position: relative;
  left: 0;
  transition: all ease 0.3s;
}

.card-content a:hover i { left: 6px; }

.card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 100px;
}

.image-wrapper img { width: 60%; }

@media only screen and (max-width: 820px) {
  .card-content h4 { font-size: 22px; line-height: 32px; }
  .card-content p  { margin-bottom: 20px; }
}

@media only screen and (max-width: 768px) {
  .card              { flex-wrap: wrap; }
  .cards-container   { width: 100%; }
  .card-content h4   { font-size: 22px; margin-bottom: 10px; }
  .card-content p    { margin-bottom: 20px; }
  .cards-container:last-child { top: inherit; }
  .cards-wrapper     { margin-bottom: 10px; padding: 15px; }
}

@media only screen and (max-width: 641px) {
  .card             { margin-top: 0; }
  .w70, .w80, .w90, .w98 { width: 100%; margin: 0 auto; }
  .image-wrapper img { width: 100%; }
}


/* =============================================================
   SECTION 17: HOVER FEATURE CARDS (Monetization, Security etc.)
   ============================================================= */

.sip-bg .player-wrapper { margin: 10px; }

.no-bg img {
  width: 100%;
  height: auto;
  padding: 5px 15px;
}

.no-bg .player-wrapper a           { color: #fff; }
.no-bg .player-wrapper a i         { vertical-align: middle; position: relative; left: 0; transition: all ease 0.3s; }
.no-bg .player-wrapper a:hover i   { left: 6px; }
.mixed-bg .player-wrapper p        { color: #fff; }

/* Hover image container */
.hover-sec .hover-image {
  background-image: linear-gradient(to bottom, #1b1b1b, #181818, #141414, #101010, #0b0b0b);
  border-radius: 23px;
  border: 1px solid #262626;
  min-height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all ease 0.3s;
}

.hover-sec .player-child {
  background-image: linear-gradient(to bottom, #1b1b1b, #181818, #141414, #101010, #0b0b0b);
  border-radius: 23px;
  border: 1px solid #262626;
  padding: 10px 20px;
  overflow: hidden;
  text-align: left !important;
}

/* Hidden section that reveals on hover */
.hover-sec .hidden-section {
  height: 0;
  opacity: 0;
  visibility: hidden;
  transition: all ease 0.3s;
}

.hover-sec .player-wrapper:hover .hidden-section,
.hover-sec .player-wrapper.active .hidden-section {
  height: 105px;
  opacity: 1;
  visibility: visible;
}

.hover-sec .player-wrapper h5::after {
  content: none;
  transition: all ease 0.3s;
}

.hover-sec .player-wrapper:hover h5::after,
.hover-sec .player-wrapper.active h5::after {
  content: '';
  left: 30px !important;
}

.hover-sec .player-wrapper:hover .hover-image,
.hover-sec .player-wrapper.active .hover-image {
  min-height: 250px;
  max-height: 250px;
}

.hover-sec.sip-bg .player-wrapper {
  background-image: none;
  border: none;
  max-height: 379px;
  margin-bottom: 70px;
}

/* Desktop: highlight on hover */
@media only screen and (min-width: 1024px) {
  .hover-sec .player-wrapper:hover .player-child {
    background: #0042FF;
  }
}

@media only screen and (max-width: 820px) {
  .sip-bg .player-wrapper      { margin: 10px; }

  .hover-sec .hover-image {
    background-image: inherit;
    border: none;
    min-height: inherit !important;
  }

  .hover-sec .player-child {
    background-image: inherit;
    border: none;
    height: auto;
  }

  .hover-sec .player-wrapper:hover .player-child {
    background: #fff !important;
    padding: 10px 0;
  }

  .no-bg img              { margin: 0 !important; padding: 0; }

  .hover-sec .player-wrapper:hover .hover-image {
    min-height: inherit;
    max-height: inherit;
  }

  .hover-sec .player-wrapper h5::after { content: ''; }

  .hover-sec.sip-bg .player-wrapper {
    max-height: inherit !important;
    margin-bottom: 25px;
  }

  .hover-sec .player-wrapper .hidden-section {
    height: 105px;
    opacity: 1;
    visibility: visible;
  }

  .mixed-bg .player-wrapper p { color: #000 !important; }
}

@media only screen and (max-width: 641px) {
  .sip-bg .player-wrapper h5::after {
    background: #0042ff;
    left: 30px !important;
  }
}


/* =============================================================
   SECTION 18: TESTIMONIALS / FLIP CARDS
   ============================================================= */

#test { background: #f6f6f6; }

.testimonial-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 10px;
  flex-wrap: wrap;
}

.testimonial-wrapper .testimonial-section {
  width: 32%;
  min-width: 300px;
}

.testimonial-wrapper .left-alligned {
  position: relative;
  width: 32%;
  text-align: left;
}

.testimonial-wrapper .testimonial-section .client.user-wrap img { width: 70px; }

.testimonial-section {
  width: 33%;
}

.testimonial-section p {
  font-family: proxima-nova, sans-serif;
  font-size: 18px;
  line-height: 28px;
  margin-bottom: 60px;
}

.testimonial-section img {
  min-height: 42px;
  max-height: 42px;
  width: auto;
  margin: 0;
  margin-bottom: 30px;
}

.testimonial-section strong {
  font-size: 50px;
  line-height: 50px;
  color: #fff;
  margin-bottom: 10px;
}

.testimonial-section span {
  font-size: 16px;
  color: #fff;
  margin-bottom: 40px;
  display: block;
}

.testimonial-section span:last-child { margin-bottom: 0; }

/* User info row */
.user-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-wrap img {
  width: 40px;
  margin-bottom: 0;
  max-height: inherit;
}

.user-wrap div {
  flex: 1;
  padding-left: 20px;
}

.user-wrap div strong {
  font-family: proxima-nova, sans-serif;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  color: #000;
}

.user-wrap div span {
  font-family: proxima-nova, sans-serif;
  font-size: 14px;
  color: #3a3a3a;
  line-height: 30px;
  font-weight: 500;
}

/* Only mobile visibility helper */
.onlyformobiledevices { display: none; }

/* Flip card 3D */
.flip-card {
  --tw-perspective: 1000px;
  perspective: var(--tw-perspective);
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.6s;
  transform: rotateY(0);
}

.flip-card-front {
  color: #000;
  z-index: 2;
  border: 1px solid #fff;
  border-radius: 6px;
  box-shadow: 3px 6px 12px rgba(0, 0, 0, 0.2);
  background: #fff;
  padding: 40px 30px;
  min-height: 460px;
  position: relative;
}

.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  min-height: 460px;
  border-radius: 6px;
  transform: rotateY(180deg);
  z-index: 1;
  background: #fff;
  padding: 40px 30px;
  border: solid 1px #fff;
  opacity: 0;
  transition: all ease 1.1s;
}

.flip-card:hover .flip-card-inner,
.flip-card:focus .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card:hover .flip-card-back {
  z-index: 600;
  opacity: 1;
  background: #0042ff;
}

.small.testimonial-section .flip-card-front > img,
.small.testimonial-section .flip-card-back img {
  max-height: 30px;
  min-height: 30px;
}

/* Responsive - testimonials */
@media only screen and (max-width: 1024px) {
  .onlyformobiledevices { display: block; }

  .testimonial-wrapper .left-alligned {
    width: 100% !important;
    text-align: center !important;
  }

  .testimonial-wrapper .testimonial-section { width: 48%; }
  .testimonial-wrapper                       { justify-content: center; }
}

@media only screen and (max-width: 890px) {
  .testimonial-wrapper {
    flex-wrap: nowrap;
    overflow: hidden;
    overflow-x: scroll;
  }

  .testimonial-section            { width: 100%; min-height: auto; }
  .flip-card-front                { box-shadow: 3px 6px 12px rgba(0,0,0,0.2); min-height: auto !important; }
  .flip-card-back                 { display: none; min-height: auto !important; }
  .testimonial-section strong     { font-size: 28px; line-height: 34px; }
  .testimonial-section span       { margin-bottom: 10px !important; }
  .testimonial-section p          { margin-bottom: 20px; }
  .flip-card-front                { padding: 25px !important; }
}

@media only screen and (max-width: 768px) {
  .testimonial-wrapper .left-alligned { width: 100% !important; text-align: center !important; }
  .testimonial-wrapper                 { justify-content: flex-start; }
}

@media only screen and (max-width: 641px) {
  .testimonial-section.flip-card.fadeinup1 { min-width: 280px; margin-bottom: 25px; }
  .testimonial-section                     { padding: 0; }
  .testimonial-section p                   { margin-bottom: 20px; min-height: 280px; }
  .testimonial-section img                 { min-height: inherit; max-width: 100px; }
  .testimonial-section span                { margin-bottom: 25px !important; }
  .testimonial-section span:last-child     { margin-bottom: 0 !important; line-height: 20px; min-height: 40px; }
  .testimonial-section strong              { font-size: 35px; line-height: 40px; }
  .flip-card-back                          { display: flex; align-items: center; }
  .user-wrap div strong                    { color: #000; }

  .flip-card:hover .flip-card-inner,
  .flip-card:focus .flip-card-inner        { transform: inherit !important; }
  .flip-card:hover .flip-card-back         { opacity: 0; }
}


/* =============================================================
   SECTION 19: FAQ ACCORDION
   ============================================================= */

.accordion-slide {
  box-shadow: -3px 6px 12px rgba(0, 0, 0, 0.08);
  border-radius: 9px;
  padding: 0 30px;
  margin-bottom: 20px;
}

section.frequent-questions .accordion-wrap {
  flex: 0 0 100%;
  padding-right: 50px;
}

section.frequent-questions .accordion-slide {
  padding: 0 30px;
}

.accordion-slide.open .accordion { color: #000; }

.h5.accordion {
  font-size: 22px;
  font-weight: 700;
  padding: 20px 0;
  position: relative;
  cursor: pointer;
  transition: 0.3s all;
}

.h5.accordion:hover { color: #000000; }

/* Collapsed panel */
.panel {
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  transition: 0.3s all;
  font-size: 16px;
  color: #2e2e2e;
  overflow: hidden;
}

.panel h4 { display: inline-block; margin: 10px 0; }

.panel p {
  font-size: 18px;
  line-height: 26px;
  width: 95%;
}

.panel p span {
  position: relative;
  padding-left: 17px;
  display: block;
}

.panel p span::before {
  content: '';
  position: absolute;
  left: 0;
  height: 8px;
  width: 8px;
  border-radius: 50%;
  top: 10px;
  background: #000000;
}

.panel ul         { padding: 20px 25px; }
.panel ul li      { list-style-type: disc; line-height: 30px; }

.accordion-slide .button {
  margin: 0;
  float: right;
  font-size: 12px;
  padding: 8px;
}

/* Open state */
.accordion-slide.open .panel {
  opacity: 1;
  visibility: visible;
  max-height: 250px;
  overflow-y: auto;
  padding: 0 20px 20px 0;
  transition: 0.3s all;
}

/* Arrow indicator */
span.faq-arrow {
  position: absolute;
  right: -3px;
  top: 50%;
  width: 20px;
  height: 15px;
  transition: all 0.5s ease;
  transform: translate(-50%, -50%) rotate(-90deg);
}

.faq-arrow::before,
.faq-arrow::after {
  content: '';
  position: absolute;
  display: block;
  width: 12px;
  height: 2px;
  background: #000;
  border-radius: 2px;
  transition: all 0.5s;
}

.faq-arrow::before {
  top: 5px;
  right: 1px;
}

.faq-arrow::after {
  right: inherit;
  left: 7px;
  transform: rotate(90deg);
  top: 5px;
}

.open span.faq-arrow::before { transform: rotate(-90deg); }
.open .faq-arrow::before,
.open .faq-arrow::after       { background: #000; }

.accordion-slide.open h3.accordion::before {
  transform: rotate(-45deg);
}

.accordion-slide.open h3.accordion::after {
  transform: rotate(45deg);
}

@media only screen and (max-width: 820px) {
  .h5.accordion    { font-size: 18px; }
  span.faq-arrow   { right: -20px; }
}

@media only screen and (max-width: 641px) {
  .panel p          { font-size: 16px; }

  .h5.accordion {
    font-size: 18px;
    padding-right: 20px;
  }

  .no-bg .player-wrapper a {
    color: #0042ff;
    font-size: 16px;
    font-weight: 600;
  }

  .no-bg .player-wrapper a svg path { fill: #0042ff; }
}


/* =============================================================
   SECTION 20: GROW 10x / MONETIZE SECTION
   ============================================================= */

.central-left ul li {
  font-size: 20px;
  line-height: 30px;
  color: #fff;
  width: 90%;
  margin-bottom: 10px;
}

.central-left ul li svg {
  vertical-align: bottom;
  margin-right: 10px;
}

.central-link {
  position: relative !important;
  background: transparent linear-gradient(119deg, #0B0A0A 0%, #111933 100%) 0% 0% no-repeat padding-box;
  text-align: center;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 80px 0 !important;
}

.central-left {
  text-align: left;
  width: 55%;
}

.central-right {
  width: 45%;
}

.central-right img { width: 100%; }

.central-left h4 {
  font-size: 42px;
  line-height: 52px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 30px;
  width: 100%;
}

/* Monetize section */
.monetize {
  background-color: #0949ff;
  background-image: url(assets/images/new-home/bottom-bg.png);
  background-size: cover;
}

.monetize .flex-container { padding: 10px 0; }

.flex-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.monetize h6 { width: 75%; }

.monetize .central-left  { width: 45%; }
.monetize .central-right { width: 55%; position: relative; }

.monetize .central-left ul li svg { vertical-align: middle; }

.central-left span {
  font-size: 16px;
  color: #fff;
  display: block;
  margin: 40px 0 20px 0;
}

.central-left img { width: 100%; height: auto; }

.monetize .central-right img { width: 70%; margin: auto; }

@media only screen and (max-width: 1024px) {
  .central-left h4 { width: 100%; font-size: 28px; }
}

@media only screen and (max-width: 820px) {
  .central-right { display: none; }

  .monetize .central-left {
    width: 100%;
    text-align: center;
  }

  .central-left ul {
    text-align: left;
    position: relative;
    display: inline-block;
    width: 50%;
  }
}

@media only screen and (max-width: 768px) {
  .flex-container { flex-wrap: wrap; }
  .central-right  { display: none; }

  .central-left {
    width: 100% !important;
  }

  .monetize h6 {
    width: 100%;
    font-size: 26px;
    line-height: 36px;
    text-align: center;
  }

  .monetize div  { text-align: center; }
  .central-left span { display: none; }
  .central-left img  { display: none; }
}

@media only screen and (max-width: 641px) {
  .monetize .flex-container { padding: 0; }

  .monetize ul { text-align: left; width: 100%; }

  .central-left ul li { font-size: 18px; }
}

@media only screen and (max-width: 380px) {
  .central-left ul li { font-size: 17px; }
}


/* =============================================================
   SECTION 21: FLOATING CTA BAR (Mobile)
   ============================================================= */

.floating-cta {
  position: fixed;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  background: #fff;
  bottom: -70px;
  box-shadow: 0 -2px 4px 0 rgba(173, 173, 173, 0.3);
  transition: all ease 0.3s;
  z-index: 9;
}

.floating-cta.show { bottom: 0; }

.floating-cta a {
  height: 48px;
  display: inline-block;
  background: #fb7d17;
  border-radius: 3px;
  color: #fff;
  text-align: center;
  font-size: 20px;
  font-family: "proxima-nova", sans-serif;
  font-weight: 700;
  line-height: 48px;
  padding: 0 30px;
  border: none;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  z-index: 1;
  width: auto;
}

.floating-cta a svg {
  position: relative;
  vertical-align: middle;
  width: 20px;
  margin-left: 10px;
}

/* Hidden on desktop */
@media screen and (min-width: 768px) {
  .floating-cta { display: none; }
}

@media screen and (max-width: 641px) {
  .floating-cta a { width: 100%; }
}

/* Arrow animation */
.arroww {
  margin-left: 10px;
  animation-name: arrow;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes arrow {
  from { transform: rotateX(0deg) translate(0); }
  to   { transform: rotateX(30deg) translate(20px); }
}

@keyframes chaty-animation-waggle {
  0%           { transform: none; }
  10%          { transform: rotateZ(-20deg) scale(1.2); }
  13%          { transform: rotateZ(25deg) scale(1.2); }
  15%          { transform: rotateZ(-15deg) scale(1.2); }
  17%          { transform: rotateZ(15deg) scale(1.2); }
  20%          { transform: rotateZ(-12deg) scale(1.2); }
  22%          { transform: rotateZ(0) scale(1.2); }
  24%, 100%    { transform: rotateZ(0) scale(1); }
}


/* =============================================================
   SECTION 22: FIXED SIDE SALES CTA
   ============================================================= */

.fixed-cta {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 99;
  transition: all ease 0.3s;
}

.fixed-cta.show { bottom: 0; }

.salesTeam {
  display: flex;
  align-items: center;
  position: relative;
}

.salesTeam img {
  width: 53px;
  height: 53px;
}

.salesTeam p {
  font-size: 20px;
  line-height: 30px;
  color: #FFFFFF;
  font-weight: 700;
  padding-left: 35px;
}

.salesTeam p span {
  display: block;
  color: #EFF801;
}

.salescta a     { margin: 0; }
.salescta .button {
  font-size: 16px !important;
  min-width: 185px !important;
  line-height: 38px !important;
}

.salescta a svg {
  width: 18px;
  vertical-align: middle;
  margin-left: 3px;
  position: relative;
  left: 0;
  transition: all ease 0.3s;
}

.salescta .button:hover svg { left: 5px; }

@media only screen and (max-width: 1200px) {
  .fixed-cta { display: none; }
}


/* =============================================================
   SECTION 23: SCROLL CTA BUTTON (Side tab)
   ============================================================= */

.scroll-cta-button {
  font-size: 16px;
  line-height: 200%;
  width: fit-content;
  height: 48px;
  max-height: 56px;
  padding: 4px 16px 4px 4px;
  border-radius: 99px 0 0 99px;
  cursor: pointer;
  display: flex;
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 99;
  opacity: 0;
  gap: 8px;
  transform: translateX(100%);
  transition: opacity 0.3s ease-in, transform 0.3s ease-in-out;
  background: linear-gradient(90deg, rgb(251, 125, 23) 88.64%, rgb(251, 125, 23) 100%);
  box-shadow: 0 4px 6px 0 rgba(102,102,102,0.09),
              0 9px 14px 0 rgba(102,102,102,0.06),
              0 3px 17px 0 rgba(102,102,102,0.05);
  align-items: center;
  color: #ffffff;
  font-weight: 600;
}

.scroll-cta-button:hover { background: #e66701; }

.scroll-cta-button.show {
  opacity: 0.95;
  transform: translateX(0);
}

span.scroll-cta-buttons-icons {
  height: 38px;
  margin-right: 0;
  width: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 3px;
}

@media only screen and (max-width: 768px) {
  section.right-cta { display: none; }
}


/* =============================================================
   SECTION 24: FOOTER
   ============================================================= */

section.footer {
  width: 100%;
  padding: 30px 0;
  background: #f9f9f9;
  text-align: center;
}

.footer .flex-wrap {
  flex-wrap: wrap;
  text-align: center;
  flex-direction: column;
}

ul.social-icons {
  display: flex;
  margin: 0 auto;
  margin-bottom: 15px;
}

ul.social-icons li { padding: 0 7px; }

.footmenu-column ul li span.free-tag-footer {
  display: inline-block !important;
  text-transform: capitalize;
  font-size: 0;
  background: #fc0;
  padding: 0 5px;
  margin-bottom: 0;
  color: #303235;
  font-weight: 600;
  border-radius: 10px;
  line-height: 18px;
  font-family: "proxima-nova", sans-serif;
  margin-left: 5px;
  transform: translateY(0);
  letter-spacing: 0;
  position: absolute;
  margin-top: 2px;
  height: 10px;
  transition: all ease 200ms;
}

.footmenu-column li a h6 {
  text-transform: capitalize;
  display: inline;
}

@media only screen and (max-width: 768px) {
  section.footer { padding: 40px 0; }
}

/* =============================================================
   SECTION 25: CONTACT / DEMO FORM POPUP
   ============================================================= */

#myDiv.viewheight {
  display: none;
}

.contact-page ul li input,
.contact-page ul li select,
.contact-page ul li textarea {
  background: #E7F2FC;
  border: solid 1px rgba(152, 196, 255, 0.49);
  font-weight: 600;
  color: #282829;
}

.new-form-wrapper {
  position: fixed;
  bottom: 0;
  width: 100%;
  flex: 1 1 0%;
  display: flex;
  align-items: center;
}

.viewheight {
  z-index: 99999;
  position: relative;
  display: flex;
  flex-direction: column;
}

.viewheight::after {
  content: '';
  position: fixed;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: -1;
  opacity: 0.8;
  left: 0;
  top: 0;
}

.new-form-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-card-section {
  background: #fff;
  max-width: 672px;
  min-width: 672px;
}

.section-heading {
  text-align: left;
  margin-bottom: 15px;
  border-bottom: 1px solid #EDEDED;
}

.section-heading h2 {
  font-size: 44px;
  line-height: 54px;
  font-weight: 700;
  margin-bottom: 10px;
}

.section-heading p {
  font-size: 18px;
}

/* HubSpot submit button */
input.hs-button.primary.large {
  font-family: "proxima-nova", sans-serif;
  font-weight: 700;
  height: 51px;
  display: inline-block;
  background: #fb7d17;
  border-radius: 3px;
  color: #fff;
  text-align: center;
  font-size: 20px;
  line-height: 51px;
  padding: 0 25px;
  border: none;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  z-index: 1;
  margin: auto;
  margin-top: 20px;
  width: 100%;
}

.privacy-content {
  display: block;
  width: 100%;
  position: relative;
  float: left;
  margin: 30px 0 0 0;
  text-align: left;
  font-size: 14px;
  line-height: 22px;
  color: rgb(177, 177, 177);
}

.privacy-content a {
  color: rgb(64, 137, 248);
  font-weight: 600;
}

.privacy-content.hide {
  display: none;
}

label.hs-main-font-element {
  color: red;
  font-size: 14px;
}

/* Form field states */
.hideOnOpen {
  height: 0;
  opacity: 0;
  visibility: hidden;
  transition: all ease 0.4s;
}

.hideOnOpen.open {
  height: auto;
  opacity: 1;
  visibility: visible;
}

.hideOnOpen li    { display: none; }
.hideOnOpen.open li { display: block; }
.closeOnOpen.close  { display: none; }

.contact-page ul li#button-submit {
  width: 100%;
}

.contact-page .button {
  width: 100%;
  max-width: 100%;
  font-family: "proxima-nova", sans-serif;
}

#hideOnOkay.hide { display: none; }

#flex-div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.new-form-container .button {
  height: 50px;
  line-height: 50px;
  width: 100%;
  margin: 0 auto;
  margin-top: 15px;
  cursor: pointer;
  font-weight: 700;
  font-size: 20px;
}

#ads-submit-button { margin-top: 0; }

.new-form-container .button svg {
  position: relative;
  vertical-align: middle;
  width: 20px;
  margin-left: 0;
}

.contact-page ul li .arrow-select::before { content: none !important; }

.close {
  position: absolute;
  right: 10px;
  bottom: 100%;
  z-index: 400;
}

.formSection.hide    { display: none; }
.section-heading.hide { display: none !important; }

/* Success message box */
.succes-box {
  padding: 25px 0;
  text-align: center;
  display: none;
}

.succes-box.open { display: block; }

.succes-box svg {
  width: 45px;
  height: 45px;
}

.succes-box p {
  color: #14253b;
  font-size: 18px !important;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
  margin-top: 28px;
  margin-bottom: 16px;
}

.succes-box span {
  display: block;
  color: #334253;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}

/* Form field IDs */
li#div-email { width: 100%; }
li#div-comp  { width: 100%; }

@media (max-width: 1024px) {
  .section-heading h2 {
    font-size: 24px;
    line-height: 30px;
  }
}

@media screen and (max-width: 641px) {
  .contact-page ul { width: 100%; }

  #ajx-loader {
    z-index: 9;
    top: 15px;
  }

  .new-form-wrapper {
    flex: 1 1 0%;
    display: flex;
    align-items: center;
  }

  .form-card-section {
    min-width: 100%;
    max-width: 100%;
    padding: 20px 15px;
  }

  .section-heading h2 {
    font-size: 24px;
    line-height: 30px;
    font-weight: 700;
  }

  .section-heading p { font-size: 16px; }

  input.hs-button.primary.large {
    font-size: 18px;
    height: 50px;
    line-height: 50px;
  }

  .privacy-content { font-size: 12px; }
}

@media only screen and (max-width: 768px) {
  .contact-page ul li label { display: none; }
  .contact-page             { padding: 0 !important; }

  li#div-geocountry select {
    appearance: none;
    pointer-events: none;
  }

  #div-phone .selected-flag { pointer-events: none; }
}

@media screen and (max-width: 360px) {
  .section-heading h2 { font-size: 20px; }
}


/* =============================================================
   SECTION 26: RATING SECTION
   ============================================================= */

.rating-section {
  background: #101322;
  padding: 40px 0;
}

.rating-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 30%;
  margin: auto;
  margin-bottom: 30px;
}

.rating-wrapper span {
  color: #fff;
  font-size: 16px;
  display: block;
  width: 50%;
}

/* Fix for inspect-extracted typo: displ'a'y:none -> display:none */
.onlymobile { display: none; }

.hsfc-Step .hsfc-Step__Content { padding: 0; }

@media screen and (max-width: 1024px) {
  .onlydesktop { display: none; }
  .onlymobile  { display: block; }
}

@media screen and (max-width: 641px) {
  .rating-wrapper {
    max-width: 90%;
    text-align: center;
  }

  .rating-wrapper img {
    width: 45%;
  }

  .rating-wrapper span {
    font-size: 14px;
    width: 55%;
    margin-left: 10px;
  }
}


/* =============================================================
   SECTION 27: INTL-TEL-INPUT FLAG STYLES
   ============================================================= */

.input-group > .intl-tel-input.allow-dropdown {
  flex: 1 1 auto;
  width: 100%;
}

.input-group > .intl-tel-input.allow-dropdown > .flag-container {
  z-index: 4;
}

.iti-flag {
  background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.6/img/flags.png");
}

/* Retina display flag sprite */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi),
       only screen and (min-resolution: 2dppx) {
  .iti-flag {
    background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.6/img/flags@2x.png");
  }
}


/* =============================================================
   SECTION 28: DEMO POPUP MODAL
   ============================================================= */

.demo-popup {
  width: 100%;
  min-height: 100vh;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background-color: rgba(20, 20, 20, 0.6);
  position: fixed;
  left: 0;
  top: 0;
  transition: visibility 0s 0.5s, opacity 0.5s ease-in-out, backdrop-filter 0.5s ease-in-out;
  transition-delay: 0s, 0s, 0s;
  z-index: 9999;
  font-family: proxima-nova, sans-serif;
  display: none;
}

.flexing {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.demo-content {
  display: flex;
  background-color: #000;
  overflow: hidden;
  max-width: 1000px;
  width: 100%;
  position: relative;
}

a#sdfsd {
  position: absolute;
  right: 0;
  cursor: pointer;
}

/* Left panel */
.demo-left {
  flex: 1 1 50%;
  padding: 40px 20px 40px 30px;
  text-align: center;
  background: #141414;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.video-box {
  background: #fff;
  border-radius: 12px;
  margin-bottom: 40px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.video-box video { border-radius: 12px; }

.trusted-text {
  font-size: 16px;
  color: #1e90ff;
  font-weight: 600;
  margin-top: 20px;
}

.logo-list {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  width: 100%;
}

.logo-list img { max-height: 16px; width: auto; }
.list1 img     { width: 120px; max-height: inherit; }
.list2 img     { max-width: 90px; max-height: 18px; }

/* Right panel */
.demo-right {
  flex: 1 1 50%;
  padding: 40px 30px 40px 20px;
  background-color: #141414;
}

.action-link {
  color: #1e90ff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  display: block;
  cursor: auto;
  font-family: proxima-nova, sans-serif;
}

.form-title {
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  margin: 0 0 15px 0;
  text-align: center;
  font-family: proxima-nova, sans-serif;
}

/* Form inputs */
.demo-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.demo-form input,
.demo-form select,
.demo-form textarea {
  width: 100% !important;
  padding: 12px 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: #2b2b2b;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  outline: none;
  min-height: 45px;
  border-radius: 6px;
  font-family: proxima-nova, sans-serif;
}

.demo-form textarea {
  min-height: 80px !important;
  margin-bottom: 24px;
}

.demo-form label { margin-bottom: 10px; }

.inline-fields {
  display: flex;
  gap: 10px;
}

label.hs-error-msg {
  font-size: 12px;
  line-height: 12px;
  margin: 0;
  color: red;
  position: absolute;
  bottom: -10px;
}

.demo-form fieldset { position: relative; }

.demo-form .hs-button.primary {
  background-color: #ff7b00;
  color: #fff;
  border: none;
  padding: 14px;
  border-radius: 6px;
  font-size: 18px;
  cursor: pointer;
  font-weight: bold;
  margin-top: 10px;
}

.demo-form button:hover { background-color: #ff961e; }

.privacy-note {
  font-size: 13px;
  line-height: 14px;
  color: #aaa;
  margin-top: 15px;
}

.privacy-link {
  color: #ccc;
  text-decoration: underline;
}

/* Placeholder styles */
#new-demo-popup input::placeholder,
#new-demo-popup select::placeholder,
#new-demo-popup textarea::placeholder {
  font-weight: 400;
  opacity: 0.5;
  color: #fff;
}

#new-demo-popup option:disabled {
  font-weight: 400;
  opacity: 0.5;
  color: #fff;
}

/* Gradient accent bar at bottom of form */
.div-block-279 {
  background-image: linear-gradient(270deg, #E90036, #FAD721 25%, #1DE4A6 65%, #1B67ED);
  height: 6px;
  position: absolute;
  inset: auto 0 0;
}

fieldset + .hs_error_rollup .hs-main-font-element { display: none; }

/* Purple redesigned popup form */
.sp-form-wrap {
  max-width: 680px !important;
  width: 95% !important;
  margin: 0 auto;
  background: transparent !important;
  overflow: visible !important;
}

.sp-form-card {
  flex: 1 1 100% !important;
  width: 100% !important;
  padding: 36px 36px 28px !important;
  background: #0a0a0a !important;
  border-radius: 18px !important;
  position: relative;
  border: 1.5px solid transparent;
  background-clip: padding-box !important;
}

/* Purple gradient border via pseudo-element */
.sp-form-card::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 18px;
  background: linear-gradient(180deg, #491275 0%, #7c2dd6 50%, #491275 100%);
  z-index: -1;
  pointer-events: none;
}

.sp-form-card .action-link {
  color: #a78bfa !important;
  text-align: center;
  display: block;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 6px;
  text-decoration: none;
}

.sp-form-card .form-title {
  color: #fff !important;
  font-size: 30px !important;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  margin: 0 0 28px !important;
}

/* HubSpot form inside popup */
.sp-form-card .hbspt-form,
.sp-form-card .hs-form,
.sp-form-card form.hs-form {
  background: transparent !important;
  color: #f5f5f5 !important;
}

.sp-form-card .hs-form fieldset {
  max-width: none !important;
  width: 100% !important;
  display: flex;
  gap: 18px;
  margin-bottom: 14px;
  position: relative;
}

.sp-form-card .hs-form fieldset .hs-form-field {
  flex: 1 1 50%;
  width: auto !important;
  float: none !important;
  padding: 0 !important;
}

.sp-form-card .hs-form fieldset.form-columns-1 .hs-form-field {
  flex: 1 1 100%;
}

.sp-form-card .hs-form fieldset .input { margin-right: 0 !important; }

.sp-form-card .hs-form label {
  display: block !important;
  color: #cbcbcb !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.sp-form-card .hs-form label .hs-form-required {
  color: #a78bfa;
  margin-left: 2px;
}

.sp-form-card .hs-form input[type="text"],
.sp-form-card .hs-form input[type="email"],
.sp-form-card .hs-form input[type="tel"],
.sp-form-card .hs-form input[type="number"],
.sp-form-card .hs-form select,
.sp-form-card .hs-form textarea {
  width: 100% !important;
  background: #0a0a0a !important;
  border: 1.5px solid #491275 !important;
  border-radius: 10px !important;
  color: #f5f5f5 !important;
  padding: 13px 16px !important;
  font-size: 15px !important;
  font-family: proxima-nova, sans-serif !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  min-height: 48px;
}

.sp-form-card .hs-form textarea {
  min-height: 120px;
  resize: vertical;
}

.sp-form-card .hs-form input::placeholder,
.sp-form-card .hs-form textarea::placeholder {
  color: #7a7a7a !important;
  opacity: 1;
}

.sp-form-card .hs-form input:focus,
.sp-form-card .hs-form select:focus,
.sp-form-card .hs-form textarea:focus {
  border-color: #a78bfa !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.18) !important;
}

.sp-form-card .hs-form .hs-error-msgs {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
}

.sp-form-card .hs-form .hs-error-msgs label {
  color: #f87171 !important;
  text-transform: none !important;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0;
}

/* Phone field with intl select */
.sp-form-card .hs-form .hs-input.hs-fieldtype-intl-phone {
  display: flex;
  gap: 8px;
}

.sp-form-card .hs-form .hs-input.hs-fieldtype-intl-phone select { flex: 0 0 96px; }
.sp-form-card .hs-form .hs-input.hs-fieldtype-intl-phone input  { flex: 1; }

/* Checkbox / consent */
.sp-form-card .hs-form .hs-form-booleancheckbox label,
.sp-form-card .hs-form .legal-consent-container label {
  display: flex !important;
  align-items: center;
  gap: 10px;
  text-transform: none !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  font-size: 14px !important;
  color: #cbcbcb !important;
}

.sp-form-card .hs-form input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: #7c2dd6;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 4px !important;
}

/* Submit button */
.sp-form-card .hs-form .hs_submit {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
}

.sp-form-card .hs-form .hs-button,
.sp-form-card input.hs-button.primary.large {
  background: #491275 !important;
  background-image: linear-gradient(180deg, #5b1b8a 0%, #491275 100%) !important;
  color: #fff !important;
  border: none !important;
  padding: 14px 48px !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(73, 18, 117, 0.35) !important;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  margin-top: 0 !important;
  width: auto !important;
  min-width: 160px;
}

.sp-form-card .hs-form .hs-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(73, 18, 117, 0.5) !important;
}

.sp-form-card .privacy-note {
  color: #7a7a7a !important;
  font-size: 12px !important;
  line-height: 1.5;
  text-align: center;
  margin-top: 18px;
}

.sp-form-card .privacy-link {
  color: #a78bfa !important;
  text-decoration: underline;
}

/* Close button */
#new-demo-popup .formpopup__close {
  position: absolute;
  right: -14px;
  top: -14px;
  z-index: 10;
  cursor: pointer;
  line-height: 0;
}

/* Responsive - demo popup */
@media (max-width: 1290px) {
  .form-title            { margin-bottom: 0; }
  .demo-right            { padding: 20px; }

  .demo-form input,
  .demo-form select,
  .demo-form textarea    { min-height: 40px; }

  .demo-form textarea    { margin-bottom: 15px; }
  .demo-form select      { min-height: 49px !important; }
}

@media (max-width: 768px) {
  .demo-content {
    flex-direction: column;
    width: 95%;
  }

  .form-title  { font-size: 22px; }
  .privacy-note { font-size: 12px; }

  .demo-form fieldset .input { margin-right: 0 !important; }

  .demo-left,
  .demo-right {
    flex: 1 1 100%;
    padding: 20px;
    text-align: center;
  }

  a#sdfsd  { position: absolute; right: -8px; top: -4px; }
  .demo-left { display: none; }
  .inline-fields { flex-direction: column-reverse; }
}

@media (max-width: 640px) {
  .sp-form-card                                    { padding: 24px 18px !important; }
  .sp-form-card .form-title                        { font-size: 22px !important; }
  .sp-form-card .hs-form fieldset                  { flex-direction: column; gap: 14px; }
  .sp-form-card .hs-form fieldset .hs-form-field   { flex: 1 1 100%; }
  .sp-form-card .hs-form .hs-button                { width: 100% !important; }
}

/* =============================================================
   SECTION 29: MOBILE POPUP SLIDE-UP
   ============================================================= */

.closeicon {
  position: absolute;
  right: 15px;
  top: 15px;
}

.closeicon svg {
  height: 20px;
  width: 20px;
  fill: #505050;
}

.mobile-popup {
  background: #002a7d;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 20px 20px 0 0;
  z-index: 3;
}

.mobile-popup.mystyle { background: #fff; }

p.swipe.swipe-up {
  padding: 20px;
  text-align: center;
  color: #fff;
  font-family: "proxima-nova", sans-serif;
  font-weight: 600;
  font-size: 21px;
}

.mobile-popup.mystyle p.swipe.swipe-up { display: none; }

.show-content {
  display: none;
  padding: 42px 17px 27px 17px;
  position: relative;
}

.show-content .close {
  content: "";
  position: absolute;
  width: 38px;
  height: 4px;
  background: #bebebe;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 4px;
  top: 11px;
}

.show-content img  { width: 85%; margin: 0 auto; }
.show-content h4   { font-size: 19px; line-height: 20px; margin: 15px 0; }
.show-content p    { font-size: 16px; line-height: 24px; }

.inner-content {
  text-align: center;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 10px;
}

.show-content .button {
  width: 100%;
  border-radius: 10px;
  font-size: 18px;
  padding: 15px;
  line-height: 18px;
}

.swipe.swipe-up svg      { margin-right: 5px; }
.swipe-up .swipe-text    { font-size: 20px; }
.swipe-up .red           { color: #ffc526; }

.mobile-popup.mystyle .show-content { display: block; }

@media screen and (max-width: 768px) {
  #mobile_popup { display: none; }
}

@media screen and (min-width: 769px) {
  #mobile_popup { display: none !important; }
  a.mblbtn      { display: none; }
}


/* =============================================================
   SECTION 30: MID CTA BANNER SECTION
   ============================================================= */

.middle-cta {
  position: relative !important;
  padding: 60px 10px !important;
  background-color: #0453d5;
  text-align: center;
}

.middle-cta .left {
  position: absolute;
  height: 60%;
  width: 20%;
  top: 50%;
  transform: translateY(-50%);
  animation-name: slidein1;
  animation-duration: 3s;
  transition-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.middle-cta .right {
  position: absolute;
  height: 60%;
  width: 20%;
  top: 50%;
  transform: translateY(-50%);
  animation-name: slidein2;
  animation-duration: 3s;
  transition-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.mid-cta {
  max-width: 80%;
  margin: 0 auto;
}

.mid-cta h3 {
  font-size: 40px;
  line-height: 36px;
  color: #fff;
  text-transform: capitalize;
  margin-bottom: 10px;
  position: relative;
  text-align: center;
  font-family: "proxima-nova", sans-serif;
  font-weight: 400;
}

.mid-cta h3 b {
  font-family: "proxima-nova", sans-serif;
  font-weight: 600;
  margin-top: 20px;
  display: block;
  line-height: 36px;
}

.mid-cta p {
  color: #fff;
  font-size: 18px;
  font-family: "proxima-nova", sans-serif;
  font-weight: 400;
  padding-top: 10px;
}

.mid-cta a {
  font-family: "proxima-nova", sans-serif;
  font-weight: 600;
  height: 50px;
  line-height: 50px;
  padding: 0 40px;
}

.expand-content { position: relative; z-index: 99; }

/* Slide-in keyframes for decorative side elements */
@media (max-width: 1600px) {
  @keyframes slidein1 {
    0%   { left: -10px; }
    50%  { left: -30px; }
    100% { left: -10px; }
  }

  @keyframes slidein2 {
    0%   { right: -10px; }
    50%  { right: -30px; }
    100% { right: -10px; }
  }
}

@media (min-width: 1600px) {
  @keyframes slidein1 {
    0%   { left: -70px; }
    50%  { left: -55px; }
    100% { left: -70px; }
  }

  @keyframes slidein2 {
    0%   { right: -70px; }
    50%  { right: -55px; }
    100% { right: -70px; }
  }
}

@media screen and (max-width: 768px) {
  .mid-cta        { max-width: 95% !important; }
  .middle-cta     { padding: 0 0 !important; }
  .middle-cta svg { display: none; }

  .mid-cta {
    padding: 40px 10px !important;
    max-width: 100%;
  }

  .mid-cta p    { font-size: 14px !important; padding: 0 !important; }
  .mid-cta h3 b { margin-top: 10px; font-size: 25px; }
  .mid-cta h3   { font-size: 20px !important; line-height: 20px !important; }
  .mid-cta .button { margin: 15px 0 0; }
}

@media screen and (max-width: 340px) {
  .mid-cta h3 { font-size: 19px !important; line-height: 20px !important; }
  .mid-cta p  { font-size: 13px !important; }
}

@media screen and (max-width: 480px) {
  .mid-cta a { width: 195px !important; font-size: 17px !important; }
}


/* =============================================================
   SECTION 31: BOTTOM DUAL CTA CARDS
   ============================================================= */

.new-bottom-cta {
  margin-bottom: 50px;
  padding-top: 40px;
}

.new-cta-wrap {
  display: flex;
  align-items: flex-start;
  margin: 0 auto;
}

.cta-com {
  box-shadow: 0 3px 21px rgba(0, 110, 255, 0.3);
  padding: 70px 60px;
  border-radius: 10px;
  position: relative;
  width: 50%;
  transition: all ease 0.3s;
  bottom: 0;
}

.cta-com:hover { bottom: 10px; }

.cta-com.cta-left  { margin-right: 30px; }
.cta-com.cta-right { background: #0042ff; margin-left: 30px; }

.cta-com img {
  margin: 0;
  display: block;
  padding-bottom: 40px;
  width: auto;
  height: 97px;
}

.cta-com svg {
  height: 50px;
  width: auto;
  display: block;
}

.cta-com h6 {
  font-size: 32px;
  line-height: 32px;
  font-family: "proxima-nova", sans-serif;
  font-weight: 700;
  color: #000;
}

.cta-com.cta-right h6 { color: #fff; }

.cta-com p {
  font-size: 19px;
  line-height: 28px;
  font-family: "proxima-nova", sans-serif;
  font-weight: 600;
}

.cta-com.cta-right p {
  color: #fff;
  font-size: 19px;
  line-height: 28px;
  font-family: "proxima-nova", sans-serif;
  font-weight: 600;
}

.cta-com span {
  display: block;
  font-size: 14px;
  line-height: 32px;
  font-family: "proxima-nova", sans-serif;
  font-weight: 600;
}

.cta-com.cta-right span { color: #fff; }

.cta-com a {
  background: #fb7d17;
  padding: 10px 20px;
  transition: all ease 0.4s;
  min-width: 170px;
  display: inline-block;
  text-align: center;
  color: #fff;
  font-family: "proxima-nova", sans-serif;
  font-weight: 700;
  margin-top: 25px;
  font-size: 16px;
  z-index: 2;
}

.cta-com.cta-right a {
  background: transparent;
  color: #fff;
  border: solid 1px #fff;
}

.cta-com.cta-right a:hover {
  background: #fb7d17;
  border: solid 1px #fb7d17;
  color: #fff;
}

/* Decorative pattern backgrounds */
.cta-com.cta-left::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 0;
  height: 100%;
  width: 180px;
  background-image: url(assets/images/cta-pattern.svg);
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1;
}

.cta-com.cta-right::after {
  content: '';
  position: absolute;
  right: -15%;
  bottom: -20px;
  height: 60%;
  width: 180px;
  background-image: url(assets/images/cta-back.svg);
  background-repeat: no-repeat;
  background-size: contain;
  z-index: -1;
}

@media screen and (max-width: 1024px) {
  .cta-com    { padding: 25px; }
  .cta-com h6 { font-size: 28px; }
}

@media screen and (max-width: 768px) {
  .new-cta-wrap { max-width: 100%; }
  .new-bottom-cta { padding: 30px 0; }
  .cta-com h6 { font-size: 23px; }
  .cta-com p  { font-size: 15px; line-height: 28px; }
}

@media screen and (max-width: 640px) {
  .new-cta-wrap { flex-wrap: wrap; }

  .cta-com {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 25px;
  }

  .cta-com img          { padding-bottom: 20px; }
  .cta-com.cta-left     { margin-bottom: 20px; }
  .cta-com h6           { font-size: 20px; }
  .cta-com.cta-right::after { content: none; }
  .new-bottom-cta       { padding: 0; }
  .cta-com svg          { height: 35px; }

  .cta-com.cta-left::after {
    width: 100px;
    z-index: -1;
  }
}


/* =============================================================
   SECTION 32: MAIN POPUP MODAL (Demo / Lead popup)
   ============================================================= */

.popup__content {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 960px;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.mobile-banner { display: none; }

.contents {
  display: flex;
  position: relative;
}

.contents img { width: 100%; }

.contents h3 {
  font-size: 28px;
  line-height: 40px;
  font-family: "proxima-nova", sans-serif;
  font-weight: 800;
  position: relative;
  text-align: left;
  color: #000;
  margin-bottom: 20px;
}

.contents h3 span {
  font-size: 20px;
  display: block;
  color: #000;
  font-family: "proxima-nova", sans-serif;
  font-weight: 400;
}

.contents h3 b {
  color: #000;
  text-align: right;
  display: block;
  font-size: 20px;
}

.contents h3::after {
  content: "";
  position: absolute;
  width: 65px;
  height: 2px;
  background-color: #000;
  left: 0;
  bottom: -8px;
}

.popup-contw ul li {
  padding-left: 25px;
  font-size: 17px;
  line-height: 28px;
  font-family: "proxima-nova", sans-serif;
  font-weight: 600;
  margin-bottom: 10px;
  text-align: left;
  position: relative;
}

.contents a {
  font-family: "proxima-nova", sans-serif;
  font-weight: 700;
  height: 55px;
  display: inline-block;
  background: #fb7d17;
  border-radius: 3px;
  color: #fff;
  text-align: center;
  font-size: 22px;
  line-height: 55px;
  padding: 0 25px;
  border: none;
  margin: auto;
  margin-top: 20px;
  width: 80%;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  z-index: 1;
}

.popup__close {
  text-align: center;
  border-radius: 50%;
  position: absolute;
  left: -30px;
  top: -20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
}

.popup__close svg { height: 68px; width: 68px; }

/* Popup two-column layout */
.popup-contw {
  width: 50%;
  padding: 30px;
  background: #96C4FD;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}

.popup-contw img {
  height: auto;
  margin: 0 auto;
  margin-top: 25px;
  width: 90%;
}

.popup-imgw {
  width: 50%;
  background: #fff;
  padding: 30px;
  text-align: center;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}

.popup-imgw h5 {
  font-size: 36px;
  line-height: 48px;
  font-family: proxima-nova, sans-serif;
  font-weight: 800;
  position: relative;
  text-align: center;
  color: #000;
  margin-bottom: 20px;
}

.popup-imgw h5 b {
  font-family: proxima-nova, sans-serif;
  font-weight: 800;
  position: relative;
  z-index: 2;
}

.popup-imgw h5 b::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(assets/images/yellow-brush.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left;
  left: 0;
  top: 0;
  z-index: -1;
}

.popup-imgw p {
  font-size: 18px;
  line-height: 28px;
  font-family: proxima-nova, sans-serif;
  font-weight: 600;
  text-align: center;
  width: 90%;
  margin: auto;
}

.popup-imgw ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 30px;
}

.popup-imgw ul li       { text-align: center; width: 33%; }
.popup-imgw ul li img   { height: 35px; width: auto; margin: auto; margin-bottom: 10px; }
.popup-imgw ul li:nth-child(2) img { transform: scale(1.5); }

.popup-imgw ul li span {
  display: block;
  font-size: 18px;
  line-height: 28px;
  font-family: proxima-nova, sans-serif;
  font-weight: 600;
}

.popup-contw ul li::before {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  background-image: url(assets/images/grey-tick.svg);
  background-size: cover;
  left: 0;
  top: 6px;
}

/* Dots in popup */
ul.dots { display: inline-flex; }

.dots li {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #000;
  position: relative;
  animation: wave 1.3s linear infinite;
  margin-right: 5px;
}

.dots li:first-child  { background: #ff0935; }
.dots li:nth-child(2) { background: #ffd119; animation-delay: -1.1s; }
.dots li:last-child   { background: #0dcea6; animation-delay: -0.9s; }

/* Responsive - popup modal */
@media screen and (max-width: 1299px) {
  .popup__content            { width: 900px; }
  .contents h3               { font-size: 26px; line-height: 36px; }
  .popup-imgw h5             { font-size: 32px; line-height: 40px; }
  .popup-contw ul li         { line-height: 26px; font-size: 16px; }
  .popup-imgw p              { font-size: 16px; line-height: 26px; }
}

@media screen and (max-width: 1024px) {
  .popup-contw ul li { font-size: 16px; line-height: 26px; }
  .popup-imgw h5     { font-size: 32px; line-height: 42px; }
}

@media screen and (max-width: 820px) {
  .popup__content { width: 600px; }
  .contents       { flex-wrap: wrap; }

  .popup-contw {
    width: 100%;
    border-top-right-radius: 24px;
    border-bottom-left-radius: 0;
  }

  .popup-imgw {
    width: 100%;
    border-top-right-radius: 0;
    border-bottom-left-radius: 24px;
  }

  .contents h3      { display: none; }
  .popup-contw ul   { display: none; }
  .popup-contw img  { margin-top: 0; }
}

@media screen and (max-width: 641px) {
  .popup-imgw p                   { width: 100%; }
  .popup-contw img                { width: 90%; }
  .popup__content                 { width: 320px; }
  .popup-imgw                     { padding: 20px; }
  .popup-imgw h5                  { font-size: 23px; line-height: 32px; margin-bottom: 10px; }
  .popup-imgw ul                  { padding-top: 20px; }
  .popup-imgw ul li img           { height: 20px; width: auto; }
  .popup-imgw ul li svg           { width: 55px; }
  .popup-imgw ul li span          { font-size: 16px; }
}

@media screen and (max-width: 640px) {
  .mobile-banner    { display: block; position: relative !important; }

  .popup-imgw img {
    height: auto;
    top: 0;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
  }

  .popup-contw ul.dots  { display: none; }
  .web-img              { display: none; }

  .popup__content {
    width: 90%;
    padding: 0 !important;
    background-size: 100% 100% !important;
    border-radius: 30px;
    background: #eff3ff;
  }

  .contents          { flex-wrap: wrap; }
  .popup-contw       { width: 100%; padding: 20px; text-align: center; }
  .popup-imgw        { width: 100%; }

  .contents .popup-contw h3 {
    text-align: center;
    font-size: 20px !important;
    line-height: 30px !important;
  }

  .contents p       { text-align: center; }
  .popup-contw img  { margin: 0 auto; margin-top: 15px; width: 80%; }

  .contents h3::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .contents a {
    height: 40px;
    line-height: 40px;
    width: 70%;
    margin-top: 20px;
    font-size: 16px;
  }
}

@media screen and (max-width: 481px) {
  .contents h1 { font-size: 16px !important; line-height: 26px !important; }
  .contents p  { font-size: 14px !important; line-height: 22px !important; }
}


/* =============================================================
   CONTACT PAGE STYLES
   Scoped to contact.html — .contact-header, .contact-page,
   .form-card, .sp-form, .send-btn, .success-msg
   ============================================================= */

/* =============================================================
   SECTION 3: HEADER
   ============================================================= */

.contact-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  padding: 16px 60px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: #0a0a0a;
  border-bottom: 1px solid #1a1a1a;
  z-index: 999999;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.contact-header .logo-link {
  display: inline-flex;
  align-items: center;
}

.contact-header .logo-link img {
  height: 54px;
  width: auto;
  display: block;
  object-fit: contain;
}


/* =============================================================
   SECTION 4: PAGE LAYOUT
   ============================================================= */

.contact-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 24px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 36px;
}

.contact-intro h1 {
  font-size: 38px;
  font-weight: 700;
  margin: 0 0 14px;
  line-height: 1.2;
  /* Purple gradient text */
  background: linear-gradient(90deg, #a78bfa, #c084fc, #e9d5ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.contact-intro p {
  font-size: 18px;
  color: #cbcbcb;
  margin: 0;
  line-height: 1.6;
}


/* =============================================================
   SECTION 5: FORM CARD
   Card has a purple gradient border via ::before pseudo-element.
   ============================================================= */

.form-card {
  position: relative;
  width: 100%;
  max-width: 920px;
  background: var(--sp-surface);
  border-radius: 20px;
  padding: 40px;
  border: 1.5px solid transparent;
  background-clip: padding-box;
}

/* Purple gradient border */
.form-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 20px;
  background: linear-gradient(180deg, #491275 0%, #7c2dd6 50%, #491275 100%);
  z-index: -1;
  pointer-events: none;
}


/* =============================================================
   SECTION 6: FORM LAYOUT
   ============================================================= */

.sp-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Field label */
.form-field label {
  display: block;
  color: #f5f5f5;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.form-field .required {
  color: #a78bfa;
  margin-left: 2px;
}

/* Field inputs */
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  background: transparent;
  border: 1.5px solid var(--sp-border);
  border-radius: 12px;
  color: #f5f5f5;
  padding: 14px 18px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #7a6a90;
  opacity: 1;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.18);
}

.form-field textarea {
  min-height: 140px;
  resize: vertical;
  font-family: inherit;
}


/* =============================================================
   SECTION 7: PHONE FIELD WITH COUNTRY CODE SELECT
   ============================================================= */

.phone-group {
  display: flex;
  gap: 12px;
  align-items: center;
}

.phone-group select {
  flex: 0 0 110px;
  appearance: none;
  -webkit-appearance: none;
  background-color: #140a24;
  color: #ffffff;
  border: 1.5px solid #491275;
  border-radius: 12px;
  padding: 14px 36px 14px 14px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  margin-top: 0;
  position: relative;
  z-index: 10;
  height: 52px;
  /* Custom dropdown arrow */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1L6 6L11 1' stroke='%23a78bfa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phone-group select option {
  background: #140a24;
  color: #ffffff;
}

.phone-group select:focus {
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.18);
}

.phone-group input {
  flex: 1;
  height: 52px;
}


/* =============================================================
   SECTION 8: FORM FOOTER (Terms + Submit)
   ============================================================= */

.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.terms {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #cbcbcb;
  font-size: 14px;
}

.terms input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--sp-purple-light);
  cursor: pointer;
  flex-shrink: 0;
}

.terms a {
  color: #a78bfa;
}

/* Submit button */
.send-btn {
  background: linear-gradient(180deg, #5b1b8a 0%, #491275 100%);
  color: #fff;
  border: none;
  padding: 15px 52px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 8px 24px var(--sp-purple-glow);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  font-family: inherit;
}

.send-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(73, 18, 117, 0.55);
}

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


/* =============================================================
   SECTION 9: SUCCESS STATE
   Shown after successful form submission.
   ============================================================= */

.success-msg {
  display: none;
  text-align: center;
  padding: 40px 20px;
}

.success-msg.show { display: block; }

.success-msg svg  { margin: 0 auto 18px; }

.success-msg h3 {
  color: #fff;
  font-size: 24px;
  margin: 0 0 10px;
}

.success-msg p {
  color: #cbcbcb;
  margin: 0;
}

/* Hide form once submitted */
.form-card.submitted .sp-form {
  display: none;
}


/* =============================================================
   SECTION 10: RESPONSIVE
   ============================================================= */

@media (max-width: 768px) {
  .contact-header {
    padding: 14px 20px;
  }

  .contact-header .logo-link img {
    height: 42px;
  }

  .contact-page {
    padding: 32px 16px 48px;
  }

  .contact-intro h1 {
    font-size: 26px;
  }

  .contact-intro p {
    font-size: 15px;
  }

  .form-card {
    padding: 24px 20px;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .form-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .send-btn {
    width: 100%;
  }
}