/*--------------------------------------------------------------
# Design tokens
--------------------------------------------------------------*/
:root {
  /* ------------------------------------------------------------------
     COLOUR TOKENS — the complete palette for this stylesheet.
     38 solid values + 27 transparency values. Nothing outside this block
     holds a raw colour literal; change a colour here and it changes everywhere.
     ------------------------------------------------------------------ */

  /* Orange / amber — 7 values, lightest to darkest */
  --orange-01:   #fff8e7;   /* L95   22x */
  --orange-02:   #ffddb9;   /* L86    4x */
  --orange-04:   #f7c28f;   /* L76    4x */
  --orange-06:   #f5bb44;   /* L61   35x */
  --orange-08:   #ffae35;   /* L60    5x */
  --orange-09:   #ffc431;   /* L60    4x */
  --orange-12:   #ff8200;   /* L50  130x */

  /* Yellow — 5 values, lightest to darkest */
  --yellow-01:   #fff2b2;   /* L85   19x */
  --yellow-02:   #fff48c;   /* L77    1x */
  --yellow-03:   #ffe67a;   /* L74    1x */
  --yellow-04:   #fedc5e;   /* L68   22x */
  --yellow-05:   #fff703;   /* L51    2x */

  /* Red — 4 values, lightest to darkest */
  --red-01:      #ffb9b9;   /* L86    4x */
  --red-02:      #f36445;   /* L61    2x */
  --red-03:      #ff0000;   /* L50    4x */
  --red-06:      #ce152a;   /* L45   10x */

  /* Green / teal — 2 values, lightest to darkest */
  --green-01:    #00b478;   /* L35    3x */
  --green-02:    #009854;   /* L30    2x */

  /* Cyan — 1 values, lightest to darkest */
  --cyan-01:     #1c8097;   /* L35    2x */

  /* Blue / slate — 6 values, lightest to darkest */
  --blue-01:     #eaedf5;   /* L94    5x */
  --blue-02:     #dbdefe;   /* L93    1x */
  --blue-04:     #b9cdff;   /* L86    1x */
  --blue-05:     #5b45c9;   /* L53    1x */
  --blue-09:     #262261;   /* L26    2x */
  --blue-10:     #2d4351;   /* L25   11x */

  /* Neutral / grayscale — 13 values, lightest to darkest */
  --neutral-01:  #ffffff;   /* L100  133x */
  --neutral-02:  #dadce0;   /* L87   13x */
  --neutral-03:  #cccccc;   /* L80   13x */
  --neutral-04:  #bbbbbb;   /* L73    3x */
  --neutral-05:  #aaaaaa;   /* L67    8x */
  --neutral-06:  #999999;   /* L60    7x */
  --neutral-08:  #808080;   /* L50    4x */
  --neutral-09:  #6a6a6a;   /* L42    2x */
  --neutral-10:  #595959;   /* L35   10x */
  --neutral-11:  #444444;   /* L27    5x */
  --neutral-13:  #333333;   /* L20   21x */
  --neutral-15:  #1a1a1a;   /* L10    5x */
  --neutral-16:  #000000;   /* L00   72x */

  /* Transparency — 27 values. Alpha must survive, so these stay separate
     from the solids. Identical colours written differently are merged. */
  --alpha-black-10:      rgba(0, 0, 0, 0.1);        /* 3x, merged from 2 spellings */
  --alpha-black-50:      rgba(0, 0, 0, 0.5);        /* 3x, merged from 2 spellings */
  --alpha-black-08:      rgba(0, 0, 0, 0.08);       /* 3x, merged from 2 spellings */
  --alpha-black-00:      rgba(0, 0, 0, 0);          /* 2x */
  --alpha-black-06:      rgba(0, 0, 0, 0.06);       /* 2x */
  --alpha-black-30:      rgba(0, 0, 0, 0.3);        /* 2x */
  --alpha-black-40:      rgba(0, 0, 0, 0.4);        /* 2x */
  --alpha-black-60:      rgba(0, 0, 0, 0.6);        /* 1x */
  --alpha-black-41:      rgba(0, 0, 0, 0.41);       /* 1x */
  --alpha-black-18:      rgba(0, 0, 0, 0.18);       /* 1x */
  --alpha-black-07:      rgba(0, 0, 0, 0.07);       /* 1x */
  --alpha-black-55:      rgba(0, 0, 0, 0.55);       /* 1x */
  --alpha-black-15:      rgba(0, 0, 0, 0.15);       /* 1x */
  --alpha-black-09:      rgba(0, 0, 0, 0.09);       /* 1x */
  --alpha-tint-10:       rgba(68, 88, 144, 0.1);    /* 8x, merged from 2 spellings */
  --alpha-tint-60:       rgba(60, 60, 67, 0.6);     /* 5x */
  --alpha-tint-25:       rgba(127, 137, 161, 0.25); /* 3x */
  --alpha-tint-50:       rgba(204, 204, 204, 0.5);  /* 1x */
  --alpha-tint-30:       rgba(127, 137, 161, 0.3);  /* 1x */
  --alpha-tint-20:       rgba(100, 100, 111, 0.2);  /* 1x */
  --alpha-tint-14:       rgba(37, 44, 54, 0.14);    /* 1x */
  --alpha-tint-35:       rgba(255, 130, 0, 0.35);   /* 1x */
  --alpha-tint-20-2:     rgba(99, 99, 99, 0.2);     /* 1x */
  --alpha-tint-75:       rgba(34, 46, 58, 0.75);    /* 1x */
  --alpha-white-25:      rgba(255, 255, 255, 0.25); /* 1x */
  --alpha-white-10:      rgba(255, 255, 255, 0.1);  /* 1x */
  --alpha-white-91:      rgba(255, 255, 255, 0.91); /* 1x */

  /* ------------------------------------------------------------------
     SEMANTIC ALIASES — prefer these in components; they say what the
     colour is for. Everything above is the raw palette.
     ------------------------------------------------------------------ */
  --brand-orange:        var(--orange-12);      /* fill only: 2.5:1 on white, never text on light */
  --brand-orange-hover:  var(--orange-06);      /* #f5bb44 - original hover fill */
  --brand-orange-text:   var(--orange-12);      /* #ff8200 - original. 2.5:1 on white: fails AA */
  --brand-yellow:        var(--orange-06);     
  --brand-tint:          var(--orange-01);      /* light orange wash */
  --on-brand:            var(--neutral-01);     /* white on --brand-orange: 2.5:1, fails AA (as originally designed) */

  /* Typography — the stylesheet's original stack, restored. No webfont is
     loaded; these are all locally-installed faces. */
  --font-sans: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  background: var(--neutral-01);
  color: var(--neutral-11);
  font-family: var(--font-sans);
}

a {
  color: var(--neutral-16);
  text-decoration: none;
  transition: 0.5s;
}

a:hover,
a:active,
a:focus {
  color: var(--brand-orange)!important;
  outline: none;
  text-decoration: none;
}

p {
  padding: 0;
  margin: 0 0 30px 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  margin: 0 0 20px 0;
  padding: 0;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

button,
input,
optgroup,
select,
textarea {
  font-family: -apple-system,
    BlinkMacSystemFont, sans-serif;
  font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
}

textarea,select,input[type=date],input[type=datetime],input[type=datetime-local],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week] {
	border-radius: 5px;
	background: var(--neutral-01);
	border: 1px solid var(--alpha-tint-50);
	color: var(--neutral-10);
	padding: 10px 12px;
	outline: 0;
	margin: 0;
	vertical-align: middle;
	width: 100%
}

textarea:focus,select:focus,input[type=date]:focus,input[type=datetime]:focus,input[type=datetime-local]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus {
	outline-color: var(--alpha-black-10);
	outline-offset: -2px;
	outline-style: auto;
	outline-width: 5px
}

textarea[disabled],select[disabled],input[type=date][disabled],input[type=datetime][disabled],input[type=datetime-local][disabled],input[type=email][disabled],input[type=month][disabled],input[type=number][disabled],input[type=password][disabled],input[type=search][disabled],input[type=tel][disabled],input[type=text][disabled],input[type=time][disabled],input[type=url][disabled],input[type=week][disabled] {
	color: var(--neutral-01)
}

input[disabled],select[disabled],select[disabled] option,select[disabled] optgroup,textarea[disabled] {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	-moz-user-select: -moz-none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	user-select: none;
	color: var(--neutral-05);
	cursor: default
}

input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
	color: var(--neutral-05)
}

input:-moz-placeholder,textarea:-moz-placeholder {
	color: var(--neutral-05)
}

button,input[type=reset],input[type=submit],input[type=button] {
	-moz-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	-webkit-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	transition: all .3s ease-out;
	-webkit-border-radius: 99px;
	-moz-border-radius: 99px;
	-ms-border-radius: 99px;
	border-radius: 99px;
	background: var(--neutral-03);
	border: 0;
	padding: 12px 28px;
	font-size: 14px;
	font-weight: 700;
	color: var(--neutral-01);
	text-shadow: none;
	cursor: pointer;
	display: inline-block;
	outline: 0;
	overflow: visible;
	margin: 0;
	text-decoration: none;
	vertical-align: middle;
	width: auto
}

button:hover,input[type=reset]:hover,input[type=submit]:hover,input[type=button]:hover {
	text-decoration: none;
	background: var(--neutral-03)
}

button[disabled],input[type=reset][disabled],input[type=submit][disabled],input[type=button][disabled] {
	background: var(--neutral-02) !important;
	color: var(--alpha-black-60);
	cursor: not-allowed
}

button[disabled]:hover,input[type=reset][disabled]:hover,input[type=submit][disabled]:hover,input[type=button][disabled]:hover {
	background: var(--neutral-02)
}

.ma {
  margin-left: auto;
  margin-right: auto;
}

.pr {
  position: relative !important;
}

.orange {
  color: var(--brand-yellow) !important;
}

button#searchBtn:hover {
  background: transparent !important;
}

ul, li {list-style-type: none;}

.h420 {
  max-height: 420px;
}

.h150 {
  height: 150px;
}

/*--------------------------------------------------------------
# Header Social Link Session
--------------------------------------------------------------*/
.header-social-links {
  background-color: var(--neutral-13);
  width: 100%;
  float: right;
  position: fixed;
  top: 0px;
  z-index: 9999;
  text-align: right;
  padding: 5px;
}

#header {
  margin-top: 34px;
  z-index: 9999;
}

.header-social-links .social-links a {
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-01);
  margin-right: 4px;
  border-radius: 50%;
  text-align: center;
  transition: 0.3s;
  margin-left: 10px;
}

.header-social-links .social-links a i {
  line-height: 0;
}

.header-social-links .social-links a:hover {
  color: var(--brand-orange);
}

.header-social-links .share-btn{
  border: 2px solid var(--brand-orange);
  border-radius: 15px !important;
  padding: 3px 8px;  
  color: var(--brand-orange) !important;
}

.header-social-links .share-btn:hover{
  border: 2px solid var(--brand-yellow);
  background-color: var(--brand-yellow);
  color: var(--neutral-16) !important;
}


/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  height: 80px;
  z-index: 997;
  transition: all 0.5s;
  background-color: var(--brand-tint);
  /* background-image: linear-gradient(#FFF2B2, #FAC03D); */
  box-shadow: 0px 0px 30px var(--alpha-tint-30);
}

#header.header-scrolled {
  height: 60px;
}

#header .logo h1 {
  font-size: 28px;
  margin: 0;
  padding: 0;
  font-weight: 400;
  letter-spacing: 1px;
}

@media (max-width: 991px) {
  #header .logo h1 {
    font-size: 28px;
    line-height: 41px;
  }
}

#header .logo h1 a,
#header .logo h1 a:hover {
  color: var(--neutral-16);
  text-decoration: none;
}

#header .logo img {
  padding: 0;
  max-height: 44px;
  margin-right: 10px;
  float: left;
  margin-top: 0;
  margin-right: 8px;
}

/*--------------------------------------------------------------
# Section with background
--------------------------------------------------------------*/
.section-bg {
  background: var(--yellow-01);
  color: var(--neutral-16);
}

.section-bg-grey {
  background-color: var(--neutral-01) !important;
}

.section-bg a {
  color: var(--neutral-01);
}

.section-bg a:hover {
  color: var(--brand-orange);
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumb li a:hover {
  color: var(--brand-orange);
}


/* Session Nav Section
--------------------------------*/
#about {
  background: var(--neutral-01);
  padding: 40px 0;
}

#about .about-container .background {
  margin: 20px 0;
}

#about .about-container .content h6,
#about .about-extra .content h6 {
  /* background: #fff; */
  /* padding: 0px; */
  margin-bottom: 20px;
}

#about .about-container .title {
  color: var(--neutral-13);
  font-weight: 700;
  font-size: 32px;
}

#about .about-container p,
#about .about-extra p {
  line-height: 30px;
  font-size: 1.1em;
}

#about .about-container p:last-child {
  margin-bottom: 0;
}

#about .about-extra,
#about .about-container {
  /* padding-top: 60px; */
  align-items: center;
}

#about .about-extra h4,
#about .about-container h4 {
  font-weight: 600;
  font-size: 24px;
}

/* Services Section
--------------------------------*/
#services {
  padding: 80px 0 40px 0;
}

#services .circle {
  padding: 30px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  margin: 0 10px 40px 10px;
  background: var(--neutral-01);
  box-shadow: 0 10px 29px 0 var(--alpha-tint-10);
  transition: all 0.3s ease-in-out;
  text-align: center;
}

#services .container .row .col-lg-4:nth-child(4) .circle, #services .container .row .col-lg-4:nth-child(5) .circle{
  margin-bottom: 0;
}

#services .circle:hover {
  transform: translateY(-5px);
}

#services .circle .title {
  margin-left: 0px;
  font-weight: 700;
  margin-top: 15px;
  margin-bottom: 15px;
  font-size: 18px;
}

#services .circle img {
  height: 80px;
}

#services .box {
  padding: 30px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  margin: 0 10px 40px 10px;
  background: var(--neutral-01);
  box-shadow: 0 10px 29px 0 var(--alpha-tint-10);
  transition: all 0.3s ease-in-out;
}

#services .icon-coming {
  width: 88px;
  position: absolute;
  z-index: 99;
  right: 18%;
  top: -19%;
}

#services .box:hover {
  transform: translateY(-5px);
}

#services .icon {
  position: absolute;
  left: -44px;
  top: calc(48% - 72px);
}

#services .icon i {
  font-size: 64px;
  line-height: 0;
  transition: 0.5s;
}

#services .title {
  margin-left: 100px;
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 18px;
}

#services .title a {
  color: var(--neutral-16);
}

#services .box:hover .title a {
  color: var(--brand-orange);
}

#services .description {
  font-size: 14px;
  margin-left: 100px;
  line-height: 24px;
  margin-bottom: 0;
}

#services .system {
  margin-bottom: 15px;
  font-size: 14px;
  text-align: center;
}
#services u {
  color: var(--brand-yellow);
}

#services u:hover {
  color: var(--brand-orange);
}

/*--------------------------------------------------------------
# Index Session
--------------------------------------------------------------*/
[data-aos][data-aos][data-aos-duration="1000"],
body[data-aos-duration="1000"] [data-aos] {
  transition-duration: 0.5s !important;
}

.index-banner-bg {
  width: 100%;
  height: auto;
  background-size: cover;
  background-position: 0% 0%;
}

.nav-banner-bg {
  background-color: var(--neutral-01);
  width: 100%;
  height: auto;
  background-size: 100%;
  margin-top: 100px;
  background-position: 0% 28%;
}

.dot {
  height: 48px;
  width: 48px;
  background-color: var(--orange-08);
  border-radius: 50%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.bi::before,
[class^="bi-"]::before,
[class*=" bi-"]::before {
  vertical-align: -0.15em !important;
}

.index-counter-bg {
  width: 100%;
  height: auto;
}

.icon-tick {
  height: 26px !important;
  margin-right: 10px;
}

.wrapper-top {
  margin-top: 100px;
}

/*--------------------------------------------------------------
# Blog
--------------------------------------------------------------*/
.blog-left {
  float: left;
}

.blog-middle {
  padding: 33px 20px 0px 50px;
  float: left;
  text-align: left;
  width: 48%;
}

.blog-list {
  display: flow-root;
}

.blog-list a:hover {
  color: var(--neutral-16) !important;
}

.blog-list p {
  font-size: medium;
  margin-bottom: 20px;
}

.blog-list span {
  font-size: smaller;
}

.blog-list h3 {
  margin-top: 36px;
  margin-bottom: 24px;
  font-size: 28px;
}

.col {
  position: relative;
}

p img {
  width: 30%;
  vertical-align: top;
}

img {
  max-width: 100%;
  height: auto;
}

.text-right {
  text-align: right;
}

.btn {
  background: var(--brand-tint);
  border-radius: 6px;
  text-align: center;
  padding: 1% 4%;
}

a.btn {
  text-decoration: none !important;
  color: var(--neutral-16) !important;
  font-weight: 700;
}

.blog-list.container {
  background-color: var(--neutral-01);
  margin-bottom: 30px;
  border-radius: 20px;
  padding-left: 0 !important;
  padding-right: 0 !important;
  position: relative;
}

.crop-img {
  border-radius: 20px 0px 0px 20px;
  width: 100%;
  height: auto;
}

section h5 {
  font-weight: 600;
}

section {
  padding: 90px 0 30px 0;
  text-align: center;
  background-color: var(--neutral-01);
  margin: 0px;
  margin-bottom: 0px;
}

section .blog {
  margin-left: auto;
  margin-right: auto;
  margin-top: 5%;
  text-align: center;
}

section .blog li {
  list-style-type: disc;
  text-align: left;
}

section .blog p img {
  width: 80%;
  border-radius: 20px;
}

section .blog .bottom{
  padding-top: 30px;
  border-top: 1px solid var(--alpha-black-41);
  text-align: left;
}

section .blog .bottom img{
  width: 50%;
  border-radius: 0;
}

@media (max-width: 992px) {
  section .blog-left {
    width: 100%;
    text-align: center;
  }

  section .blog-middle {
    width: 100%;
    text-align: center;
    padding: 30px 20px;
  }

  section .blog-list p {
    margin: 0px 0px 10px 0px;
  }

  section .blog-list span {
    display: block;
    width: 100%;
  }

  .crop-img {
    border-radius: 20px 20px 0 0;
  }
}

/*--------------------------------------------------------------
# Password
--------------------------------------------------------------*/
.yellow-bg {
  margin-top: 60px;
}

.yellow-bg .container{
  display: flex;
    align-items: stretch;
    background: var(--neutral-01);
    box-shadow: 0px 0px 10px 4px var(--alpha-black-10);
    padding: 0;
    flex-wrap: wrap;
    border-radius: 20px;
}

.new-pwd-img {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: var(--neutral-01);
  width: 50%;
  border-radius: 20px 0 0 20px;
}

.new-pwd-img img {
  width: 80%;
  margin: 4% 0;
}

.input-content {
  border-radius: 10px;
  padding: 30px;
  text-align: center;
  display: flow-root;
  margin: 0 4%;
  z-index: 99;
}

.input-content p {
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  color: var(--alpha-tint-60);
  margin: 0px;
  margin-top: 3%;
}

.input-content h5 {
  margin-bottom: 0px;
  font-size: 18px;
}

.alert-msg {
  line-height: 10px;
  margin-top: 6px;
  margin-bottom: 16px;
}

.alert-msg i {
  color: var(--brand-yellow);
}

.alert-msg span {
  font-size: 14px;
  color: var(--brand-yellow);
}

.input-container p a {
  color: var(--brand-orange) !important;
}

.input-container button {
  background: var(--yellow-04);
  border-radius: 999em;
  text-align: center;
  font-size: small;
  color: var(--neutral-16);
  margin: 5% 0 0;
  width: 100%;
  padding: 3% 0px;
  font-family: inherit;
}

.input-container .reset-btn {
  width: 49%;
}

.input-container button.btn-light {
  background: var(--brand-tint);
  width: 49%;
}

.account-link {
  text-decoration: underline;
  font-size: small;
  color: var(--brand-orange);
}

.vip-bg-cow {
  background: url("/assets/img/img-bg-account-vip.webp");
  width: 322px;
  height: 212px;
  position: absolute;
  right: 0;
}

.free-bg-cow {
  background: url("/assets/img/img-bg-account-free.webp");
  width: 277px;
  height: 235px;
  position: absolute;
  right: 0;
}

p.forgot-link a {
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  color: var(--alpha-tint-60) !important;
}

p.forgot-link {
  margin-bottom: 0px;
}

p.tnc {
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  color: var(--alpha-tint-60);
  margin: 2% 0;
}

.input-container p a.tnclink {
  text-decoration: underline;
  color: var(--brand-yellow) !important;
}

.verify-email {
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  text-align: left;
  color: var(--alpha-tint-60);
  margin: 2% 0;
}

.verify-email a {
  background-color: var(--brand-orange);
  color: var(--neutral-01);
  border-radius: 30px;
  display: inline-block;
  text-align: center;
  /* float: right; */
  padding: 2% 8%;
}

.verify-email a:hover {
  background-color: var(--brand-yellow);
  color: var(--neutral-16) !important;
}

.btn-resend {
  float: right;
  position: absolute;
  right: 10px;
  top: 0px;
  margin-top: 4px;
}

.btn-resend button {
  width: 100%;
  padding: 6px 20px;
}

#resetpwsForm input[type="button"] {
  float: left;
}

#resetpwsForm input[type="submit"] {
  float: right;
}

.show {
  display: block;
}

.hide {
  display: none;
}

.hide-important {
  display: none !important;
}

.new-successful a {
  margin-top: 10%;
  display: block;
  font-size: medium;
}

@media (max-width: 992px) {
  .yellow-bg {
    margin-top: 80px;
  }
 
  .new-pwd-img {
    width: 100%;
    border-radius: 20px 20px 0 0;
  }

  .new-pwd-img img {
    width: 50%;
  }

  .input-content {
    width: 100%;
    margin: 0px;
    margin-bottom: 10%;
  }
}

.password-label {
  display: block;
  z-index: 999;
  position: absolute;
  top: 0;
  margin: 12px 40px 14px;
  color: var(--neutral-06);
  font-size: 15px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.password-area {
  display: flex;
  align-items: center;
  gap: 1em;
}

.password-input {
  position: relative;
  width: 100%;
}

.password-input #passInput,
.password-input #passInput1,
.password-input #resetId,
.password-input #emailCode,
.password-input #email,
.password-input #oldpassInput,
.password-input #newpassInput1,
.password-input #newpassInput2,
.password-input #affiliateCode,
.password-input #referralCode 
{
  padding-left: 40px;
  width: 100%;
  border-radius: 999em;
}

.password-input span {
  position: absolute;
  top: 50%;
  left: 0.7em;
  transform: translateY(-50%);
}

/* show / hide area */
.show-hide-el {
  position: absolute;
  right: 7%;
  height: 24px;
}

.toggle {
  position: absolute;
  width: 24px;
  height: 24px;
  left: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.text-box {
  position: relative;
  margin-top: 4%;
}

input[type="password"]:focus {
  outline: none;
}

label.active {
  top: -23px;
  background-color: var(--neutral-01);
  padding: 0 10px;
}

.icon-lock {
  background-image: url("/assets/img/icon-lock.webp");
  width: 14px;
  height: 18px;
}

.icon-email {
  background-image: url("/assets/img/icon-email-grey.webp");
  width: 18px;
  height: 14px;
}

.icon-code {
  background-image: url("/assets/img/icon-code.webp");
  width: 18px;
  height: 18px;
}

.icon-referral {
  background-image: url("/assets/img/icon-referral.webp");
  width: 18px;
  height: 18px;
}

/* 3. ScrollSpy active styles (see JS tab for activation) */
.section-nav li.active a {
  color: var(--neutral-13);
  font-weight: 500;
}

/* Sidebar Navigation */
.section-nav {
  text-align: left;
  margin-top: 8%;
}

.section-nav ul {
  margin: 0px;
  padding: 0px;
}

.section-nav ul li.selected {
  background-color: var(--brand-orange);
  font-size: 1em;
  color: var(--neutral-01);
}

.section-nav ul li.hide {
  display: none;
}

.section-nav ul li.selected {
  color: var(--neutral-01);
}

.section-nav ul li.selected span,
.section-nav ul li.selected p,
.section-nav ul li:hover span,
.section-nav ul li:hover p {
  color: var(--neutral-01);
}

.section-nav ul li:hover,
.section-nav ul li.selected {
  background-color: var(--brand-orange);
}

.section-nav ul li img {
  float: left;
  margin-right: 10px;
  width: 65px;
  height: auto;
}

.section-nav ul li {
  color: var(--neutral-13);
  padding: 10px;
  position: relative;
  width: 100%;
  display: flow-root;
  border-radius: 10px;
  margin-bottom: 2%;
  cursor: pointer;
}

.section-nav ul li p {
  float: left;
  padding: 0px;
  margin: 0px;
}

.section-nav ul li span {
  color: var(--neutral-06);
  float: left;
}

.section-nav a {
  text-decoration: none;
  display: block;
  color: var(--neutral-13);
  transition: all 50ms ease-in-out; /* 💡 This small transition makes setting of the active state smooth */
}

.section-nav a:hover,
.section-nav a:focus {
  color: var(--neutral-13) !important;
}

.container-fluid .row .col p,
.container-fluid .row .col h1 {
  text-align: left !important;
  padding-bottom: 0px;
}

.container-fluid .row h3,
.container-fluid .row h5 {
  text-align: left;
  margin-top: 8%;
}

.container-fluid .row hr {
  border-width: 1px !important;
  width: 100% !important;
  margin-top: 4% !important;
  margin-bottom: 4% !important;
  background-color: transparent !important;
}

.container-fluid p a {
  text-decoration: underline;
  color: var(--brand-yellow);
}

.button {
  padding: 10px 20px;
  margin-bottom: 20px;
  background: var(--yellow-04);
  border-radius: 6px;
  color: var(--neutral-13) !important;
  text-decoration: none !important;
  font-weight: 700;
  font-size: small;
}


/*--------------------------------------------------------------
# About Session
--------------------------------------------------------------*/
#about {
  background: var(--neutral-01);
  text-align: left;
  padding-bottom: 30px;
}

#about .about-container img {
  height: 420px;
}

#about .about-extra img,
#about .about-container img {
  height: 210px;
}

#about .about-extra canvas,
#about .about-container canvas {
  height: 230px;
}

#about .video {
  text-align: center;
}

#about .about-extra .btn-download,
#about .about-container .btn-download,
#about .btn-download {
  border-radius: 999em;
  padding: 14px;
  background-color: var(--yellow-04);
  color: var(--neutral-16);
  width: 60%;
  margin-top: 30px;
  cursor: pointer;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
}

#about .about-extra .btn-download:hover,
#about .btn-download:hover {
  background-color: var(--brand-orange);
  color: var(--on-brand);
}

#about .about-extra .btn-download:hover a,
#about .btn-download:hover a {
  color: var(--brand-orange);
}

#about .reasons {
  display: flex !important;
  flex-wrap: wrap;
}

#about .reason-bg {
  margin-bottom: 8%;
  justify-content: space-between;
  align-items: center;
  margin-left: 0px;
  margin-right: 0px;
}

.benefit {
  margin-top: 20px;
}

.benefit .benefit-col {
  background-color: var(--alpha-black-06); 
  border-radius: 10px; 
  margin-bottom: 20px;
  float: left;
}

.benefit .benefit-col:last-child {
  margin-right: 0px !important; 
}

.benefit img {
  height: 180px;
}

.benefit .benefit-col p {
  line-height: 26px; 
  padding: 0px 20px;
}

@media screen and (min-width: 992px) {
  .benefit .benefit-col {
    width: 31.2%;
    margin-right: 30px;
  }
}

#about .reason-bg:nth-child(3) {
  margin-bottom: 0%;
}

#about .reason-bg:nth-child(2) .img-text-center{
  text-align: right;
}

#about .reason-bg .col-lg-6{
  text-align: left;
}

#about p {
  font-size: 1.2em;
}

.cs {
  position: relative;
  overflow: unset !important;
  text-align: center;
}

#about .about-container a:hover .btn-download,
#about .about-extra a:hover .btn-download {
  background-color: var(--brand-orange);
  color: var(--on-brand);
}

#about .about-extra ul {
  padding-left: 0px;
}

#about .about-extra ul li {
  list-style-type: none;
  line-height: 40px;
}

/*--------------------------------------------------------------
# VIP
--------------------------------------------------------------*/
.container-fluid .row .why-vip img {
  width: 80%;
}

.container-fluid .row .why-vip p {
  text-align: center !important;
  color: var(--neutral-10);
  font-size: 14px;
}

.vip-level,
.vip-session,
.payment-history {
  background-color: var(--brand-tint);
  box-shadow: 0 10px 29px 0 var(--alpha-tint-10);
  border-radius: 10px;
  text-align: left;
  padding: 3%;
  font-weight: 500;
  font-size: medium;
  line-height: 24px;
  color: var(--neutral-09);
  /* min-height: 265px; */
}

.vip-level {
  width: 100%;
  float: left;
  position: relative;
  z-index: 99;
}

.vip-level .row .sdate,
.vip-level .row .edate {
  float: left;
}

.vip-session {
  width: 100%;
  float: left;
  margin-top: 4%;
}

.payment-history {
  width: 100%;
  float: left;
  margin-top: 4%;
  margin-bottom: 4%;
  position: relative;
  z-index: 99;
}

.vip-session .vip-plan {
  margin: 0px;
}

.vip-level span,
.vip-session span {
  font-weight: 500;
  font-size: medium;
  line-height: 24px;
  color: var(--neutral-16);
  display: block;
}

.vip-level .row,
.vip-session .row,
.payment-history .row {
  margin-bottom: 14px;
  z-index: 999;
  position: relative;
}

.vip-level a {
  float: right;
  text-align: right;
  text-decoration: underline;
  color: var(--brand-yellow);
}

.vip-level #btnLogout,
#chgpwdForm button[type=submit] {
  background-color: var(--brand-yellow);
}

.vip-session .vip-plan {
  margin-top: 3%;
}

.account-help {
  text-decoration: underline;
  color: var(--brand-orange);
}

.profile span {
  display: block;
}

.vip-plan {
  margin-top: 4%;
}

.vip-plan .col-md-3{
  width: 20%;
}

.plan {
  position: relative;
  text-align: center;
  font-family: montserrat, verdana, sans-serif;
  display: inline-grid;
  align-items: stretch;
  margin-top: 3%;
  margin-bottom: 2%;
}

.plan .ribbon{
    width: fit-content;
    font-size: 12px;
    padding: 4px 10px;
    position: absolute;
    top: -18px;
    border-radius: 8px;
    background-color: var(--neutral-01);
    color: var(--red-02);
    display: inline-flex;
    z-index: 9;
    border: 1px solid var(--red-02);
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin: 0 auto;
    left: 0;
    right: 0;
    font-weight: 500;
}

.plan .ribbon img{
  height: 20px;
  width: auto;
}

.plan .aoxplan {
  border: 1px solid var(--neutral-16);
  border-right: 0;
  display: flow-root;
  position: relative;
  cursor: pointer;
  min-height: 217px;
}

.plan:first-child .aoxplan {
  border-radius: 10px 0 0 10px;
}

.plan:last-child .aoxplan{
  border-right: 1px solid var(--neutral-16);
  border-radius: 0 10px 10px 0;
}

.plan ul.plan-details {
  padding: 0px;
  margin: 0px;
  width: 100%;
}

.plan-unselected .aoxplan {
  display: flow-root;
  position: relative;
  cursor: pointer;
  min-height: 217px;
}

.plan .saving {
  /* text-transform: capitalize;
  position: absolute;
  width: 50%;
  border-radius: 0 9px;
  font-weight: 500;
  line-height: 8px;
  text-align: center;
  right: 14px;
  top: 2px;
  padding: 13px;
  font-size: 16px;
  background-color: #CE152A;
  color: white;
  z-index: 1; */
  position: absolute;
  right:  8px;
  top: 0px;
  filter: drop-shadow(1px 1px 2px var(--alpha-black-50));
  z-index: 1;
}

.plan .saving > .content {
  color: var(--neutral-01);
  font-size: small;
  text-align: center;
  font-weight: 500;
  background:  var(--red-06) linear-gradient(45deg, var(--alpha-black-00) 0%, var(--alpha-white-25) 100%);
  padding: 8px 6px 10px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 0 100%);
  width: fit-content;
  min-height: 36px;
  transition: clip-path 1s, padding 1s, background 1s;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%);
}

.plan .saving > .content p{
  margin-bottom: 0;
}

.plan .saving > .content p:nth-child(2){
  font-size: x-small;
  font-weight: 400;
}

.plan ul.plan-details li:nth-child(1) {
  color: var(--neutral-16);
  text-align: center;
  padding-left: 0px;
  white-space: nowrap;
  font-weight: 500;
  padding-bottom: 6px;
  padding-top: 4px;
}

.plan ul.plan-details li:nth-child(2) {
  font-weight: normal;
  color: var(--red-06);
  padding: 4% 0;
  text-align: center;
  width: 100%;
}

.aoxplan hr {
  width: 50%;
  margin: 0px auto;
  display: block;
  height: 0;
  border: 0;
  border-top: 1px solid var(--neutral-03);
  padding: 0;
  text-align: center;
}

.plan-price {
  text-align: center;
  padding: 20px 0 0 0;
}

.plan:first-child .plan-price{
  border-top-left-radius: 10px;
}

.plan:last-child .plan-price{
  border-top-right-radius: 10px; 
}

.plan:first-child .plan-price, .plan:first-child ul.plan-details li:nth-child(1) {
  background-color: var(--orange-08);
}

.plan:nth-child(2) .plan-price, .plan:nth-child(2) ul.plan-details li:nth-child(1) {
  background-color: var(--brand-yellow);
}

.plan:nth-child(3) .plan-price, .plan:nth-child(3) ul.plan-details li:nth-child(1) {
  background-color: var(--orange-09);
}

.plan:nth-child(4) .plan-price, .plan:nth-child(4) ul.plan-details li:nth-child(1) {
  background-color: var(--yellow-04);
}

.plan:nth-child(5) .plan-price, .plan:nth-child(5) ul.plan-details li:nth-child(1) {
  background-color: var(--yellow-03);
}

.plan:last-child .plan-price, .plan:last-child ul.plan-details li:nth-child(1) {
  background-color: var(--yellow-02);
}

.plan .plan-price .icon {
  height: 60px;
  width: auto;
  margin: 0 auto;
}

.plan:first-child .plan-price .icon{
  content: url(/assets/img/vip-icon-1w.webp);
}

.plan:nth-child(2) .plan-price .icon{
  content: url(/assets/img/vip-icon-1m.webp);
}

.plan:nth-child(3) .plan-price .icon{
  content: url(/assets/img/vip-icon-3m.webp);
}

.plan:nth-child(4) .plan-price .icon{
  content: url(/assets/img/vip-icon-6m.webp);
}

.plan:nth-child(5) .plan-price .icon{
  content: url(/assets/img/vip-icon-12m.webp);
}

.plan:last-child .plan-price .icon{
  content: url(/assets/img/vip-icon-24m.webp);
}

.plan-price img{
  height: 50px;
  width: auto;
  margin-top: 18px;
}

.plan-price p {
  text-decoration: line-through;
  color: var(--neutral-16);
  font-size: large;
  font-weight: 500;
  margin: 0px auto;
  margin-right: 6px;
  display: inline-table;
  width: 100%;
  height: 19px;
  padding: 4px 0px;
  min-height: 28px;
}

.plan-price span {
  color: var(--red-06);
  font-size: 2.5em;
  font-weight: 700;
  display: inline-block;
  margin: -16px 0;
  white-space: nowrap;
} 

.plan-price .black{
  color: var(--neutral-16);
}

.plan-price b {
  font-size: 13px;
  padding-left: 4px;
  text-transform: uppercase;
  font-weight: 600;
}

.plan-pros {
  list-style: none;
  padding-left: 0;
  font-size: smaller;
  text-align: left;
  width: fit-content;
  margin: 0 auto;
}

.plan-pros li {
  line-height: 30px;
}

.plan-pros li:before {
  content: '✓';
  color: var(--green-02);
  font-weight: 1000;
}

.plan button {
  background-color: var(--orange-09);
  color: var(--neutral-16);
  border: 2px solid var(--orange-09);
  text-align: center;
  text-transform: uppercase;
  border-radius: 50px;
  padding: 3%;
  cursor: pointer;
  width: 80%;
  margin: 8% auto;
  font-weight: 600;
  font-size: 17px;
}

.plan-unselected button {
  background-color: var(--neutral-01);
  border: 2px solid var(--neutral-16);
}

.vip-bg h1 {
  margin-top: 5%;
  margin-bottom: 0px;
}

.btn-paynow {
  background-color: var(--brand-orange);
  color: var(--neutral-01);
  text-align: center;
  text-transform: uppercase;
  border-radius: 50px;
  padding: 1%;
  cursor: pointer;
  width: 20%;
  margin: auto;
  font-size: 0.9em;
  display: block;
  margin-bottom: 20px;
}

/* VIP login modal*/
#login-modal.popup-bg {
  align-items: center;
  justify-content: center;
}

.popup-bg .popup.login-modal-popup {
  position: relative;
  background-color: var(--neutral-01);
  width: 640px;
  max-width: 92%;
  margin: 0;
  padding: 44px 40px 32px;
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 12px 40px var(--alpha-black-18);
}

/* Inner shadow frame */
.login-modal-popup .login-modal-content {
  background-color: var(--neutral-01);
  border-radius: 14px;
  padding: 30px 32px 26px;
  margin-top: 4px;
  box-shadow: 0 2px 14px var(--alpha-black-07);
  border: 1px solid var(--neutral-01);
}

.popup-bg .popup.login-modal-popup img {
  margin-top: 0;
}

.popup-bg .popup .login-modal-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: transparent;
  color: var(--neutral-10);
  font-size: 1.0em;
  line-height: 1;
  padding: 4px 8px;
  margin: 0;
  width: auto;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.popup-bg .popup .login-modal-close:hover {
  background: transparent;
  color: var(--neutral-16);
}

.login-modal-popup .login-modal-title {
  font-weight: 700;
  font-size: 1.35em;
  color: var(--neutral-15);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-modal-content {
  text-align: left;
}

.login-modal-popup .login-modal-field {
  position: relative;
  margin-bottom: 14px;
}

.login-modal-popup .login-modal-field input {
  width: 100%;
  padding: 13px 44px 13px 44px;
  border: 1px solid var(--blue-01);
  border-radius: 999em;
  background-color: var(--neutral-01);
  font-size: 0.95em;
  box-sizing: border-box;
  color: var(--neutral-13);
  box-shadow: inset 0 2px 4px var(--alpha-black-08) !important;
}

.login-modal-popup .login-modal-field input::placeholder {
  color: var(--neutral-06);
}

.login-modal-popup .login-modal-field input:focus {
  outline: none;
  border-color: var(--brand-orange);
  background-color: var(--neutral-01);
  box-shadow: inset 0 2px 4px var(--alpha-black-06) !important;
}

.login-modal-popup .login-modal-input-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: inline-block;
}

.login-modal-popup .login-modal-eye {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--neutral-08);
  font-size: 1em;
}

.login-modal-popup .login-modal-eye:hover {
  color: var(--neutral-13);
}

.login-modal-popup #loginerr-modal {
  text-align: left;
  margin-bottom: 10px;
}

.login-modal-popup .login-modal-forgot {
  text-align: center;
  margin: 6px 0 18px;
  font-size: 0.88em;
}

.popup-bg .popup .login-modal-forgot a {
  background: transparent;
  color: var(--neutral-09);
  padding: 0;
  margin: 0;
  font-weight: 400;
  text-decoration: none;
  display: inline;
  width: auto;
}

.popup-bg .popup .login-modal-forgot a:hover {
  background: transparent;
  color: var(--brand-orange);
  text-decoration: underline;
}

/* Yellow Sign In button */
.login-modal-popup .login-modal-submit {
  width: 100%;
  background-color: var(--yellow-04);
  color: var(--neutral-15);
  font-weight: 700;
  font-size: 1em;
  border: 0;
  border-radius: 999em;
  padding: 13px 24px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.login-modal-popup .login-modal-submit:hover {
  background-color: var(--yellow-04);
}

.login-modal-popup .login-modal-foot {
  text-align: center;
  margin: 18px 0 0;
  font-size: 0.92em;
  color: var(--neutral-11);
}

/* Override .popup-bg .popup-content a pill styling for the inline register link */
.popup-bg .popup .login-modal-foot a.login-modal-register-link {
  background: transparent;
  color: var(--brand-orange);
  padding: 0;
  margin: 0 0 0 4px;
  font-weight: 600;
  text-decoration: none;
  display: inline;
  width: auto;
}

/* colour no longer changes on hover (--orange-14 merged into --brand-orange);
   the underline is the remaining cue - resting state is text-decoration: none */
.popup-bg .popup .login-modal-foot a.login-modal-register-link:hover {
  text-decoration: underline;
}

@media screen and (max-width: 519px) {
  .popup-bg .popup.login-modal-popup {
    width: 92%;
    padding: 32px 18px 22px;
  }

  .login-modal-popup .login-modal-content {
    padding: 22px 18px 18px;
  }

  .login-modal-popup .login-modal-title {
    font-size: 1.2em;
    margin-bottom: 18px;
  }

  .login-modal-popup .login-modal-field input {
    font-size: 0.95em;
    padding: 12px 42px;
  }
}

.vip-banner {
  padding-top: 4%;
}

.vip-banner h3 {
  color: var(--neutral-16);
  font-size: 2em;
  padding: 0px;
  font-weight: 700;
}

.vip-banner h1 {
  font-size: 4em;
  padding: 0px;
  margin: 0px;
  color: var(--brand-orange);
  white-space: nowrap;
  margin-bottom: 10px;
}

.vip-banner h4 {
  font-size: 2em;
  padding: 0px;
  margin: 0% 0 4% !important;
  color: var(--neutral-16);
}

.container_right {float: right;}
:root {--swiper-theme-color: var(--brand-orange) !important; font-weight: 800; --swiper-navigation-size: 24px !important;}
#aox .hero-info-index {margin-top: 10%;}
.swiper {margin-top: 5%; margin-bottom: 7%;}
.swiper-button-next, .swiper-button-prev{ top: 80% !important;}

.w50p {
  width: 50%;
  margin: 0px;
}

.tl {
  text-align: left;
  margin: 0px;
}

.icon-hug {
  position: absolute;
  right: -30%;
  top: -20%;
}

.cs {
  padding: 0px !important;
  display: flow-root;
  margin: 0px;
  margin-bottom: 4%;
}

table {
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-radius: 10px;
  border-style: hidden; /* hide standard table (collapsed) border */
  box-shadow: 0 0 0 1px var(--neutral-02); /* this draws the table border  */
}

table caption {
  font-size: 1.5em;
  margin: 0.5em 0 0.75em;
}

table tr {
  border: 1px solid var(--neutral-02);
  padding: 0.35em;
}

table th,
table td {
  padding: 0.625em;
  text-align: center;
}

table th {
  font-size: 0.85em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media screen and (max-width: 992px) {
  table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }

  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  table tr {
    border-bottom: 3px solid var(--neutral-02);
    display: block;
    margin-bottom: 0.625em;
  }

  table td {
    border-bottom: 1px solid var(--neutral-02);
    display: block;
    font-size: 0.8em;
    text-align: right;
  }

  table td::before {
    /*
      * aria-label has no advantage, it won't be read inside a table
      content: attr(aria-label);
      */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }

  table td:last-child {
    border-bottom: 0;
  }

  .vip-banner{
    padding-top: 15%;
  }
}

/* 
.payment-history ul.header {
    font-weight: 500;
    font-size: medium;
    line-height: 24px;
    color: #000;
    display: block;
}

.payment-history ul.header li {
    float: left;
    width: 20%;
    text-align: left;
}

.payment-history ul.details li {
    float: left;
    width: 20%;
    text-align: left;
} */

.account-nav {
  z-index: 99;
  position: relative;
}

.account-nav .col:nth-child(1) {
  width: 30%;
  display: flow-root;
  margin-top: 2%;
}

.account-nav .col:nth-child(2) {
  width: 70%;
  display: flow-root;
}

.renew {
  font-weight: 600;
  color: var(--neutral-01);
  background-color: var(--brand-orange);
  border-radius: 50px;
  position: absolute;
  height: 24px;
  text-align: center;
  padding: 0px 22px;
  font-size: 10px;
}

.img-more-vip {
  position: absolute;
}

.successful-bg {
  background-image: url("/assets/img/payment-bg.webp");
  display: flow-root;
}

.icon-payment {
  margin: 4% 0;
}

.popup-load {
  position: fixed;
  top: 0;
  width: 100%;
  height: -webkit-fill-available;
  left: 0;
  z-index: 999;
}

.popup-bg {
  background-color: var(--alpha-black-50);
  position: fixed;
  top: 0;
  width: 100%;
  height: -webkit-fill-available;
  left: 0;
  z-index: 999;
  box-shadow: var(--alpha-tint-20) 0px 7px 29px 0px;
}

.popup-bg .popup {
  background-color: var(--brand-tint);
  border-radius: 10px;
  width: 400px;
  margin: auto;
  margin-top: 20%;
  padding: 30px;
  z-index: 99999;
}

.popup-bg .popup img {
  margin-top: -166px;
}

.popup-bg .popup a {
  background-color: var(--yellow-04);
  border-radius: 10px;
  width: 100%;
  padding: 10px 14%;
  font-weight: 500;
  margin-bottom: 20px;
}

.popup-bg .popup .popup-content p {
  text-align: center !important;
}

.popup-bg .popup img.icon-closed {
  margin-top: -28px;
  margin-right: -100%;
  cursor: pointer;
  width: 16px;
  color: var(--neutral-01);
  display: inline-flex;
}

.popup-bg .popup-content h2 {
  font-weight: 700;
}

.voucher-popup-tabs {
  display: flex;
  border-bottom: 2px solid var(--neutral-02);
  margin-bottom: 16px;
  font-weight: 600;
}

.voucher-popup-tab {
  flex: 1;
  padding: 10px 0;
  background-color: var(--neutral-01);
  border: none;
  color: var(--alpha-black-55);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
  font-size: 0.97em;
}

@media (max-width: 991px) {
  .voucher-popup-tab {
    font-size: 0.9em;
  }
}

@media (max-width: 767px) {
  .voucher-popup-tab {
    font-size: 0.85em;
    padding: 9px 0;
  }
}

@media (max-width: 575px) {
  .voucher-popup-tab {
    font-size: 0.8em;
    padding: 8px 0;
  }
}

@media (max-width: 420px) {
  .voucher-popup-tab {
    font-size: 0.6em;
    padding: 7px 0;
  }
}



#tab-btn-available.active, #tab-btn-new.active {
  background-color: transparent;
  color: var(--brand-orange);
  border-bottom-color: var(--brand-orange);
}


.popup-bg .popup-content a {
  background-color: var(--brand-orange);
  color: var(--neutral-01);
}

.popup-bg .popup-content a:hover {
  background-color: var(--yellow-04);
  color: var(--neutral-16) !important;
}

.popup-sale .popup {
  position: relative;
}

.popup-sale .popup h2 {
    margin-top: 10px;
    font-size: 1.5rem;
}

.popup-sale .popup a {
  background-color: var(--neutral-01);
  border-radius: 50%;
  position: absolute;
  bottom: -70px;
  width: 50px;
  height: 50px;
  padding: 14px;
  margin: auto;
  margin-left: -20px;
}

.popup-sale .popup img.icon-closed {
  display: block;
  margin: auto;
  width: 24px;
}

.container_left {
  z-index: 996;
  position: relative;
  margin-top: auto;
  margin-bottom: auto;
}


/*--------------------------------------------------------------
# Benefit of using VIP
--------------------------------------------------------------*/
.ox-hug {
  position: absolute;
  left: 1%;
  top: 30%;
  width: 16%;
}

.row .feature-table {
  margin: 20px 0 10px;
  text-align: center;
  position: relative;
}

.row .feature-table.hide-550 {
  display: block;
  position: relative;
}

.row .feature-table.show-550 {
  display: none;
}

.row .feature-table.show-550 #sticky {
  background-color: var(--brand-tint);
}

.row .feature-table.show-550 #sticky.stick {
  margin: 0 auto;
  margin-top: 0 !important;
  position: sticky;
  top: 94px;
  width: -webkit-fill-available;
  z-index: 99;
}

.row .feature-table.show-550 #sticky.stick .feature-row-header {
  font-size: 18px;
}

.row .feature-table.show-550 #sticky.stick .feature-row-header:first-child {
  border-right: 2px solid var(--neutral-01);
}

.row .feature-table td {
  color: var(--blue-10);
  font-size: 16px;
  font-weight: 400;
  padding: 20px;
  text-align: center;
}

.row .feature-table table {
  width: 70%;
  margin: 0 auto;
  border: none;
  box-shadow: none;
}

.row .feature-table table tr {
  border: none;
}

.row .feature-table table td:nth-child(1) {
  border: none;
}

.row .feature-table table .feature-row-2 {
  background-color: var(--brand-tint);
}

.row .feature-table table span.check-mark:after {
  content: "\2714";
  color: var(--green-01);
  display: block;
  font-weight: 600;
  font-size: 24px;
  display: inline;
}

.row .feature-table table span.x-mark:after {
  content: "\2718";
  color: var(--red-06);
  font-weight: 800;
  font-size: 24px;
}

.row .feature-table table .feature-label p {
  color: var(--blue-10);
  font-weight: 600;
  font-size: 16px;
  margin: 0 auto;
  text-align: left;
}

.row .feature-table.show-550 .feature-row-header {
  font-size: 20px;
  width: 47%;
  margin: 0;
  display: inline-block;
  padding: 20px 0 30px;
  vertical-align: middle;
  text-align: center;
}

.row .feature-table.show-550 .feature-row-wrap {
  border-bottom: 3px solid var(--neutral-01);
}

.row .feature-table.show-550 .feature-row-wrap .feature-row-1 {
  border-bottom: 2px solid var(--neutral-01);
}

.row .feature-table.show-550 .feature-row-wrap .feature-row-1 div {
  display: inline-block;
  margin: 0;
  padding: 20px 0;
  width: 47%;
  vertical-align: middle;
}

.row .feature-table.show-550 .feature-row-wrap .feature-row-1 div:first-child {
  border-right: 2px solid var(--neutral-01);
}

.row .feature-table.show-550 .feature-row-wrap .feature-row-1 div span.check-mark:after {
  content: "\2714";
  color: var(--green-01);
  display: inline;
  font-weight: 600;
  font-size: 24px;
}

.row .feature-table.show-550 .feature-row-wrap .feature-row-1 div span.x-mark:after {
  content: "\2718";
  color: var(--red-06);
  font-weight: 800;
  font-size: 24px;
}

.row .feature-table.show-550 .feature-row-wrap .feature-row-2 {
  border-bottom: 2px solid var(--neutral-01);
  background-color: var(--brand-tint);
}

.row .feature-table.show-550 .feature-row-wrap .feature-row-2 div {
  display: inline-block;
  margin: 0;
  padding: 20px 0;
  width: 49%;
  vertical-align: middle;
}

.row .feature-table.show-550 .feature-row-wrap .feature-row-2 div:first-child {
  border-right: 2px solid var(--neutral-01);
}

.row .feature-table.show-550 .feature-row-wrap .feature-row-2 div span.check-mark:after {
  content: "\2714";
  color: var(--green-01);
  display: block;
  font-weight: 600;
  font-size: 24px;
}

.row .feature-table.show-550 .feature-row-wrap .feature-row-2 div span.x-mark:after {
  content: "\2718";
  color: var(--red-06);
  font-weight: 800;
  font-size: 24px;
}

.row .feature-table.show-550 .feature-row-wrap .feature-label p {
  color: var(--blue-10);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 auto;
  padding: 20px 0;
}

.row .footer {
  font-size: 14px;
  font-style: italic;
  padding-top: 5px;
  text-align: right;
}

@media (max-width: 992px) {
  .ox-hug {
    display: none;
   }
}

@media (max-width: 992px) {
  h1 {
    font-size: 25px;
 }

  .feature-table.hide-550 {
    display: none !important;
 }

  .feature-table.show-550 {
    display: block !important;
 }
 
 .ox-hug {
  display: none;
 }
}

/*--------------------------------------------------------------
# SVIP
--------------------------------------------------------------*/
#svip {
  background-color: var(--neutral-01);
}

#svip .svip_header {
  text-align: left;
}

#svip .svip_header h1 {
  color: var(--blue-10);
  text-align: left;
}

#svip .svip_third {
  align-items: center;
}

#svip .svip_support p {
  margin-bottom: 0;
  color: var(--alpha-black-50);
}

#svip .svip_support i {
  color: var(--blue-10);
  font-size: x-large;
}

#svip .svip_support i:hover {
  color: var(--brand-orange);
}

#svip button {
  background-color: var(--brand-orange);
}

#svip button:hover {
  background-color: var(--yellow-04);
  color: var(--neutral-16);
}

#svip .svip_desc {
  margin-top: 30px;
}

#svip .svip_what {
  background-color: var(--blue-10);
  padding: 20px 40px 50px 40px;
  text-align: left;
  border-radius: 10px;
}

#svip .svip_what h1 {
  color: var(--neutral-01);
  text-align: left;
}

#svip .svip_what p {
  color: var(--neutral-01);
  font-weight: 100;
}

#svip .svip_pros_container {
  background-color: var(--brand-tint);
  padding: 20px 40px;
  margin-bottom: 20px;
  text-align: left;
  border-radius: 10px;
}

#svip .svip_pros_container:last-child {
  margin-bottom: 0 !important;
}

#svip .svip_pros_container h5 {
  margin-bottom: 5px;
}

#svip .svip_pros_container p {
  margin-bottom: 0;
  color: var(--blue-10);
  line-height: normal;
}

#svip_compare .row {
  justify-content: space-between;
  align-items: center;
}

#svip_compare span {
  font-weight: 100;
}

#svip_compare table {
  background-color: var(--blue-01);
  box-shadow: none;
}

#svip_compare tr {
  margin-bottom: 10px;
}

#svip_compare th,
#svip_compare td {
  border-bottom: 1px solid var(--neutral-01);
  padding: 0.8em;
}

#svip_compare td:first-child {
  text-align: left;
  width: 60%;
  padding-left: 20px;
}

#svip_compare i {
  color: var(--brand-orange);
}

#svip_compare thead {
  color: var(--blue-10);
}

#svip_how .row {
  justify-content: space-between;
  text-align: left;
  align-items: center;
}

#svip_how h3 {
  margin-top: 0;
}

#svip_how span {
  font-weight: 100;
}

#svip_how button {
  background-color: var(--brand-orange);
}

#svip_how button:hover {
  background-color: var(--yellow-04);
  color: var(--neutral-16);
}

/*--------------------------------------------------------------
# Loading
--------------------------------------------------------------*/
@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.donut-container {
  position: relative;
  margin-top: 30%;
  z-index: 99999;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 4rem;
}

.donut {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  border: 0.3rem solid var(--alpha-black-30);
  border-top-color: var(--neutral-16);
  animation: 1.5s spin infinite linear;
}

.donut-container .img-load {
  width: 40px;
  position: absolute;
  top: 13px;
  text-align: center;
  left: 13px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Payment
--------------------------------------------------------------*/
.field {
  margin-bottom: 25px;
}

.field.full {
  width: 100%;
}

.field label {
  display: block;
  text-transform: uppercase;
  font-size: 12px;
  margin-bottom: 8px;
}

.field input {
  padding: 12px;
  border-radius: 6px;
  border: 2px solid var(--neutral-02);
  display: block;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}

.field input:placeholder {
  color: var(--neutral-02) !important;
}

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.flex.justify-space-between {
  justify-content: space-between;
}

.card {
  padding-bottom: 30px;
  margin: 30px auto;
  border-radius: 6px;
  box-sizing: border-box;
  /* box-shadow: 0px 24px 60px -1px rgba(37, 44, 54, 0.14); */
  background-color: transparent;
  border: none;
}

.card .container {
  margin: 0 auto;
  text-align: center;
}

.card .card-title {
  margin-bottom: 50px;
}

.card .card-title h2 {
  margin: 0;
}

.card .card-body .payment-type{
  margin-top: 2%;
  margin-bottom: 25px;
}

.card .card-body .payment-type h4 {
  margin: 0;
}

.card .card-body .payment-type .types {
  margin: 25px 0;
}

.card .card-body .payment-type .types .type {
  width: 24%;
  position: relative;
  background: var(--neutral-01);
  /* border: 2px solid #e8ebed; */
  box-shadow: 0px 0px 4px 0px var(--alpha-tint-14);
  /* padding: 8px; */
  padding-top: 8px;
  box-sizing: border-box;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: all 0.5s ease;
}

.card .card-body .payment-type .types .type:hover {
  border-color: var(--brand-orange);
}

.card .card-body .payment-type .types .type:hover .logo,
.card .card-body .payment-type .types .type:hover p {
  color: var(--neutral-13);
}

.card .card-body .payment-type .types .type.selected {
  border: 1px solid var(--brand-orange);
  /* background: #ffeec5; */
}

.card .card-body .payment-type .types .type.selected .logo {
  color: var(--brand-yellow);
}

.card .card-body .payment-type .types .type.selected p {
  color: var(--neutral-13);
}

.card .card-body .payment-type .types .type.selected::after {
  content: "✓";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  height: 30px;
  width: 30px;
  top: 12px;
  /* right: -21px; */
  background: var(--brand-orange);
  /* border: 2px solid #fac03d; */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  color: var(--neutral-01);
}

.card .card-body .payment-type .types .type .logo,
.card .card-body .payment-type .types .type p {
  transition: all 0.5s ease;
}

.card .card-body .payment-type .types .type .logo img {
  font-size: 40px;
  color: var(--neutral-08);
  /* float: right; */
  height: 50px;
}

.card .card-body .payment-type .types .type p {
  margin-bottom: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--neutral-13);
  line-height: 40px;
  background-color: var(--brand-tint);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  /* margin-left: 40px; */
}

.card .card-body {
  padding: 0px;
}

.payment-btn {
  width: 100%;
  text-align: center;
}

.payment-btn button:hover{
  color: var(--neutral-16);
  background-color: var(--brand-yellow);
}

.payment-btn p {
  font-size: 12px;
  margin-bottom: 0px;
}



.totalprice{
  background-color: var(--brand-tint);
    border-radius: 15px;
    padding: 15px 30px 8px;
    margin-bottom: 30px;
}

.totalprice h5{
  margin-bottom: 0;
}

.totalprice div{
  display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
}

.totalprice .voucher {
  margin-bottom: 0;
}

.totalprice .voucher button{
  background-color: var(--brand-orange);
  color: var(--neutral-01);
  padding:5px 15px;
}

.totalprice .voucher button:hover{
  color: var(--neutral-16);
  background-color: var(--brand-yellow);
}
.totalprice .voucher button:hover svg{
    fill: var(--neutral-16) !important;
}
.totalprice .voucher button svg{
  fill: var(--neutral-01) !important;
  margin-right: 5px;
}

/*--------------------------------------------------------------
# Download Session
--------------------------------------------------------------*/
.btn-dl {
  background: var(--neutral-01);
  border: 2px solid var(--brand-orange);
  border-radius: 999em;
  color: var(--brand-orange);
  background-size: cover;
  line-height: 53px;
  cursor: pointer;
  width: 100%;
  padding: 0px;
  font-weight: 700;
  font-size: inherit;
  position: relative;
}

.btn-dl > span,
.btn-dl > img {
  padding: 0 10px;
  display: inherit;
}

.btn-dl:hover {
  font-weight: 700;
  color: var(--neutral-01);
  background-color: var(--brand-orange);
}

.btn-dl img[id="last"] {
  display: none;
}

.btn-dl:hover img[id="last"] {
  display: inline-block;
}

.btn-dl:hover img[id="first"] {
  display: none;
}

.btn-dl img {
  height: 34px;
  margin-right: 20px;
}

/* "(VIP only)" qualifier on the Windows / macOS / iOS buttons. Inline beside
   the platform name here; on the narrow layout below it drops to its own line
   inside the pill (see the max-width: 519px block). */
.btn-dl .vip-only {
  font-size: 0.62em;
  font-weight: 300;
  margin-left: 5px;
  white-space: nowrap;
}

/* One fixed-size content group per download button, so all four line up and
   scale together instead of each pill's contents being as wide as its own
   label -- "Android" would otherwise sit noticeably shorter than
   "Windows (VIP only)", and the longer labels wrapped once the columns
   narrowed. The icon keeps its intrinsic size; the label reserves a fixed
   box beside it, and the pair is centred in the pill.
   Guarded to >=520px: below that the icon sits above the label and the label
   span is itself the pill, which is a different layout entirely.
   Selectors are #download-scoped so they outrank the .btn-dl line-height
   overrides that appear later in this file. */
@media screen and (min-width: 520px) {
  #download .btn-dl {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: normal;
    min-height: 57px;
  }

  /* Only the label gets an explicit display. The icons must NOT: the
     hover swap is driven by `.btn-dl img[id="last"] / :hover img[...]`
     rules, and an id-scoped display here outranks them, which would leave
     both icons on screen at once. */
  #download .btn-dl > span {
    display: block;
    padding: 0;
  }

  #download .btn-dl > img {
    flex: none;
    padding: 0;
    margin-right: 12px;
  }

  /* The label sizes to its text and the whole icon+label group is centred in
     the pill, so the visible content sits dead centre on every button and the
     icon keeps the same distance from its text regardless of label length.
     nowrap keeps a long label on one line as the columns narrow -- the pills
     stay equal width, which is what makes the four scale together. */
  #download .btn-dl > span {
    text-align: center;
    white-space: nowrap;
  }
}

/* Switching to flex replaces line-height as the height mechanism, so pin the
   heights the old line-height values produced at each breakpoint (53px base,
   48px at <=1024, 72px at <=992, plus 4px of border). Without these the
   buttons would silently resize on tablet widths. */
@media screen and (min-width: 993px) and (max-width: 1024px) {
  #download .btn-dl {
    min-height: 52px;
  }
}

@media screen and (min-width: 520px) and (max-width: 992px) {
  #download .btn-dl {
    min-height: 76px;
  }
}

/* .btn-dl .hover-qr-code {
  display: none;
  position: absolute;
  width: 120px;
  height: 120px;
  border:1px solid #ff8200;
  padding: 10px;
  background-color: white;
  align-items: center;
  margin-left: 28%;
  bottom: 100%;
} */

.btn-dl .hover-qr-code {
  display: none;
  position: absolute;
  width: 120px;
  height: 120px;
  margin-left: 28%;
  bottom: 114%;
  border:1px solid var(--brand-orange);
  background: var(--neutral-01);
  padding: 10px;
  border-radius: 10px;
  max-width: 600px;
}

.btn-dl:hover .hover-qr-code {
  display: block;
}

.btn-dl .hover-qr-code img {
  width: 100%;
  margin: 0px;
  height: auto;
}

.btn-dl .hover-qr-code::before {
  left: 37px;
  bottom: -32px;
  border: 16px solid;
  border-color: var(--brand-orange) transparent transparent var(--brand-orange);
}

.btn-dl .hover-qr-code::after {
  left: 38px;
  bottom: -29px;
  border: 15px solid;
  border-color: var(--neutral-01) transparent transparent var(--neutral-01);
}


.btn-dl .hover-qr-code.down::before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
}
.btn-dl .hover-qr-code.down::after {
  /* border-top-color: white;
  border-bottom: 0;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto; */
  content: ' ';
    position: absolute;
    width: 0;
    height: 0;
}

#download .icon-coming {
  width: 80px;
  position: absolute;
  z-index: 99;
  right: 0%;
  top: -70%;
}

#aox h4 span {
  color: var(--brand-orange);
}

#aox h4 {
  font-weight: 600;
}

#about .about-container .btn-download:hover {
  background-color: var(--brand-orange);
  color: var(--on-brand);
}

/* .dl-help-btn {
  background: transparent !important;
  padding: 0px !important;
  color: #000 !important;
  font-size: 16px;
  border-radius: 0px !important;
} */

.dl-help-btn:hover{
  color: var(--brand-orange) !important;
}

.dl-btn-center {
  display: flex;
}

.dl-btn-center.hide{
  display: none;
}

.setup-left img,
.setup-right img{
  margin-bottom: 20px;
}

.standardwindows img{
  margin-bottom: 20px;
}

.standardwindows .setup-right:has(p:empty) {
  display:none;
}

.standardwindows .setup-left:has(p:empty) {
  display:none;
}

.android-dl-btn{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.windows-dl-btn{
  display: flex;
  align-items: flex-start;
}

.dropdown, .dropend, .dropstart, .dropup {
  position: relative;
  display: inline-flex;
}

.android-dl-btn .old, .windows-dl-btn .old{
  display: flex;
  flex-direction: row;
  gap: 2%;
}

.android-dl-btn .old p, .windows-dl-btn .old p{
  margin: 8% 0 0;
  white-space: nowrap;
}

.android-dl-btn .buttons{
  display: flex;
  align-items: center;
}

/* Primary CTA: brand orange fill, dark label (7.0:1). Stays the dominant
   button in every state - hover deepens the fill rather than switching hue. */
.index-app-dl-btn {
  width: auto;
  float: left;
  background-color: var(--brand-orange);
  color: var(--on-brand);
  font-size: 1.2rem;
  text-align: center;
  line-height: 34px;
  border-radius: 999em;
  border: transparent solid 2px;
  font-weight: 700;
  padding: 10px 30px;
  margin-right: 20px;
  margin-top: 20px;
  min-width: 150px;
  position: relative;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

/* `color` keeps !important here only to outrank the global
   `a:hover { color: #FF8200!important }` near the top of this file. */
.index-app-dl-btn:hover,
.index-app-dl-btn:focus-visible {
  background-color: var(--brand-orange-hover);
  color: var(--neutral-16) !important;
}

/* Secondary CTA: outline, deliberately quieter. Hover only tints, so it never
   converges on the primary. */
.index-app-dl-btn-free {
  width: auto;
  float: left;
  background-color: transparent;
  color: var(--brand-orange-text);
  font-size: 1.2rem;
  text-align: center;
  line-height: 32px;
  border-radius: 999em;
  border: var(--brand-orange-text) solid 2px;
  font-weight: 700;
  padding: 10px 30px;
  margin-top: 20px;
  min-width: 150px;
  transition: background-color 0.2s ease;
}

.index-app-dl-btn-free:hover,
.index-app-dl-btn-free:focus-visible {
  background-color: var(--brand-yellow);
  color: var(--neutral-16) !important;
  border-color: var(--brand-yellow);
}

.index-app-dl-btn:focus-visible,
.index-app-dl-btn-free:focus-visible {
  outline: 3px solid var(--brand-orange);
  outline-offset: 2px;
}

.index-app-dl-btn-free img{
  height: 20px;
  width: auto;
}


.index-app-dl-btn img {
  height: 30px;
  margin-top: -4px;
}

.windows-dl-btn strong,
.appstore-dl-btn strong {
  font-size: 0.8rem;
  font-weight: 400 !important;
}

.show_desktop .index-app-dl-btn img[id="last"] {
  display: none;
}

.show_desktop .index-app-dl-btn:hover img[id="last"] {
  display: inline-block;
}

.show_desktop .index-app-dl-btn:hover img[id="first"] {
  display: none;
}

#aox .hide {
  display: none;
}

button.btn-dl {
  transition: none !important;
}

@media screen and (max-width: 519px) {
  button.btn-dl {
    background-color: transparent;
  }

  #aox .swiper-button-next, #aox .swiper-button-prev{ 
    display: none;
  }

}

span.windows-adv-mode {
  color: var(--red-03); 
  font-size: 16px; 
  font-weight: 400; 
  margin-top: -10px; 
  display: block;
  margin-bottom: 30px;
}

span.windows-adv-mode a {
  color: var(--red-03); 
  text-decoration: underline;
  font-weight: 700; 
}


/*--------------------------------------------------------------
# Windows / Android Download
--------------------------------------------------------------*/
#services .windows {
  padding: 30px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  margin: 0 10px 40px 10px;
  background: var(--neutral-01);
  box-shadow: 0 10px 29px 0 var(--alpha-tint-10);
  transition: all 0.3s ease-in-out;
  margin-bottom: 20px;
  min-height: 450px;
}

#services .windows p {
  margin-bottom: 15px;
  font-size: 14px;
  margin-left: 0px;
}

#services .windows .title {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 22px;
  margin-left: 0px;
}

#services .windows .description {
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 20px;
  margin-left: 0px;
}

#services .after-dl-btn{
  width: auto;
background-color: var(--brand-orange);
color: var(--on-brand);
font-size: 1.2rem;
text-align: center;
line-height: 34px;
border-radius: 999em;
font-weight: 700;
padding: 10px 30px;
margin-bottom: 20px;
min-width: 150px;
}

#services .after-dl-btn.outline{
  background-color: var(--neutral-01);
  border: 2px solid var(--brand-orange);
  color:var(--brand-orange);
}
.img-windows{
  max-width: 100%;
}

.img-windows{
  height: 320px !important;
}

#qrcode {
  position: relative;
}

#qrcode #qrcodeimg {
  position: absolute;
  display: block;
  top: 0px;
  background-color: transparent;
  border: none;
  padding: 30%;
}

.dl-btn-center .dropdown ul {
  display: block;
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  margin: 0;
  padding: 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: var(--neutral-01);
  box-shadow: 0px 0px 30px var(--alpha-tint-25);
  transition: 0.3s;
}

.dl-btn-center .dropdown ul li:nth-child(1) {
  min-width: 200px;
  padding: 4% 0;
  background-color: var(--brand-yellow);
}

.dl-btn-center .dropdown ul li:nth-child(1)>a:hover,.dl-btn-center .dropdown ul li:nth-child(1):hover{
  background-color: var(--brand-orange);
  color: var(--neutral-01) !important;
}

.dl-btn-center .dropdown ul li:nth-child(2),
.dl-btn-center .dropdown ul li:nth-child(3) {
  min-width: 200px;
  padding: 4% 0;
}

.dl-btn-center .dropdown ul a {
  padding: 0px 20px;
  font-size: 14px;
  text-transform: none;
  display: flow-root;
}

.dl-btn-center .dropdown ul a i {
  font-size: 12px;
}

.dl-btn-center h1 a{
  padding: 0 !important;
}

.dl-btn-center .dropdown ul a:hover,
.dl-btn-center .dropdown ul .active:hover{
  color: var(--brand-orange);
}

.dl-btn-center .dropdown:hover>ul {
  opacity: 1;
  visibility: visible;
}

.dl-btn-center .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}

.dl-btn-center .dropdown .dropdown:hover>ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}

.dl-btn-center .dropdown-menu{
  min-width: max-content;
}


/*--------------------------------------------------------------
# Google Search
--------------------------------------------------------------*/
.nav-banner-bg {
  margin-top: -50px;
}

.google-s {
  display: flow-root;
  margin-bottom: 3%;
  text-align: center;
  margin-top: 5%;
}

.google-s img {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2%;
  display: block;
}

.google-session .col-md-6 {
  float: left;
  margin-top: 6%;
  color: var(--neutral-15);
}

.google-session .banner{
  background-image: url(/assets/img/nav-banner.webp);
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  border: 1px solid var(--neutral-16);
  margin: 0 1%;
  width: 100%;
  height: 100%;
  text-align: left;
  display: flex;
  align-items: center;
}

.google-session .banner div{
  width: 50%;
  padding-left: 20px;
}

.google-session .banner h3{
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Search Session
--------------------------------------------------------------*/
.search-container {
  width: 88%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  position: relative;
}

.search-container button {
  position: absolute;
  right: 2.5%;
  background-color: transparent;
  padding: 0px;
  /* was top: 31% - a magic number that only lined up at one input height,
     leaving the icon 6-8px low at every breakpoint. Centre it properly
     so it holds whatever the input's height happens to be. */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  line-height: 1;
}

.search-container button i {
  color: var(--neutral-16);
  font-size: 1.2rem;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
ul.popular-app {
  margin: 0px;
  padding: 0px;
  margin-top: 4%;
}

ul.popular-app li {
  float: left;
  width: 25%;
}

ul.recommended-app li button {
  font-size: 12px;
  padding: 4px 20px;
  float: right;
  line-height: 16px;
  background-color: var(--brand-orange);
  font-weight: 400;
}

ul.popular-app li img {
  width: 64px;
}

ul.popular-app li a {
  display: block;
  font-size: small;
}

ul.recommended-app {
  display: flex;
  color: var(--neutral-15);
  padding-left: 0px;
  flex-wrap: wrap;
}

ul.recommended-app li {
  width: 31%;
  margin: 1%;
  float: left;
  background-color: var(--neutral-01);
  border-radius: 10px;
  padding: 20px;
  text-align: left;
  box-shadow: 2px 4px 12px var(--alpha-black-08);
  transition: all 0.3s cubic-bezier(0, 0, 0.5, 1);
}

ul.recommended-app li a img {
  width: 45px !important;
  margin-right: 10px;
  float: left;
  border-radius: 10px;
}

ul.recommended-app li a h6 {
  padding-bottom: 0px;
  margin-bottom: 10px;
}

ul.recommended-app li a span {
  font-size: small;
  float: left;
  width: 218px;
  display: -webkit-box;
  max-width: 100%;
  margin: 0 auto;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 350;
}

.video-shortcode {
  max-width: 100%;
  height: auto;
}

.dl-btn {
  background-image: url("/assets/img/download-aoxvpn-btn.webp");
  width: 300px;
  height: 64px;
  padding: 10px 0px 0px 62px;
  color: var(--neutral-16);
  display: flow-root;
  font-weight: 700;
  font-size: medium;
  margin-bottom: 80px;
  text-align: center;
}

.dl-btn span {
  font-size: 12px;
  display: block;
  color: var(--brand-orange);
  font-weight: normal;
}

.nav-account {
  background-color: var(--brand-orange);
  border-radius: 50px;
  padding: 4px 18px !important;
  color: var(--neutral-01) !important;
  margin-left: 20px;
  width: fit-content;
  cursor: pointer;
}

.nav-account:hover {
  color: var(--neutral-16) !important;
  background-color: var(--brand-yellow);
}

/*--------------------------------------------------------------
# Download page
--------------------------------------------------------------*/
#download {
  background: var(--neutral-01);
  padding: 40px 0;
  /* position: relative; */
  text-align: left;
}

.download-hero {
  text-align: left;
}

.old p {
  margin-top: 12px;
  font-size: medium;
}

.old p a{
  color: var(--brand-orange);
  border: 2px dotted var(--brand-orange);
  border-radius: 26px;
  padding: 2px 15px;
}

.old p a:hover{
  color: var(--neutral-16) !important;
  border: 2px dotted var(--brand-yellow);
  background-color: var(--brand-yellow);
}

.download-hero h2 {
  font-size: 3em;
}

@media (max-width: 519px) {
  .download-hero h2 {
    font-size: 2em;
  }

  .ios-dl-btn .index-app-dl-btn{
    margin-right: 0;
  }

  .appstore-dl-btn .index-app-dl-btn{
    margin-right: 0;
    padding-left: 30px;
    padding-right: 30px;
  }

  .windows-dl-btn .index-app-dl-btn{
    font-size: 0.9rem;
    margin-right: 10px;
  }

}

.benefit-list {
  margin: 0px;
  padding: 0px;
}

.benefit-list {
  font-size: 1rem;
  line-height: 42px;
}

.writeup {
  background-color: var(--blue-04);
  width: 100%;
  border-radius: 20px;
  display: inline-block;
  position: relative;
  margin: 6% 0;
}

.macdownload .writeup {
  background-color: var(--red-01);
}

.androiddownload .writeup {
  background-color: var(--orange-02);
}

.iosdownload .writeup {
  background-color: var(--yellow-01);
}

.aoxclouddownload .writeup {
  background-color: var(--yellow-01);
}

ul.writeup li {
  width: 30%;
  float: left;
  text-align: left;
  margin: 4% 0px;
}

ul.writeup li:last-child {
  width: 66%;
}

ul.writeup li:first-child img {
  position: absolute;
  width: 260px;
  top: -10%;
  left: 4%;
}

.androiddownload .ios-dl-btn,
.androiddownload .appstore-dl-btn,
.androiddownload .windows-dl-btn,
.androiddownload .cloud-dl-btn, 
.androiddownload .aoxtabs,
.androiddownload .mac-dl-btn {
  display: none;
}

.iosdownload .android-dl-btn,
.iosdownload .windows-dl-btn,
.iosdownload .cloud-dl-btn,
.iosdownload .aoxtabs,
.iosdownload .mac-dl-btn,
.iosdownload .ios-dl-btn,
.macdownload .android-dl-btn,
.macdownload .windows-dl-btn, 
.macdownload .cloud-dl-btn, 
.macdownload .aoxtabs,
.macdownload .appstore-dl-btn {
  display: none;
}

.windowsdownload .ios-dl-btn,
.windowsdownload .appstore-dl-btn,
.windowsdownload .android-dl-btn,
.windowsdownload .cloud-dl-btn,
.windowsdownload .mac-dl-btn {
  display: none;
}

.aoxclouddownload .setup{
  display: none;
}

.aoxclouddownload .ios-dl-btn,
.aoxclouddownload .appstore-dl-btn,
.aoxclouddownload .appstore-dl-btn,
.aoxclouddownload .android-dl-btn,
.aoxclouddownload .windows-dl-btn{
  display: none;
}

.alt-dl {
  margin: 14px 0px;
}

.alt-dl a {
  color: var(--brand-orange);
  text-decoration: underline;
}

.setup{
  justify-content: space-between;
}

.setup .setup-right{
  position: relative;
}

.middle-line {
  border: 1px solid var(--neutral-13);
  height: 400px;
  position: absolute;
  left: 50%;
  margin-left: -1px;
  top: 10%;
  z-index: 0;
}

.macdownload .middle-line {
  border: 1px solid var(--red-01);
}

.androiddownload .middle-line {
  border: 1px solid var(--orange-02);
}

.wdownload.middle-line {
  border: 1px solid var(--yellow-04);
}

.iosdownload .middle-line {
  border: 1px solid var(--yellow-01);
}

ul.steps {
  border: 1px solid var(--neutral-13);
  padding: 0px;
  margin: 0px;
  border-radius: 10px;
  margin-bottom: 4%;
  display: inline-block;
  width: 100%;
  position: relative;
  z-index: 99;
  background-color: var(--neutral-01);
}

ul.steps li:first-child {
  background-color: var(--neutral-13);
  color: var(--neutral-01);
  text-align: center;
  font-weight: 700;
  font-size: 30px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.standardwindows ul.steps li:first-child {
  background-color: var(--yellow-04);
  color: initial;
}

.standardwindows ul.steps {
  border: 1px solid var(--yellow-04);
}

.macdownload ul.steps {
  border: 1px solid var(--red-01);
}

.androiddownload ul.steps {
  border: 1px solid var(--orange-02);
}

.iosdownload ul.steps {
  border: 1px solid var(--yellow-01);
}

.macdownload ul.steps li:first-child {
  background-color: var(--red-01);
  color: initial;
}

.androiddownload ul.steps li:first-child {
  background-color: var(--orange-02);
  color: initial;
}

.iosdownload ul.steps li:first-child {
  background-color: var(--yellow-01);
  color: initial;
}

@media screen and (max-width: 519px) {
  .androiddownload  .hero-img-index {
    display: none;
  }
}


ul.steps li {
  text-align: left;
  padding: 10px;
}

ul.steps li p {
  margin: 0px; 
}

ul.steps li p a{
  color: var(--brand-orange);
}

.aoxtabs {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--neutral-01);
  margin-bottom: 40px;
  margin-top: -40px;
  background-color: var(--neutral-01);
  border-radius: 10px 10px 0 0;
}

.aoxtabs .tab-link {
  background: none;
  border: none;
  font-size: 16px;
  font-weight: 500;
  padding: 15px 30px; /* Increased padding for spacing */
  color: var(--neutral-06);
  cursor: pointer;
  position: relative;
  transition: color 0.3s ease;
  width: 50%;
}

.aoxtabs .tab-link.active,
.aoxtabs .tab-link:hover {
  color: var(--brand-orange);
  background: linear-gradient(45deg, var(--brand-tint), var(--brand-tint));
  border-radius: 10px 10px 0px 0px;
  border: var(--neutral-01) 1px solid;
}

.aoxtabs img{
  height: 45px;
  width: auto;
  margin-right: 10px;
}

.aoxtabs .tab-new-icon{
  height: 40px;
  width: auto;
  margin-left: 5px;
  margin-right: 0;
}

.new-lite {
  height: 40px;
  width: auto;
  position: absolute;
  top: -10px;
  right: 0px;
}

.aoxtabs .tab-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 3px;
  bottom: -1px;
  left: 50%;
  background: linear-gradient(45deg, var(--brand-orange), var(--yellow-05)); /* Purple gradient */
  transition: all 0.4s ease;
}

.aoxtabs .tab-link.active::after {
  width: 100%;
  left: 0;
}

@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-15px);
	}
  100% {
		transform: translatey(0px);
	}
}

.icon-animate{
  animation: float 2s ease-in-out infinite;
}

@media screen and (max-width: 992px) {
  .aoxtabs{
    margin-top: 0;
    margin-bottom: 10px;
  }

  .aoxclouddownload .writeup {
    margin-bottom: 0px !important;
  }
}

@media screen and (max-width: 780px) {
  .aoxclouddownload .writeup {
    margin-bottom: -30px !important;
  }
}

@media screen and (max-width: 519px) {
  .aoxtabs .tab-link {
    padding: 15px 0px;
  }
}

@media only screen and (max-width: 393px) {
  .aoxtabs img{
    height: 35px;
  }

  .aoxtabs .tab-new-icon{
    height: 30px;
  }
}

/*--------------------------------------------------------------
# Share
--------------------------------------------------------------*/
.share-bg {
  background-image: url("/assets/img/share-bg.webp") !important;
  background-repeat: no-repeat;
  background-size: cover !important;
}

.program-tab.share,
.program-tab.share section {
  background-color: transparent !important;
}

.dw-qr-code-android {
  position: relative;
}

.dw-qr-code-android button {
  background: var(--neutral-01);
  padding: 0px;
  border: 2px solid var(--brand-orange);
  padding: 14px;
  border-radius: 10px;
}

#qrcode img {
  border: 0px;
  padding: 0px;
  border-radius: 0px;
}

.dw-qr-code img {
  border: 2px solid var(--brand-orange);
  padding: 14px;
  border-radius: 10px;
  width: 36%;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--neutral-01);
}

.dw-qr-code-android img {
  width: auto;
}

.share article {
  margin-left: auto;
  margin-right: auto;
  display: inline-flex;
  margin-top: 4%;
}

.btn-copy {
  width: 100%;
  display: inline-grid;
}

.btn-copy button {
  float: left;
  background-color: var(--brand-orange);
  color: var(--on-brand);
  font-size: 1.1rem;
  text-align: center;
  border-radius: 999em;
  font-weight: 700;
  border: 2px solid var(--brand-orange);
  min-width: 204px;
  margin-left: 20px;
  margin-right: 20px;
}

button.btn-save {
  float: left;
  background-color: transparent;
  color: var(--brand-orange);
  font-size: 1.1rem;
  text-align: center;
  border-radius: 999em;
  font-weight: 700;
  border: 2px solid var(--brand-orange);
  min-width: 204px;
  margin-left: 20px;
  margin-right: 20px;
}

.btn-copy button:hover,
button.btn-save:hover {
  color: var(--neutral-16) !important;
  background-color: var(--brand-yellow);
  border: 2px solid var(--brand-yellow);
}

.btn-copy a {
  color: var(--neutral-01);
  display: inline-grid;
  width: 100%;
  position: relative;
}

.btn-copy a button:hover  {
  color: var(--neutral-16);
}

canvas {
  width: 100%;
}

/*protocol*/
.protocol {
  text-align: left;
  /* margin-top: -60px; */
}

.protocol li {
  list-style-type: disc !important;
}

.protocol ul {
  margin-bottom: 4%;
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 110px;
  z-index: 996;
  background: var(--orange-08);
  width: 40px;
  height: 40px;
  border-radius: 50px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 28px;
  color: var(--neutral-01);
  line-height: 0;
}

.back-to-top:hover {
  background: var(--brand-orange);
  color: var(--neutral-01);
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar {
  padding: 0;
}
.navbar .logo{
  display: none;
}

.navbar .icon-menu-mobile {
  display: none;
}

.nav-icon-test {
  display: none;
}

.dropdown img {
  display: none;
}

.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
  font-size: 1rem;
}

.navbar li {
  position: relative;
}

.navbar a,
.navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 10px 30px;
  font-size: 1em;
  color: var(--neutral-16);
  font-weight: 400;
  white-space: nowrap;
  transition: 0.3s;
}

.navbar a i,
.navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
  color: var(--brand-orange);
}

.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 14px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: var(--neutral-01);
  box-shadow: 0px 0px 30px var(--alpha-tint-25);
  transition: 0.3s;
}

.navbar .dropdown ul li {
  min-width: 200px;
}

.navbar .dropdown ul a {
  padding: 10px 20px;
  font-size: 14px;
  text-transform: none;
}

.navbar .dropdown ul a i {
  font-size: 12px;
}

.logo h1 a{
  padding: 0 !important;
}

.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover>a {
  color: var(--brand-orange);
}

.navbar .dropdown:hover>ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}

.navbar .dropdown .dropdown:hover>ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}

.navbar .icon-menu a,
.navbar .icon-menu a:focus {
  justify-content: left;
}

@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }

  .navbar .dropdown .dropdown:hover>ul {
    left: -100%;
  }

}

/** Mobile Navigation */
.mobile-nav-toggle {
  color: var(--blue-10);
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}

.mobile-nav-toggle.bi-x {
  color: var(--neutral-16);
}

@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: block;
  }

  .navbar ul {
    display: none;
  }

  .logo h1 a{
    padding: 15px 20px !important;
  }

  .nav-icon-test {
    display: block;
  }

  .dropdown img {
    display: block;
  }
}

/******************** MOBILE NAVIGATION SESSION  *******************/
.navbar-mobile {
  position: fixed;
  /* the ul that was meant to scroll gets position:relative below 992px,
     so the menu flows inside this box instead. Scroll here, otherwise a
     short screen clips the last items (e.g. the open language list). */
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  top: 10px;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: var(--yellow-01);
  transition: 0.3s;
  z-index: 999;
}

.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 42px;
  right: 11px;
}

.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 100px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  padding: 10px 0;
  overflow-y: auto;
  transition: 0.3s;
}

.navbar-mobile a,
.navbar-mobile a:focus {
  padding: 15px 20px;
  font-size: 19px;
  color: var(--neutral-16);
}

.navbar-mobile h3 a {
  font-weight: 700;
}

.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover>a {
  color: var(--brand-orange);
}

.navbar-mobile .dropdown {
  /* bootstrap sets .dropdown to inline-flex, which put the open panel
     beside the trigger as a sibling flex item and stretched the trigger
     to the panel's height - the label appeared to jump down */
  display: block;
}

.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: var(--neutral-01);
  box-shadow: 0px 0px 30px var(--alpha-tint-25);
}

.navbar-mobile .dropdown ul li {
  min-width: 200px;
}

.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
}

.navbar-mobile .dropdown ul a i {
  font-size: 12px;
}

.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover>a {
  color: var(--brand-orange);
}

.navbar-mobile .dropdown>.dropdown-active {
  display: block;
}


/*--------------------------------------------------------------
# About us counter
--------------------------------------------------------------*/
#why-us {
  padding: 48px 0;
  background: var(--yellow-01);
}

#why-us .counters span {
  font-weight: bold;
  font-size: 48px;
  display: block;
  color: var(--orange-08);
}

#why-us .counters p {
  padding: 0;
  margin: 0 0 20px 0;
  font-size: 1rem;
  color: var(--neutral-16);
}


/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Highlights
--------------------------------------------------------------*/
#highlights {
  padding: 60px 0 70px;
}

#highlights .highlights-title {
  text-align: center;
  font-weight: 700;
  font-size: 32px;
  color: var(--neutral-13);
  margin: 0 0 45px;
}

#highlights .highlights-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: stretch;
}

#highlights .highlight-card {
  background: var(--neutral-01);
  border: 1px solid var(--yellow-01);
  border-radius: 14px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
  transition: transform .2s ease, box-shadow .2s ease;
}

#highlights .highlight-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -12px var(--alpha-tint-35);
}

#highlights .highlight-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--yellow-01);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

#highlights .highlight-icon i {
  font-size: 22px;
  line-height: 1;
  color: var(--brand-orange);
}

#highlights .highlight-card p {
  margin: 0;
  font-size: 1.05em;
  line-height: 1.55;
  color: var(--neutral-11);
}

@media (max-width: 991px) {
  #highlights .highlights-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  #highlights {
    padding: 40px 0 50px;
  }
  #highlights .highlights-title {
    font-size: 26px;
    margin-bottom: 32px;
  }
  #highlights .highlights-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  #highlights .highlight-card {
    transition: none;
  }
  #highlights .highlight-card:hover {
    transform: none;
  }
}

/*--------------------------------------------------------------
# Partner
--------------------------------------------------------------*/
#partner {
  padding: 40px 0;
  text-align: left;
  background: var(--neutral-01);
  /* box-shadow: inset 0px 0px 12px 0px rgba(0, 0, 0, 0.1); */
}

#partner .section-header {
  margin-bottom: 40px;
}

#partner .section-header h2 {
  color: var(--neutral-13) !important;
}

#partner .partner-content h3 {
  font-size: 17px;
  font-weight: bold;
  margin: 10px 0 5px 0;
  color: var(--neutral-10);
}

#partner .partner-contact h3 {
  font-size: 17px;
  font-weight: normal;
  margin: 10px 0 5px 0;
  color: var(--neutral-10);
}

#partner .partner-contact {
  padding-top: 10px;
}

#partner .partner-social {
  padding-top: 7px;
}

#partner .partner-contact a {
  color: var(--neutral-10);
  font-size: 14px;
}

#partner .partner-contact i {
  padding-right: 8px;
  padding-left: 15px;
}

#partner .partner-contact i:first-child {
  padding-left: 0px;
}

/*--------------------------------------------------------------
# collaboration
--------------------------------------------------------------*/
.collaboration-bg {
  background-image: url(/assets/img/collaboratebg.webp) !important;
}

#program .program-where{
  margin-top: 105px;
}

#program .program-submit{
  margin-top: 60px;
}

#program .program-submit .index-app-dl-btn {
  float: none;
  margin-right: 0;
}

#program .index-app-dl-btn.btn-affiliate {
  background-color: var(--yellow-01);
  color: var(--brand-orange-text);
}

#program .index-app-dl-btn-free.btn-collabrate {
  background-color: var(--brand-orange);
  color: var(--on-brand);
}

/*--------------------------------------------------------------
# Affiliate
--------------------------------------------------------------*/
#affiliate {
  padding: 0;
  text-align: left;
  background: var(--neutral-01);
  /* box-shadow: inset 0px 0px 12px 0px rgba(0, 0, 0, 0.1); */
}

#affiliate .affiliate-banner {
  background-position: center;
  margin: auto;
  height: 18.75rem;
  border-radius: 0.75rem;
  background-size: cover;
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  padding: 0px 20px 0 20px;
  justify-content: space-around;
}

#affiliate .banner-text {
  text-align: left;
  align-items: center;
}

#affiliate .banner-text h2 {
  color: var(--neutral-01);
  margin-bottom: 5px;
}

#affiliate .banner-text p {
  color: var(--neutral-01);
  opacity: 80%;
}

#affiliate .banner-btn {
  width: auto;
  position: absolute;
  bottom: 0px;
  background-image: linear-gradient(to bottom right, var(--yellow-04), var(--orange-08));
  color: var(--red-06);
  font-size: 1.2rem;
  text-align: center;
  line-height: 30px;
  border-radius: 999em;
  font-weight: 700;
  padding: 10px 20px;
  margin-right: 20px;
  margin-bottom: 30px;
  min-width: 200px;
  border: 3px solid var(--neutral-01);
}

#affiliate .banner-btn:hover {
  background-image: linear-gradient(to bottom right, var(--yellow-01), var(--brand-orange));
  color: var(--neutral-16) !important;
  border: 4px solid var(--neutral-01);
}

@media screen and (max-width: 1200px) {
  #affiliate .affiliate-banner {
    padding-bottom: 0;
  }

  #affiliate .banner-btn {
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 992px) {
  #affiliate .banner-btn {
    min-width: 150px;
    margin-bottom: 25px;
  }

  #affiliate .banner-text h2 {
    font-size: 25px;
  }

  #affiliate .banner-text p {
    font-size: 12px;
  }
}

@media screen and (max-width: 519px) {

  #affiliate .affiliate-banner {
    background-image: url(/assets/img/affiliate_banner_background.webp);
    justify-content: left;
  }

  #affiliate .banner-text h2 {
    font-size: 16px;
  }

  #affiliate .banner-text p {
    font-size: 12px;
    z-index: 1;
    position: relative;
  }

  #affiliate .banner-btn {
    font-size: 15px;
    line-height: 15px;
    min-width: 0px;
  }

  #affiliate .banner-img img {
    width: 70%;
    height: auto;
    position: absolute;
    top: 22%;
    right: -36px;
    z-index: 0;
  }
}

/*--------------------------------------------------------------
# affiliate
--------------------------------------------------------------*/
#program .program-tab {
  margin-top: 60px;
  background: var(--neutral-01);
}

#program .program-tab [data-tab-content] {
  display: none;
}

#program .program-tab .active[data-tab-content] {
  display: block;
  width: 66%;
  margin-left: auto;
  margin-right: auto;
}

#program .program-tab .tabs {
  display: flex;
  justify-content: space-around;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#program .program-tab .tab {
  flex: 1;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  padding: 10px;
  color: var(--neutral-02);
  border-bottom: 1px solid var(--neutral-02);
}

#program .program-tab .tab.active {
  color: var(--brand-orange);
  border-bottom: 2px solid var(--brand-orange);
}

#program .program-tab .tab-li {
  flex: 1;
  margin-bottom: 0;
}

#program .program-tab .tab-li a {
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  padding: 10px 0;
  color: var(--neutral-05);
  border-bottom: 2px solid var(--neutral-03);
  margin-bottom: 0.4rem;
  width: 100%;
  display: block;
}

#program .program-tab .tab-li a.active {
  color: var(--brand-orange);
  border-bottom: 2px solid var(--brand-orange);
}

#program .program-tab .tab-li a {
  text-decoration: none;
  white-space: nowrap;
  padding: 10px;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  display: block;
}

#program .dl-btn-center{
  justify-content: center;
  margin-bottom: 58px;
}

#program .index-app-dl-btn{
  margin-top: 0;

}

#program .index-app-dl-btn-free{
  margin-top: 0;
  color: var(--brand-orange-text);
  background-color: var(--yellow-01);
  border: none;
}

#program .program-title .index-app-dl-btn{
  float: none;
  margin-right: 0;
  background-color: transparent;
  border: 2px solid var(--brand-orange-text);
  color: var(--brand-orange-text) !important;
}
#program .program-title .index-app-dl-btn:hover{
  border: 2px solid var(--brand-yellow);
}

#program {
  background-image: url("/assets/img/affiliatebg.webp");
  background-repeat: no-repeat;
  background-size: contain;
  padding-top: 80px;
}

#program .program-why{
  margin-top: 105px;
}

#program .program-tab section{
  padding-top: 40px;
}

#program .program-who {
  text-align: left;
  margin-top: 105px;
  justify-content: space-between;
}

#program h3{
  text-align: center;
  margin-bottom: 60px;
}

#program .program-who img{
  margin-bottom: 20px;
}

#program .program-earn{
  margin-top: 105px;
}

#program .program-amount{
  justify-content: space-between;
  background-color: var(--blue-02);
  border-radius: 20px;
}

#program .program-amount .program-amount-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 50px;
}

#program .program-amount .program-amount-text .row{
  margin: 20px 0;
  background-color: var(--alpha-white-91);
    padding: 20px;
    border-radius: 10px;
}

#program .program-amount .program-amount-text h3{
  margin-bottom: revert;
}

#program .program-amount .program-amount-text h2{
  text-align: left;
  margin-bottom: 0;
}

#program .program-amount .program-amount-text h1{
  text-align: right;
  margin-bottom: 0;
  color: var(--blue-05);
}

#program .program-amount .program-amount-text hr{
  color: var(--neutral-01);
  height: 3px;
}

#program .program-how{
  margin-top: 105px;
}

#program .program-how .row{
  align-items: baseline;
  margin-bottom: 50px;
}

#program .program-how .program-step-content img{
  margin-bottom: 30px;
}

#program .program-how .program-step-arrow img{
  margin-bottom: 63px;
}

#program .program-how .index-app-dl-btn {
  float: none;
  margin-right: 0;
}

/*--------------------------------------------------------------
# FAQ
--------------------------------------------------------------*/
#faq_section .row{
  justify-content: space-between;
}

#faq_section .faq_header{
  text-align: left;
}

#faq_section .faq_header h1{
  margin-top: 0;
  text-align: left;
}

#faq_section .faq_header span {
  font-weight: 100;
}

#faq_section .faq_header a{
  text-decoration: underline;
}

#faq_section button{
  border: 1px solid var(--brand-orange);
  background-color: var(--neutral-01);
  color: var(--brand-orange);
}

#faq_section button:hover{
  border: 1px solid var(--yellow-04);
  background-color: var(--yellow-04);
  color: var(--neutral-16);
}

#faq_section .faq_list {
  max-width: 1000px;
  text-align: left;
}

#faq_section .faq-item {
  background-color: var(--neutral-01);
  color: var(--neutral-16);
  margin: 1rem 0;
  border-radius: 0.5rem;
  box-shadow: 0 2px 5px 0 var(--alpha-black-15);
}

#faq_section .faq-item:hover {
  background-color: var(--yellow-04);
}

#faq_section .accordion-item-header {
  padding: 0.5rem 3rem 0.5rem 1rem;
  min-height: 3.5rem;
  line-height: 1.25rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}

#faq_section .accordion-item-header::after {
  content: "\002B";
  font-size: 2rem;
  position: absolute;
  right: 1rem;
  color:  var(--brand-orange);
}

#faq_section .accordion-item-header.active::after {
  content: "\2212";
}
#faq_section .accordion-item-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

#faq_section .accordion-item-body-content {
  padding: 1rem;
  line-height: 1.5rem;
  border-top: 1px solid;
  border-image: linear-gradient(to right, transparent, var(--brand-orange), transparent) 1;
  text-align: left;
}

/*--------------------------------------------------------------
# new faq page css
--------------------------------------------------------------*/

#services.faq-main-bg {
  background-image: url("/assets/img/faq-banner.webp");
  background-repeat: no-repeat; 
  background-size: cover;
}

#services .hr-lines:before{
  content:" ";
  display: block;
  height: 1px;
  width: 40%;
  position: absolute;
  top: 50%;
  left: 0;
  background: var(--neutral-03);
}

#services .hr-lines{
  position: relative;
  margin: 30px auto;
  text-align: center;
  color: var(--neutral-08);
}

#services .hr-lines:after{
  content:" ";
  height: 1px;
  width: 40%;
  background: var(--neutral-03);
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
}

#services .section-qns h6{
  margin-bottom: 10px;
  height: 40px;
}

#services .section-qns p{
   margin: 0;
   font-size: smaller;
}

#services .index-app-dl-btn {
  width: auto;
  float: none;
  background-color: var(--neutral-01);
  border: 2px solid var(--brand-orange-text);
  color: var(--brand-orange-text) !important;
  font-size: small;
  margin-right: 0;
}

#services .faq-support{
  margin-top: 30px;
}

#services .faq-support img{
  width: 25%;
}

#services .faq-tab-section{
  justify-content: space-between;
}

#services .faq-tab{
  padding: 20px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 15px;
  background: var(--neutral-01);
  box-shadow: 0 10px 29px 0 var(--alpha-tint-10);
  transition: all 0.3s ease-in-out;
  text-align: left;
}

#services .faq-tab:empty {
  display: none;
}

.faq-container ul .row:has(p:empty) {
  display:none;
}

.faq-container ul .faq-bg-grey:has(p:empty) {
  display:none;
}

.faq-bg-grey div:has(div:empty) {
  display:none;
}

#services .faq-links h3{
    margin-top: 50px;
    margin-bottom: 50px;
}

#services .faq-links hr{
  margin-top: 0px;
}

#services .faq-links h4{
  margin-top: 10px;
}

#services .faq-links p {
  height: 44px;
}

#services .breadcrumb{
  margin-bottom: 50px;
}

#services .faq-container{
  text-align: left;
}

#services .faq-container img{
   max-height: 620px;
   width: auto;
}

#services .faq-container .col-md-4:has(img), #services .faq-container .col-md-4:has(iframe){
   text-align: center;
}

#services .faq-container ul .row:has(img[src=""]) .col-md-4{
  display: none;
}

#services .faq-container ul .row:has(img[src=""]) .col-md-7{
  width: 95%;
}

#services .faq-container ul .row:has(img[src=""]) .col-md-7 p{
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# FAQ Session
--------------------------------------------------------------*/
#services.faq-category-bg {
  background-image: url("/assets/img/faq-banner.webp");
  background-repeat: no-repeat;
  background-size: cover;
}

.faq-bg-grey {
  padding: 4%;
  display: flow-root;
  background-color: var(--neutral-01);
  border-radius: 20px;
}

#services .circle i {
  margin-right: 10px;
  margin-left: auto;
  display: none;
}

#services .circle {
  pointer-events: none;
}

/*Single Page FAQ*/
.faq-container h3 {
  margin-bottom: 4%;
}

.faq-container h5 {
  font-size: 1.5rem;
}

.faq-container .section-header p {
  font-size: 1.1rem;
}

.faq-container ul {
  padding-left: 0px;
}

.faq-container ul .row {
  align-items: center;
  justify-content: space-around;
}

.faq-container .about-extra {
  padding: 4%;
}

ul.faq {
  margin: 0px 10px;
  padding: 0px;
}

ul.faq li {
  box-shadow: 0 1px 2px var(--alpha-black-08);
  transition: box-shadow 0.2s;
  border-radius: 6px;
  background-color: var(--neutral-01);
  margin-bottom: 0.5em;
}

ul.faq li a {
  font-weight: 400;
  margin: 0;
  padding: 1em 2em 1em 1em;
  display: block;
}

ul.faq li a:hover {
  color: var(--brand-orange);
}

ul.faq-content {
  padding-left: 0;
}

ul.faq-content p {
  width: 100%;
}

ul.faq-content p a{
  color: var(--brand-orange);
}

ul.faq-content ul li {
  list-style-type: disc;
  margin-left: 20px;
}

ul.faq-content ol{
  padding-left: 0;
}

/*faq video adjustment*/
@media screen and (max-width: 380px) {
  .faq-content .video {
    width: -webkit-fill-available !important;
  }
}

@media screen and (max-width: 1188px) {
  .faq-content .video {
    height: 566px;
    width: 255px;
  }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  background: var(--neutral-13);
  padding: 0 0 20px 0;
  color: var(--neutral-01);
  font-size: 14px;
}

#footer .footer-top {
  background-color: var(--yellow-01);
  padding: 50px 0 20px 0;
}

#footer .footer-top .footer-info {
  margin-bottom: 30px;
}

#footer .footer-top .footer-info h3 {
  font-size: 34px;
  margin: 0 0 20px 0;
  padding: 0px;
  line-height: 1;
  color: var(--neutral-01);
  font-weight: 400;
  letter-spacing: 3px;
}

#footer .footer-top .footer-info p {
  font-size: 13px;
  line-height: 24px;
  margin-bottom: 0;
  color: var(--neutral-16);
}

#footer .footer-top h4 {
  font-size: 14px;
  font-weight: bold;
  color: var(--neutral-16);
  text-transform: uppercase;
  position: relative;
  padding-bottom: 10px;
}

#footer .footer-top .footer-links {
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
}

#footer .footer-top .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#footer .footer-top .footer-links ul li {
  padding: 8px 0;
  line-height: 28px;
}

#footer .footer-top .footer-links ul li:first-child {
  padding-top: 0;
}

#footer .footer-top .footer-links ul li:last-child {
  padding-bottom: 0;
}

#footer .footer-top .footer-links ul a {
  color: var(--blue-01);
}

#footer .footer-top .footer-links ul a:hover {
  color: var(--brand-orange);
}

#footer .copyright {
  text-align: left;
  padding-top: 20px;
}

#footer .copyright a {
  color: var(--neutral-01);
}

#footer .copyright a:hover {
  color: var(--brand-orange);
}

.btn-more {
  background-color: var(--yellow-01);
  border: 2px solid var(--brand-orange);
  border-radius: 999em;
  color: var(--brand-orange);
  text-align: center;
  padding: 4px;
  width: 30%;
  margin-top: 20px;
  cursor: pointer;
}

.btn-more:hover {
  background-color: var(--brand-yellow);
  border: 2px solid var(--brand-yellow);
  color: var(--neutral-16);
}

.footer-top img {
  float: left;
  width: 50px;
  margin-top: -8px;
  margin-right: 8px;
}

#footer .footer-top a {
  color: var(--neutral-16) !important;
}

#footer .footer-top a:hover {
  color: var(--brand-orange) !important;
}

#footer ul.footer-social li {
  list-style-type: none;
}

#footer ul.footer-social li i {
  font-size: 1rem;
  margin-right: 10px;
  display: block;
  float: left;
  color: var(--neutral-16);
}

#footer ul.footer-social li span {
  display: inline-block;
  line-height: 24px;
}

.ml30 {
  margin-left: 30px;
}

/*--------------------------------------------------------------
# AOX Banner Section
--------------------------------------------------------------*/
#aox {
  width: 100%;
  position: relative;
  background-color: var(--neutral-01);
  padding: 0px 0 0px 0;
  height: fit-content;
}

/*Banner Index*/
#aox .hero-info-index {
  width: 86%;
  float: left;
}

#aox .hero-info-index h2 {
  color: var(--neutral-16);
  margin-bottom: 0px;
  font-size: 5rem;
  font-weight: 700;
  line-height: 80px;
  text-transform: capitalize;
  margin-top: 8%;
}

#aox .hero-info-index h2 span {
  color: var(--brand-orange);
  font-size: 5rem;
}

#aox .hero-info-index h4 {
  margin-top: 30px;
  font-weight: 700;
  font-size: 23px;
}

#aox .hero-img-index img {
  max-height: 400px;
}

#aox .dot {
  height: 15px;
  width: 15px;
  margin: 0 5px;
  background-color: var(--neutral-03);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

#aox .dot:hover{
    background-color: var(--brand-orange);
}

#aox .active{
  background-color: var(--brand-orange);
}

@media (max-width: 519px) {
  #aox .dot {
    height: 10px;
    width: 10px;
    margin: 0 5px;
  }
}

/*--------------------------------------------------------------
# Sections
--------------------------------------------------------------*/

/* Sections Header
--------------------------------*/
.section-header h2,
.section-header h3 {
  /* color: #000; */
  text-align: center;
  font-weight: 600;
  /* position: relative; */
  /* font-size: 2.4rem; */
}

.section-header p {
  text-align: center;
  margin: auto;
  font-size: 15px;
  padding-bottom: 20px;
  color: var(--blue-10);
  width: 51%;
}

@media (max-width: 767px) {
  .section-header p {
    width: 100%;
  }

  .section-header h2, .section-header h3 {
    font-size: 1.5rem;
  }
}

/*TIMER*/

#clockdiv {
  margin-top: 20px;
	color: var(--neutral-01);
	font-weight: 100;
	text-align: center;
	font-size: 30px;
  align-items: center;
  display: inline-flex;
  justify-content: center;
  padding: 8px 10%;
  position: relative;
  background-image: url("/assets/img/clockdiv-bg.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  min-width: 100%;
}

#clockdiv h4 {
  margin: 0px 10px;
  font-weight: 400;
}

#clockdiv > div {
	display: inline-grid;
}

#clockdiv div > span {
	padding: 0 15px;
	display: inline-block;
  font-weight: 600;
}

.smalltext {
	font-size: 13px;
  margin-top: -6px;
}

.feedback {
    background-image: url("/assets/img/feedback-bg.webp");
    width: 460px;
    height: 230px;
    background-size: cover;
    position: fixed;
    bottom: 0;
    left: 10px;
    z-index: 99;
    color: var(--neutral-16);
}

.feeback-close {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}

.feedback h3 {
  margin: 20px 0 0 0;
}

.feedback p {
  font-size: 16px;
}

.feedback .feedback-ty {
  color: var(--neutral-01); 
  margin-top: 4px;
}

.feedback button {
  background-color: var(--neutral-01);
  color: var(--neutral-16);
  width: 40%;
  padding: 10px;
}

.mobile-feedback {
  display: none;
}

.appsupport {
  font-size: 12px;
  margin: 16px 0 0 0;
}

/******************** RESPONSIVE SESSION  *******************/
@media screen and (max-width: 1920px) {
  .vip-bg {
    background-position: 0 -540px;
  }
}

@media screen and (max-width: 1400px) {
  ul.recommended-app li {
    width: 48%;
    margin: 1%;
    min-height: 130px;
  }
  ul.recommended-app li a span {
    width: 66%;
  }
  .google-s img {
    width: 50%;
  }

  section .blog {
    max-width: 80%;
    margin-top: 8%;
  }

  .vip-banner h1 {
    text-align: left;
  }
}

@media screen and (max-width: 1200px) and (min-width: 992px) {
  #aox .hero-info-index h2 {
    font-size: 4.1rem;
  }

  #aox .hero-info-index h2 span {
    font-size: 4.3rem;
  }

  #footer .footer-top .footer-links {
    padding: 0;
  }  
  

  .google-session .banner h3{
    font-size: 1.3rem;
  }

  .google-session .banner .index-app-dl-btn{
    font-size: 1rem;
  }

  .windowslite, .windowsstandard {
    font-size: 0.9rem;
  }

  .windows-dl-btn strong,
.appstore-dl-btn strong {
    font-size: 0.6rem !important;
    font-weight: 400 !important;
  }
}

@media screen and (max-width: 1024px) {

  .vip-plan {
    margin-top: 2%;
  }

  .vip-level {
    min-height: auto;
  }

  .section .blog {
    width: 80%;
  }

  .index-banner-bg {
    background-size: cover;
  }

  .btn-dl {
    line-height: 48px;
  }

  .btn-dl img {
    height: 40px;
    margin-right: 0px;
  }

  .img-windows{
    height: auto !important;
  }

  #program .program-where img {
    width: 50%;
  }

  ul.writeup li:first-child img {
    width: 202px;
  }

  .btn-save {
    margin-top: 15px;
  }

  .btn-copy button {
    margin-top: 15px;
  }
}

@media screen and (max-width: 992px) {

  #aox {
    text-align: center;
    height: fit-content;
  }

  .index-banner-bg {
    background-size: cover;
  }

  #aox .hero-img-index img {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 50%;
    height: auto;
  }

  #aox .hero-info-index h2 {
    line-height: 70px;
    font-size: 3.8em;
  }

  #aox .hero-info-index {
    width: 100%;
  }

  #aox .hero-info-index h2 span {
    font-size: 4.1rem;
  }

  #aox .hero-info-index {
    margin-top: 0;
  }

  #aox .container_left {
    width: 100% !important;
    order: 1;
    align-items: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

  #aox .container_right {
    width: 100% !important;
    order: 2;
  }

  #aox .container {
    align-items: center;
    display: flex;
    flex-direction: column;
  }


  .cs .col-12 {
    width: 100% !important;
  }

  .vip-banner h3 {
    text-align: center;
  }

  .vip-banner h1,
  .vip-banner h4 {
    text-align: center;
    white-space: wrap;
  }

  #aox .hero-img-index img {
    width: 76%;
  }

  .icon-hug {
    display: none;
  }

  .account-nav{
    margin-top: 6%;
  }

  .account-nav .col:nth-child(1) {
    width: 84px;
    margin-top: 4%;
  }

  .account-nav .col:nth-child(2) {
    width: 88%;
  }

  .vip-level {
    width: 100%;
  }

  .vip-plan .col-12 {
    width: 100%;
  }

  .vip-plan .plan {
    width: 33.33%;
  }

  #clockdiv{
    background-size: cover;
  }

  .plan:first-child .aoxplan{
    border-radius: 10px 0 0 0;
  }

  .plan:nth-child(3) .aoxplan{
    border-radius: 0 10px 0 0;
    border-right: 1px solid var(--neutral-16);
  }

  .vip-plan .col-md-3.plan:nth-child(3) .aoxplan{
    border-bottom: 2px solid var(--neutral-16);
  }

  .plan:nth-child(1) .aoxplan,
  .plan:nth-child(4) .aoxplan {
    border-radius: 10px 0 0 10px;
  }

  .plan:nth-child(4) .plan-price {
    border-radius: 10px 0 0 0;
  }

  .plan:nth-child(3) .aoxplan,
  .plan:last-child .aoxplan {
    border-radius: 0 10px 10px 0;
  }

  .plan:nth-child(3) .plan-price,
  .plan:nth-child(6) .plan-price {
    border-top-right-radius: 10px;
  }

  .plan:last-child .plan-price {
    border-top-right-radius: 10px;
  }

  .payment-history .row ul li {
    width: 100%;
  }

  #svip .row {
    text-align: center;
  }

  #svip .svip_third {
    justify-content: center;
  }

  #svip .svip_third p {
    text-align: left;
  }

  #svip .svip_pros {
    padding: 0;
    margin-top: 20px;
  }

  #svip_compare table thead {
    position: relative;
  }

  #svip_compare table tr {
    border-bottom: none;
    display: table-row;
    border: 1px solid var(--neutral-01);
  }

  #svip_compare table td {
    border: none;
    display: table-cell;
    text-align: center;
  }

  #svip_compare table {
    background-color: var(--blue-01);
    box-shadow: none;
    padding: 20px;
    border-style: hidden;
    width: 100%;
  }

  #svip_how .row {
    text-align: center;
  }

  #svip_how img {
    margin-bottom: 20px;
  }

  #svip .svip_header h1{
    text-align: center;
  }

  #about .reason-bg {
    text-align: center;
    margin-bottom: 80px;
    padding: 2% 4%;
   }

   #about .reason-bg p {
    text-align: center;
    margin: 10px 0;
  }

  #about .reason-bg .img-text-center{
    margin-bottom: 40px;
  }

  #about .reason-bg:nth-child(2) .img-text-center{
    text-align: center;
  }

  #about .reason-bg .img-text-center img{
    height: 50%;
    width: 50%;
  }

  #about .reason-bg h3 {
    text-align: center;
    margin: 0;
  }

  #about .about-extra .btn-download,
  #about .about-container .btn-download {
    width: 100%;
  }

  #about .btn-download {
    width: 100%;
  }

  #about .btn-download {
    width: 100%;
  }

  .section .blog {
    width: 80%;
  }

  ul.recommended-app li a h6 {
    margin-top: 4%;
  }

  ul.recommended-app li button {
    float: left;
    margin-top: 10px;
  }

  ul.recommended-app li a span {
    width: 100%;
    margin-top: 10px;
  }

  .google-s .banner {
    display: none;
  }

  .google-session .col-md-6 {
    width: 100%;
  }

  ul.popular-app {
    display: none;
  }

  .search-container {
    margin-bottom: 4%;
    width: 100%;
  }

  .google-s img {
    width: 40%;
  }

  ul.recommended-app li a img {
    height: 40px;
    width: 40px !important;
  }

  #partner {
    text-align: center;
  }

  #partner .partner-contact {
    padding-top: 10px;
  }

  #partner .partner-contact i {
    padding-right: 5px;
    padding-left: 10px;
  }

  #partner .partner-contact i:first-child {
    padding-left: 0px;
  }

  #partner .order-lg-3 img {
    display: none !important;
  }

  #partner .partner-hide {
    display: inline !important;
  }

  #services .windows {
    min-height: 355px;
  }

  #services .row .col-md-6 .circle {
    min-height: 165px;
  }

  #services .hr-lines:before{
    width: 35%;
  }

  #services .hr-lines:after{
    width: 35%;
  }

  #services .section-qns .row .col-6:nth-child(1),#services .section-qns .row .col-6:nth-child(2){
    margin-bottom: 20px;
  }

  #services .faq-links h3{
    margin-top: 50px;
    margin-bottom: 20px;
  }

  #services .faq-links .faq-support {
    margin-bottom: 20px;
  }

  #services .icon {
    display: block;
    top: 0px;
  }

  .faq-bg-grey {
    border-radius: 10px;
  }

  ul.faq-content {
    margin-top: 10%;
    min-height: 300px;
  }

  ul.faq-content ul li {
    text-align: left;
  }

  #program .program-tab{
    align-items: center;
    display: flex;
  }

  #program .program-tab nav{
    width: fit-content;
    float: left;
  }

  #program .program-tab .tabs{
    flex-direction: column;
    width: fit-content;
  }

  #program .program-tab .tab-li a {
    text-align: left;
  }

  #program .program-tab article {
    text-align: left;
    display: inline-grid;
    width: 100%;
  }

  #program .program-tab article.content {
    width: 80% !important;
  }

  #program .program-earn img{
    margin-bottom: 30px;
    width: 70%;
  }

  #program .program-amount .program-amount-text{
    padding-right: calc(var(--bs-gutter-x) * .5);
  }

  #program .program-how .row {
   flex-direction: column;
  }

  #program .program-how .program-step-content img{
    width: 15%;
  }

  #program .program-how .program-step-arrow img{
    display: none;
  }

  #faq_section .faq_header{
    text-align: center;
  }

  #faq_section button{
      margin-bottom: 10px;
  }

  #faq_section .faq_list{
      text-align: left;
  }

  #faq_section .faq_header h1 {
    text-align: center;
  }

  .faq-container img {
    width: 70%;
  }

  .btn-dl {
    margin-bottom: 20px;
    line-height: 72px;
  }

  #download .icon-coming {
    line-height: 22px;
  }

  #download .icon-coming {
    top: -30%;
    right: 4%;
  }

  .dw-qr-code img {
    width: 100%;
  }

  .index-app-dl-btn {
    font-size: 1.5rem;
  }

  .index-app-dl-btn-free {
    font-size: 1.5rem;
  }

  .windowsstandard {
    font-size: 0.9rem;
  }

  .windows-dl-btn strong,
.appstore-dl-btn strong {
    font-size: 0.7rem !important;
    font-weight: 400 !important;
  }

  #footer .footer-top .footer-links {
    margin-left: 0px;
  }

  .standardwindows .setup-right.order-1 {
    order: 2 !important;
  }

  .standardwindows .setup-left.order-2 {
    order: 1 !important;
  }

}

@media screen and (max-width: 992px) and (min-width: 780px) {
  .vip-bg {
    background-position: 0 0% !important;
    background-size: contain;
    margin-top: 65px;
  }

  .vip-banner h3 {
    margin-top: 0%;
    text-align: center;
  }

  .vip-banner h1 {
    text-align: center;
  }

  .vip-banner h4 {
    text-align: center;
    font-size: 1em;
  }

  #aox .hero-img-index img {
    width: auto;
    max-height: 300px;
    margin-top: 20px;
  }

  .icon-hug {
    display: none;
  }

  .account-nav{
    margin-top: 8%;
  }

  .account-nav .col:nth-child(1) {
    width: 84px;
  }

  .account-nav .col:nth-child(2) {
    width: 84%;
  }

  .section-nav p,
  .section-nav span {
    display: none;
  }

  .vip-level {
    width: 100%;
  }

  .vip-plan .col-12 {
    width: 100%;
  }

  .vip-plan .plan {
    width: 33.33%;
  }

  .payment-history .row ul li {
    width: 100%;
  }

  .donut-container {
    margin-top: 70%;
  }

  .vip-bg-cow,
  .free-bg-cow {
    display: none !important;
  }

  .vip-plan {
    margin-top: 3%;
  }

  .card .card-body .payment-type .types .type {
    width: 48%;
    margin: 1%;
  }

  .card .card-body .payment-type .types .type .logo img {
    margin-left: 30px;
  }

  table {
    width: 90%;
    margin: 0 auto;
    box-shadow: none;
  }

  .popup-bg .popup {
    margin-top: 30%;
  }

  .section .blog {
    width: 80%;
  }

  .windowslite, .windowsstandard {
    font-size: 0.9rem;
  }
}

@media screen and (max-width: 780px) {
  .vip-bg {
    background-position: 0 0% !important;
    background-size: contain;
  }

  .vip-banner h3 {
    text-align: center;
    font-size: 2em;
  }

  .vip-banner h1 {
    text-align: center;
    font-size: 3em;
  }

  .vip-banner h4 {
    text-align: center;
    font-size: 1em;
  }

  .vip-bg h1 {
    margin-top: 13%;
  }

  #aox .hero-img-index img {
    width: 60%;
    margin-top: 20px;
  }

  .icon-hug {
    display: none;
  }

  .windows-dl-btn strong,
.appstore-dl-btn strong {
    font-size: 0.6rem;
    font-weight: 400 !important;
  }

  .account-nav{
    margin-top: 12%;
  }

  .account-nav .col:nth-child(1) {
    width: 84px;
  }

  .account-nav .col:nth-child(2) {
    width: 84%;
  }

  .section-nav p,
  .section-nav span {
    display: none;
  }

  .vip-level .col-left {
    float: left;
    width: 50%;
  }

  .vip-level .col-right {
    float: right;
    width: 50%;
  }

  .vip-level {
    width: 100%;
  }

  .vip-plan .col-12 {
    width: 100%;
  }

  .vip-plan .plan {
    width: 33.33%;
    margin: 0;
    padding: 0;
    margin: 10px 0 20px 0;
  }

  #clockdiv {
    background-size: 145%;
  }

  #clockdiv h4{
    font-size: small;
    margin-right: 0;
  }

  #clockdiv div > span{
    font-size: smaller;
  }

  #clockdiv .smalltext{
    font-size: x-small;
    font-weight: 400;
    margin-top: -4px;
  }

  .payment-history .row ul li {
    width: 100%;
  }

  .donut-container {
    margin-top: 70%;
  }

  .vip-bg-cow,
  .free-bg-cow {
    display: none !important;
  }

  .vip-plan {
    margin-top: 5%;
  }

  .card .card-body .payment-type .types .type {
    margin: 2% 1%;
    width: 48%;
  }

  table {
    width: 90%;
    margin: 0 auto;
    box-shadow: none;
  }

  .popup-bg .popup {
    margin-top: 45%;
  }

  section .blog {
    width: 80%;
    margin-top: 15%;
  }
  
  .benefit {
    width: 100%;
  }

  #services .faq-container {
    text-align: center;
  }

  .donut-container {
    margin-top: 70%;
  }

  .vip-bg-cow,
  .free-bg-cow {
    display: none !important;
  }

  .google-session .col-md-6 {
    margin-top: 12%;
  }


  .feedback {
    display: none;
  }

  .mobile-feedback {
    display: block;
    position: fixed;
    bottom: 30%;
    left: -78px;
    color: var(--neutral-16);
    z-index: 996;
    transform: rotate(-90deg);
    width: 200px;
    background-color: var(--yellow-04);
    border-radius: 0px 0px 10px 10px;
    padding: 10px;
    margin: 0px;
  }

  .mobile-feedback h3 {
    float: left;
    padding: 0px;
    margin: 0px;
    font-size: 16px;
    text-align: center;
    display: contents;
  }

  .mobile-feedback img {
    width: 22px;
    float: left;
    margin-right: 10px;
  }

  .windowslite, .windowsstandard {
    font-size: 0.9rem;
  }

}

@media screen and (max-width: 576px) {
  #services .hr-lines:before{
    width: 27%;
  }
  #services .hr-lines:after{
    width: 27%;
  }
  #services .circle {
    margin-bottom: 10px;
  }

  #services .container .row .col-lg-4:nth-child(4) .circle{
    margin-bottom: 10px;
  }

  .faq-container .about-extra {
    padding-bottom: 7%;
    padding-top: 7%;
  }

  #services .breadcrumb{
    margin-bottom: 30px;
  }

  #program .program-tab{
    align-items: flex-start;
  }

  #program .program-tab .tab-li a{
    font-size: small;
    padding-left: 0;
    padding-right: 0;
  }

  #program .program-tab section{
    padding-top: 0;
  }
  
  #program .program-who {
    text-align: center;
  }

  #program .program-who img{
    width: 15%;
  }

  #program .program-amount{
    border-radius: 0px;
  }

  #program .program-tab article {
    font-size: small;
  }
}


@media screen and (max-width: 552px) {
  
  #svip .svip_support {
    justify-content: center;
    margin-top: 15px;
  }

  #svip .svip_support .row{
    justify-content: space-between;
  }
 
  #svip .svip_support a{
    padding: 0;
  }

  #svip .svip_third .svip_support .col-4{
    padding-right: 0;
  }

  #svip .svip_what {
    border-radius: 0;
  }

  #svip .svip_pros_container {
    border-radius: 0;
  }
}


@media screen and (max-width: 519px) {
  .index-banner-bg {
    background-position: 0% 35%;
  }

  #aox {
    text-align: center;
    height: fit-content;
  }

  #about .about-extra img {
    height: 120px !important;
  }

  #about .about-extra canvas {
    height: 140px !important;
  }

  .about-extra div,
  .about-container div {
    text-align: center;
  }

  #about .about-extra ul li,
  #about .about-container ul li {
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    width: 78%;
  }

  #about .about-extra img.icon-tick {
    height: 26px !important;
  }

  #about .reasons {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  #about .img-text-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .about-extra .disappear {
    display: none;
  }

  

/*--------Banner Resposive here--------*/
  .index-banner-bg {
    background-size: cover;
    background-position: 10% 0%;
  }

  #aox .hero-info-index h2 {
    margin-top: 0px;
  }

  #aox .hero-info-index h2 span {
    font-size: 2.6rem;
  }

  #aox .hero-info-index h2 {
    margin-bottom: 32px;
    line-height: 46px;
    font-size: 2.4em;
  }

  .index-app-dl-btn {
    font-size: 1rem;
    min-width: 120px;
    padding: 10px;
  }

  .index-app-dl-btn-free {
    font-size: 0.9rem;
    min-width: 120px;
    line-height: normal;
    padding: 10px;
  }

  #aox .hero-img-index img {
    margin-left: auto;
    margin-right: auto;
    margin-top: 1px;
    position: relative;
    height: auto;
  }

  #aox .hero-info-index h4 {
    font-size: 20px;
  }

  .show_desktop {
    display: none;
  }

  .vip-bg {
    background-position: 0 0% !important;
    background-size: contain;
  }

  .vip-banner {
    padding-top: 10%;
  }

  .vip-banner h3 {
    margin-top: 4%;
    text-align: center;
    font-size: 1.3em !important;
  }

  .vip-banner h1 {
    text-align: center;
    font-size: 2.5em;
  }

  .vip-banner h4 {
    text-align: center;
    font-size: 1em;
  }

  .vip-bg h1 {
    margin-top: 66px;
  }

  /*--------Banner Responsive About--------*/
  #about .about-container img,
  #about .about-extra img {
    height: 120px;
  }

  #about .about-container p,
  #about .about-extra p {
    text-align: center;
    font-size: 16px;
    margin-bottom: 0;
  }

  #about .about-extra .col-lg-8 p br {
    display: inline-block !important;
  }

  #about .about-extra .btn-download,
  #about .about-container .btn-download {
    width: 100%;
  }

  #about .btn-download {
    width: 100%;
  }

  #aox .hero-img-index img {
    width: 77%;
    margin-top: 20px;
  }

  .index-app-dl-btn {
    line-height: 23px;
  }

  .vip-plan .plan {
    width: 96%;
    margin-left: auto;
    margin-right: auto;
    min-height: 80px;
    align-items: flex-end;
    margin-bottom: 8px;
  }

  .vip-plan {
    margin-left: auto;
    margin-right: auto;
  }

  #clockdiv {
    background-size: cover;
    padding: 4% 0;
  }

  .account-nav .col:nth-child(1) {
    width: 84px;
  }

  .account-nav .col:nth-child(2) {
    width: 76%;
  }

  .vip-bg-cow {
    display: none;
  }

  .free-bg-cow {
    display: none;
  }

  .card .card-body .payment-type .types .type {
    width: 100%;
    display: inline-block;
  }

  .card .card-body .payment-type .types {
    width: 100%;
    margin-bottom: 1%;
  }

  .card .card-body .payment-type .types .type p {
    color: var(--neutral-13);
    line-height: 40px;
    /* margin-left: 40px; */
  }

  .btn-paynow {
    width: 50%;
    padding: 10px;
    font-size: 18px;
  }

  .plan {
    margin-top: 2%;
  }

  section .blog {
    width: 80%;
    padding: 0 2%;
  }

  section .blog p img {
    width: 100%;
    text-align: center;
  }

  .donut-container {
    margin-top: 70%;
  }

  .vip-bg-cow,
  .free-bg-cow {
    display: none !important;
  }

  .password-input #email {
    padding: 10px 100px 10px 40px;
  }

  .account-nav span.icon-lock,
  .account-nav span.bi-eye-slash {
    display: block;
  }

  .vip-level .col-left {
    float: left;
    width: 50%;
  }

  .vip-level .col-right {
    float: right;
    width: 50%;
  }

  .vip-level .col-right button {
    background-color: transparent;
    text-decoration: none;
    padding: 0px;
    color: var(--alpha-tint-60);
  }

  .row .feature-table.show-550 .feature-row-wrap .feature-row-1 div,
  .row .feature-table.show-550 .feature-row-wrap .feature-row-2 div {
    padding: 0px;
  }

  #chgpwdForm p button {
    display: block;
  }

  #download {
    margin: 0px;
  }
  
  #download .icon-coming {
    right: 19%;
    top: 0%;
  }

  #download .col-lg-3 {
    width: 50%;
  }

  #download .col-lg-3 .btn-dl {
    margin-top: 20px;
    border-radius: 0px;
    border: none;
  }

  .btn-dl:hover {
    background-color: transparent;
    color: var(--brand-orange);
}

  #download .col-lg-3 .btn-dl a {
    display: flow-root;
  }

  #download .col-lg-3 .btn-dl hr {
    width: 45%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 15px;
  }

  #download .col-lg-3 .btn-dl > span,
  #download .col-lg-3 .btn-dl > img {
    transform: none;
  }

  #download .col-lg-3 .btn-dl > img {
    margin: 0px;
    padding: 0px;
  }
  
  .btn-dl:hover img[id="first"] {
    display: inline-block;
  }

  .btn-dl:hover img[id="last"] {
    display: none;
  }

  #download .col-lg-3 .btn-dl > span {
    /* Column flex + a min-height so the one-line Android pill matches the
       two-line VIP pills instead of sitting visibly shorter, and so single
       and double line labels are both vertically centred. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 52px;
    line-height: 1.25;
    border-radius: 50px;
    border: 2px solid var(--brand-orange);
    width: 92%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Second line inside the pill. Only the qualifier's own line height is set,
     so the platform name keeps the 32px rhythm the single-line Android button
     still uses. */
  #download .col-lg-3 .btn-dl .vip-only {
    display: block;
    margin-left: 0;
  }

  #download .col-lg-3 span {
    font-size: 17px;
  }

  #download .disappear {
    display: none;
  }

  #download .about-extra img {
    height: 140px !important;
    width: auto !important;
  }

  #services .col-md-4 {
    margin-bottom: 4%;
  }

  #services .service-circle .title {
    margin-bottom: 0px;
    font-size: 16px;
  }

  #services .service-circle img {
    height: 40px;
    display: block;
    margin: 0 auto;
  }

  #services .service-circle {
    padding: 15px;
    margin: 0px;
  }

  #services .faq-circle {
    display: flex;
    align-items: center;
    padding: 16px;
  }

  #services .faq-circle img {
    padding-right: 15px;
    height: 55px;
  }

  #services .circle:hover {
    transform: none;
  }

  #services .faq-links p {
    height: 62px;
  }

  #services .section-qns h6{
    height: 62px;
  }

  .popup-bg .popup {
    width: 74%;
    margin-top: 60%;
  }

  section .blog {
    width: 380px;
    margin-top: 20% !important;
  }

  #aox h3 {
    font-size: xx-large;
    text-align: center;
    margin: 0px;
  }

  #aox p {
    font-size: 1rem;
    text-align: center;
  }

  .benefit {
    width: 100%;
  }

  #why-us .counters .col-lg-4 {
    margin-bottom: 10%;
  }

  #why-us .counters p {
    margin: 0px;
  }

  .search-container {
    width: 100%;
  }

  .search-container input {
    padding: 4px 12px !important;
  }

  #program .program-where img {
    width: 70%;
  }

  #services .after-dl-btn{
    font-size: 1rem;
        min-width: 120px;
        padding: 10px;
  }

  /*--------Banner Responsive faq--------*/
  #services .faq-circle .bi {
    display: block;
  }

  #services .faq-circle {
    pointer-events: inherit;
  }

  #services .row .col-md-6 .circle {
    min-height: auto;
  }

  .faq-container img {
    width: 100%;
  }

  #partner {
    text-align: center;
  }

  #partner .partner-contact br {
    display: inline-block !important;
  }

  #partner .partner-contact i {
    padding-left: 0px;
  }

  #partner .order-lg-3 img {
    display: none !important;
  }

  #partner .partner-hide {
    display: inline !important;
  }

  #partner img {
    height: 100px !important;
  }

  #footer .footer-top .footer-links ul li {
    padding: 11px 0;
  }

  #footer .disappear {
    display: none;
  }

  #footer .footer-info img {
    float: none;
    margin-right: 0px;
  }

  #footer .footer-top .footer-info h3 {
    font-size: 28px;
  }

  #footer .footer-top {
    padding-top: 38px;
  }

  .btn-copy button {
    font-size: small !important;
  }

  button.btn-save {
    font-size: small !important;
  }

  .share #tab1, .share #tab2, .share #tab3{
    text-align: left;
  }

  .account-nav {
    margin-top: 13%;
  }

  .vip-level #btnLogout {
    background-color: transparent;
  }

  .vip-level {
    padding: 8%;
  }
}

/*Navbar menu adjustment*/
@media screen and (max-width: 992px) {
  .icon-menu.product {
    z-index: 999;
    height: auto;
  }

  .navbar {
    display: block;
  }

  .icon-menu.general {
    z-index: 99;
    top: 80px;
  }

  .navbar-mobile .logo{
    display: block; 
    position: absolute;
    top: 30px;
    left: 0px;
  
  }

  .navbar-mobile ul {
    position: relative;
    width: 90%;
    padding-bottom: 40px;
  }

  .navbar-mobile .icon-menu-mobile {
    display: block;
  }

  .icon-menu.general {
    z-index: 99;
    top: 80px;
  }

  #program .share{
    align-items: flex-start;
  }

  .share #tab1, .share #tab2, .share #tab3{
    padding-top: 0 !important;
  }

  .btn-copy button {
    font-size: medium;
  }

  button.btn-save {
    font-size: medium;
  }

  .download-hero p{
    text-align: center;
  }

  .order-1 .hero-img-index img{
    margin-bottom: 20px;
    max-width: 60%;
  }

  .order-2 .download-hero h2{
    text-align: center;
  }

 .order-2 .download-hero .movedown{
    width: fit-content;
    margin: 20px auto;
  }

  .dl-btn-center {
    align-items: center;
    justify-content: center;
  }
  
  .dl-btn-center.hide {
    display: flex;
    margin-bottom: 30px;
    justify-content: center;
  }

  .dl-btn-center.show {
    display: none;
  }

  .android-dl-btn, .windows-dl-btn{
    justify-content: center;
    align-items: center;
  }

  .appstore-dl-btn {
    display: ruby;
    align-items: flex-start;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    float: none;
  }
  
  .cloud-dl-btn .index-app-dl-btn{
    margin-right: 0;
  }

  .windows-dl-btn .index-app-dl-btn{
    font-size: 0.9rem;
    margin-right: 0px;
    float: none;
    padding: 10px 26px;
  }

  .index-app-dl-btn-free {
    padding: 10px 30px;
  }

  .android-dl-btn .old, .windows-dl-btn .old{
    justify-content: center;
    font-size: 0.8em;
  }

  .android-dl-btn .old p a, .windows-dl-btn .old p a {
      color: var(--brand-orange);
  }

  ul.writeup li:first-child img {
    left: -3%;
  }

  /* .setup .setup-left{
    display: none;
  } */
}

@media screen and (max-width: 992px) {
   .plan .ribbon{
    display: none;
   }
}

@media screen and (min-width: 768px) {
  .vip-plan .col-md-2, .vip-plan .col-md-3 {
    margin: 0;
    padding: 0;
    margin: 10px 0 20px 0;
  }
}

@media screen and (max-width: 768px) {
  ul.writeup li:first-child {
    display: none;
  }
  ul.writeup li:last-child {
    width: 100%;
  }

  .writeup {
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 50px;
  }

  .btn-copy{
    margin-right: 0px;
    font-size: 1rem;
    line-height: normal;
    margin-top: 15px;
  }

  .btn-save{
    margin-left: 0px;
    font-size: 1rem;
    line-height: normal;
    margin-top: 15px;
  }
}
  

@media screen and (max-width: 912px) {
  .dw-qr-code {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  section{
    padding-top: 65px;
  }
}


input:focus {
  outline: none !important;
  box-shadow: none !important;
  border-radius: 50px !important;
}

input {
  outline: none !important;
  box-shadow: none !important;
  border-radius: 50px !important;
}

:focus {
  outline: none !important;
} 

section:has(.share-bg){
  padding-bottom: 0!important;
}












/*--------------------------------------------------------------
# Donation
--------------------------------------------------------------*/
.btn_styles {
  display: inline-block;
  max-width: 100%;
  line-height: 1;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
  border: none;
  padding: 0;
}

.btn_styles:hover {
  text-decoration: none;
  outline: none;
}

.btn_styles:disabled {
  text-decoration: none;
  outline: none;
}

.btn_styles:focus {
  animation-name: none;
  outline: none;
}

.donate_form {
  max-width: 460px;
  margin: 0 auto;
  background-color: var(--brand-tint);
  padding: 5%;
  border-radius: 4px;
}

.donate-tnc {
  margin-top: 20px;
}

.donate-tnc input[type="checkbox"] + label {
  display: block;
  margin: 0.2em;
  cursor: pointer;
  padding: 0.2em;
  line-height: 16px;
  font-size: 0.8em;
}

.donate-tnc input[type="checkbox"] {
  display: none;
}

.donate-tnc input[type="checkbox"] + label:before {
  content: "\2714";
  border: 0.1em solid var(--neutral-03);
  border-radius: 0.2em;
  display: inline-block;
  width: 16px;
  height: 16px;
  padding-left: 1px;
  margin-right: 4px;
  vertical-align: bottom;
  color: transparent;
  transition: 0.2s;
  line-height: 14px;
}

.donate-tnc input[type="checkbox"] + label:active:before {
  transform: scale(0);
}

.donate-tnc input[type="checkbox"]:checked + label:before {
  background-color: var(--brand-orange);
  border-color: var(--brand-orange);
  color: var(--neutral-01);
}

.donate-tnc input[type="checkbox"]:disabled + label:before {
  transform: scale(1);
  border-color: var(--neutral-05);
}

.donate-tnc input[type="checkbox"]:checked:disabled + label:before {
  transform: scale(1);
  background-color: var(--orange-04);
  border-color: var(--orange-04);
}

.donate-tnc {
  margin-top: 20px;
}

.donate-tnc a:hover {
  color: var(--brand-orange);
}

.donate-tnc input[type="checkbox"] + label {
  display: block;
  margin: 0.2em;
  cursor: pointer;
  padding: 0.2em;
  line-height: 16px;
  font-size: 0.8em;
}

.donate-tnc input[type="checkbox"] {
  display: none;
}

.donate-tnc input[type="checkbox"] + label:before {
  content: "\2714";
  border: 0.1em solid var(--neutral-03);
  border-radius: 0.2em;
  display: inline-block;
  width: 16px;
  height: 16px;
  padding-left: 1px;
  margin-right: 4px;
  vertical-align: bottom;
  color: transparent;
  transition: 0.2s;
  line-height: 14px;
}

.donate-tnc input[type="checkbox"] + label:active:before {
  transform: scale(0);
}

.donate-tnc input[type="checkbox"]:checked + label:before {
  background-color: var(--brand-orange);
  border-color: var(--brand-orange);
  color: var(--neutral-01);
}

.donate-tnc input[type="checkbox"]:disabled + label:before {
  transform: scale(1);
  border-color: var(--neutral-05);
}

.donate-tnc input[type="checkbox"]:checked:disabled + label:before {
  transform: scale(1);
  background-color: var(--orange-04);
  border-color: var(--orange-04);
}

@media (max-width: 767px) {
  .donate_form {
    margin-bottom: 30px;
  }
}

.donate_form .tabs {
  margin-bottom: 0px;
}

.donate_form .tabs .btn_styles {
  width: 49.5%;
  float: left;
  border: 1px solid var(--neutral-03);
  height: 40px;
  line-height: 40px;
  font-size: 1.1em;
  text-decoration: none;
  text-align: center;
  border-radius: 4px;
  margin-right: 1%;
  margin-bottom: 3%;
}

.donate_form .tabs .btn_styles:last-child {
  margin-right: 0px;
}

.donate_form .tabs .btn_styles:not(.active) {
  background-color: var(--neutral-01);
  color: var(--neutral-16);
}

.donate_form .tabs .btn_styles.active {
  background-color: var(--brand-tint);
  color: var(--brand-yellow);
  font-weight: 700;
  border: none;
}

.donate_form .donate-box {
  width: 32.5% !important;
}

.donate_form .input {
  position: relative;
}

.donate_form .input:before {
  content: attr(data-content);
  position: absolute;
  left: 17%;
  top: 50%;
  transform: translateX(-100%) translateY(-50%);
  z-index: 1;
  font-size: 14px;
}

.donate_form .input input[type="number"] {
  height: 50px;
  line-height: 50px;
  width: 100%;
  color: var(--neutral-16);
  padding: 0 20px 0 80px;
  font-size: 1.5em;
  font-weight: 500;
  border: 1px solid var(--neutral-03);
  font-size: 22px;
  text-align: left;
  background-color: var(--neutral-01);
  border-radius: 4pz;
}

.donate_form .input input[type="number"]::-webkit-inner-spin-button,
.donate_form .input input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.donate_form .input .addition {
  position: absolute;
  right: 15px;
  transform: translateY(-50%);
  top: 50%;
  text-align: center;
}

.donate_form .input .addition select {
  text-align: center;
  width: 25%;
  border: none;
  padding: 0px;
}

.donate_form .input .addition select:focus {
  outline: none;
}

/* .donate_form #monthly .input input[type="number"] {
    padding: 0 120px 0 30px;
}
.donate_form #once .input input[type="number"] {
    padding: 0 55px 0 30px;
} */
.donate_form .input input[type="number"]:focus {
  outline: none;
  box-shadow: 0 0 5px var(--neutral-06);
}

.donate_form .header {
  background-color: var(--yellow-01);
  margin: -7% -5.7% 4% -5.7%;
  color: var(--neutral-16);
  padding: 25px 6px;
  text-align: center;
  font-weight: 700;
  font-size: 1.2em;
}

.donate_form .description {
  color: var(--neutral-16);
  padding: 25px 6px;
  text-align: center;
  font-weight: 700;
  font-size: 1.2em;
}

.donate_form .body {
  border-top: none;
}

.donate_form .body .info {
  color: var(--neutral-16);
  font-size: 0.8em;
  text-align: center;
}

.donate_form .body .donate_buttons .btn_styles {
  border-radius: 4px;
  padding: 14px;
  background-color: var(--yellow-04);
  color: var(--neutral-16);
  width: 100%;
  cursor: pointer;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
}

.donate_form .body .donate_buttons .btn_styles:hover {
  background-color: var(--brand-orange);
  color: var(--on-brand);
}

.donate_form .body .donate_buttons .btn_styles:disabled {
  background-color: var(--neutral-08);
  color: var(--neutral-16);
  /* color: gray; */
}

ul.share-donate {
  display: inline-flex;
  align-items: center;
  text-align: center;
  margin-top: 0px;
  width: 55%;
}

.donate {
  background: var(--green-02);
  background: -webkit-linear-gradient(
      top,
      transparent 40%,
      var(--alpha-black-40) 100%
    ),
    -webkit-linear-gradient(left, var(--brand-yellow) 0%, var(--brand-orange) 50%, var(--brand-yellow) 100%);
  background: linear-gradient(
      to bottom,
      transparent 40%,
      var(--alpha-black-40) 100%
    ),
    linear-gradient(to right, var(--brand-yellow) 0%, var(--brand-orange) 50%, var(--brand-yellow) 100%);
  background-position: 0 0;
  background-size: 200% 100%;
  border-radius: 4px;
  color: var(--neutral-01);
  padding: 15px 65px 15px 15px;
  text-shadow: 1px 1px 5px var(--neutral-10);
  -webkit-transition: all 800ms;
  transition: all 800ms;
}

.donate:hover{
  background-position: -100% 0;
  color: var(--neutral-01) !important;
}

.donate:hover:after {
  border-left: 1px solid var(--brand-orange);
  color: var(--neutral-01);
  text-shadow: 0 0 10px var(--neutral-16);
}

.donate_form input::placeholder {
  color: var(--brand-yellow);
}

.donate-now {
  list-style-type: none;
  padding: 0;
  margin-bottom: 0px;
}

.donate-now li {
  float: left;
  width: 27.3%;
  height: 50px;
  position: relative;
  line-height: 44px;
  font-size: 1.1em;
  margin: 18px 3%;
  text-align: center;
  background-color: var(--neutral-01);
}

.donate-now label,
.donate-now input {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.donate-now input[type="radio"] {
  opacity: 0.01;
  z-index: 100;
}

.donate-now input[type="radio"]:checked + label,
.Checked + label {
  background: var(--brand-orange);
  color: var(--neutral-01);
  border: none;
}

.donate-now label {
  padding: 4px;
  cursor: pointer;
  z-index: 90;
  border-radius: 4px;
  border: 1px solid var(--neutral-03);
  font-weight: 700;
}

.donate-now label:hover {
  background: var(--brand-orange);
  color: var(--brand-tint);
}

input[type="text"]#donateamount {
  padding-left: 96px;
}

.donate-now span {
  font-size: 14px;
  line-height: 14px;
  font-weight: 400;
  vertical-align: text-top;
  position: relative;
  top: 3px;
  margin-right: 6px;
  white-space: nowrap;
}

.info-alert {
  color: var(--neutral-16);
  font-size: 0.8em;
  text-align: center;
  margin-top: 5px;
  margin-right: auto;
  margin-left: auto;
}

.info-alert i {
  color: var(--brand-yellow);
}

@media screen and (max-width: 992px) {
  .img-donation {
    width: 60%;
    text-align: center;
  }

  .donation-container {
    order: 1;
    margin-bottom: 20px;
  }

  .donation-content {
    order: 2;
  }

  .donate_form .header {
    background-color: var(--yellow-01);
    margin: -9% -9% 4% -9%;
    color: var(--neutral-16);
    padding: 22px 10%;
    text-align: justify;
    font-weight: 400;
    font-size: 1.2em;
  }

  #about .donate_form .appear {
    display: block !important;
  }

  #about .donate_form .disappear {
    display: none;
  }

  #about .donation-content .disappear {
    display: none;
  }

  #about .donation-container .appear {
    display: block !important;
    margin-bottom: 0px;
  }
}

@media screen and (max-width: 519px) {
  .img-donation {
    width: 50%;
    text-align: center;
  }

  .donation-container {
    order: 1;
  }

  .donation-content {
    order: 2;
  }

  ul.share-donate {
    width: 100%;
    justify-content: center;
    align-items: center;
  }

  .donate-now span,
  .donate_form .input:before {
    font-size: 12px;
  }

  .donate-now li {
    font-size: 1em;
  }

  .donate_form .input input[type="number"] {
    padding: 0 20px 0 66px;
    font-size: 20px;
  }

  .info-alert {
    text-indent: 0px;
    text-align: center;
  }

  .donate_form .header {
    background-color: var(--yellow-01);
    margin: -7% -5.7% 4% -5.7%;
    color: var(--neutral-16);
    padding: 12px 22px;
    text-align: justify;
    font-weight: 400;
    font-size: 1em;
  }

  #about .donate_form .appear {
    display: block !important;
  }

  #about .donate_form .disappear {
    display: none;
  }

  #about .donation-content .disappear {
    display: none;
  }

  #about .donation-container .appear {
    display: block !important;
    margin-bottom: 0px;
  }  
}

/*new plan*/
@media screen and (max-width: 1200px) {
  .plan-pros{
    font-size: x-small;
  }
}

@media screen and (max-width: 519px) {
  .plan {
    position: relative;
    text-align: center;
    margin-bottom: 2%;
  }
  
  .plan .aoxplan {
    background-color: var(--brand-tint);
    border: 3px solid var(--brand-orange) !important;
    border-radius: 50px !important;
    margin-top: -18px;
    display: flow-root;
    position: relative;
    cursor: pointer;
    padding: 8px;
    min-height: auto;
    border-right: 3px solid var(--brand-orange) ;
    border-bottom: 3px solid var(--brand-orange) ;
  }
  
  .plan ul.plan-details {
    padding: 0px;
    margin: 0px;
    width: 36%;
    float: left;
  }

  .plan-unselected .aoxplan {
    background-color: var(--brand-tint);
    border: none !important;
    border-radius: 50px;
    padding: 8px;
    margin: 0px;
    background-position: -28px top;
    margin-top: -18px;
    display: flow-root;
    position: relative;
    cursor: pointer;
    min-height: auto;
  }

  .plan:first-child .aoxplan, .plan:last-child .aoxplan{
    border-radius: 50px;
    border: none;
  }

  .plan .saving {
    text-transform: capitalize;
    position: relative;
    top: 0;
    margin: 0 auto;
    filter: none;
    right: unset;
  }

  .plan .saving > .content {
    color: var(--neutral-01);
    padding: 5px;
    width: 100px;
    border-radius: 30px;
    background-color: var(--red-06);
    height: auto;
    clip-path: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    min-height: auto;
  }
  
  .plan .saving > .content p:nth-child(2) {
    font-size: unset;
    font-weight: unset;
}
  
  .plan ul.plan-details li:nth-child(1) {
    font-size: 15px;
    color: var(--neutral-16);
    font-weight: 700;
    text-align: left;
    padding: 0px 22px;
    margin: 4% 0 0 0;

    padding-top: 0px;
    padding-bottom: 0px;
    background-color: transparent !important;
  }
  
  .plan ul.plan-details li:nth-child(2) {
    font-size: 14px;
    font-weight: normal;
    color: var(--red-06);
    text-align: left;
    padding: 0px 22px;
    bottom: revert;
  }
  
  .aoxplan hr {
    display: none;
  }

  .plan-price {
    text-align: right;
    margin-right: 12px;
    margin-left: 20px;
    padding-top: 6px;
    padding-left: 0;
    padding-bottom: 0;
    float: right;
    background: transparent!important;
  }

  .plan-price .icon{
    display: none;
  }
  
  .plan-price p {
    text-decoration: line-through;
    color: var(--neutral-10);
    font-size: 20px;
    margin: 0px;
    margin-right: 3px;
    width: auto;
  }
  
  .plan-price span {
    color: var(--red-06);
    font-size: 20px;
    font-weight: 800;
  } 
  
  .plan-price .black{
    color: var(--neutral-16);
  }
  
  .plan-price b {
    font-size: 10px;
  }

  .plan-pros {
    display: none;
  }

  .plan button{
    display: none;
  }

  .plan-unselected button{
    display: none;
  }

  #clockdiv {
    margin-top: 4%;
    text-align: center;
    font-size: 20px;
  }
  
  #clockdiv h4 {
    font-size: 14px;
    font-weight: 400;
  }
  
  .smalltext {
    font-size: 10px;
  }
}
@media screen and (max-width: 390px) {
  .plan-price span, .plan-price p{
    font-size: 19px;
  }
}

/*--------------------------------------------------------------
# apple-cn
--------------------------------------------------------------*/
#apple-cn {
  padding-bottom: 0;
  text-align: center;
}

#apple-cn .text{
  background-color: var(--yellow-01);
  padding: 20px 10px;
  border-radius: 10px;
  box-shadow: var(--alpha-tint-20-2) 0px 2px 8px 0px;
}

#apple-cn .text:hover{
  background-color: var(--brand-orange);
  color: var(--neutral-01);
}

#apple-cn .text h6{
  margin-bottom: 0;
  font-size: 1.2em;
}

.ios-session {
  margin: 0px;
  display: block;
  clear: both;
}

.ios-session img {
  width: 500px;
  margin-bottom: 50px;
}

#apple-cn .index-app-dl-btn {
  margin: 0px;
}

#apple-cn hr{
  color: var(--neutral-03);
  margin-top: 50px;
}

@media screen and (max-width: 992px) {
  #apple-cn{
    padding-top: 80px;
  }
  #apple-cn .text{
    margin-bottom: 20px;
  }

  #apple-cn .index-app-dl-btn {
    float: none;
  }
}

@media screen and (max-width:519px){
  #apple-cn .text h6{
    font-size: 1em;
  }
  .ios-session {
    margin: 0px;
  }
}

@media screen and (max-width:380px){
  #apple-cn .text h6{
    font-size: 0.8em;
  }
}

/*--------------------------------------------------------------
# affiliate contact form
--------------------------------------------------------------*/
#affiliate-contact{
  text-align: left;
}

/*--------------------------------------------------------------
# test flight ios
--------------------------------------------------------------*/
#container-download {
  margin-top: 100px;
}

.testflight .col-main,
.mobile-tf .col-main {
  flex: 1;  
}  

.testflight .col-complementary,
.mobile-tf .col-complementary {
  flex: 1;  
}

.testflight,
.mobile-tf {
  padding: 80px 0px 0px;
  color: var(--blue-10);
}

.testflight ul {
  margin: 20px;
  position: relative;
  padding: 20px;
}

.mobile-tf ul {
  position: relative;
  padding: 0 20px;
}

.testflight ul li,
.mobile-tf ul li {
  margin: 10px 0px;
}

/* .testflight ul li:nth-child(2){
  margin-top: 46px;
} */

.testflight ul li.red,
.mobile-tf ul li.red,
.testflight .red,
.mobile-tf .red {
  color: var(--red-03);
  font-size: 14px;
  margin-left: auto;
  margin-right: auto;
  width: 64%;
}

h1.red-color {
  color: var(--red-03) !important;
}

.testflight button,
.mobile-tf button,
.testfstep button:not(.testfstep-dl-btn-group button) {
  background-color: var(--brand-orange);
  color: var(--neutral-01);
}

.testflight button:hover,
.mobile-tf button:hover,
.testfstep button:not(.testfstep-dl-btn-group button):hover {
  background-color: var(--yellow-04);
  color: var(--neutral-16);
}

.testfstep button {
  padding-left: 40px;
  padding-right: 40px;
}

.testflight .step,
.mobile-tf .step {
  padding: 8px 16px;
  /* position: absolute; */
  left: -4px;
  top: -10px;
  /* background-color: #fedc5e; */
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  font-weight: 600;
}

.testflight .img-testflight,
.mobile-tf .img-testflight {
  width: 100px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  /* margin-bottom: 20px; */
}

.testflight .btn-icon,
.mobile-tf .btn-icon {
  width: 30px;
  margin-right: 10px;
}

/* Responsive: */
@media only screen and (min-width: 1024px) {
  .testflight .layout {
    /* display: flex; */
  }
}

@media only screen and (max-width: 3000px) {
  .testflight {
    display: flow-root;
  }
  .mobile-tf{
    display: none;
  }
}

@media only screen and (max-width: 820px) {
  .testflight {
    display: none ;
  }
  .mobile-tf{
    display: block;
  }
}

.aox-tf,
.mumu-tf {
  width: 50%;
  float: left;
  border-radius: 10px;
  background: var(--neutral-01);
  box-shadow: 0 4px 10px 0 var(--alpha-tint-10);
  transition: all 0.3s ease-in-out;
  padding: 20px 0;
}

.aox-tf .step,
.mumu-tf .step {
  background-color: transparent;
  position: relative;
  margin: 0px;
}

.testfstep {
  padding: 0px 0px 40px;
  border-radius: 10px;
  background: var(--neutral-01);
  box-shadow: 0 4px 10px 0 var(--alpha-tint-10);
  transition: all 0.3s ease-in-out;
  margin-top: 40px;
}

h2.tfh2{
  margin-top: 40px;
}

.testflight .col {
  padding: 1em;
  border-radius: 10px;
  /* background: #FFFEF5;
  box-shadow: 0 4px 10px 0 rgba(68, 88, 144, 0.1);
  transition: all 0.3s ease-in-out; */
  text-align: center;
}

.testfstep ul li {
  line-height: 32px;
  padding-left: 20px;
  padding-right: 20px;
}

.testfstep ul li a {
  text-decoration: underline;
}

.testfstep strong {
  font-size: 20px;
}

.testfstep span {
  font-size: 16px;
  display: inline-block;
  font-weight: 600;
  margin-top: 20px;
}

.testfstep span.note {
  font-size: 12px !important;
  font-weight: 400;
  margin: 0px;
  padding: 0px;
  display: inline-block;
}

.testfstep img {
  width: 120px;
  text-align: center;
  margin: 10px ;
}

@media only screen and (max-width: 520px) {
  .testfstep ul li{
    text-align: left;
  }
}

/* ios-testflight: two-button row */
.testfstep-dl-btn-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.testfstep-dl-btn-group .index-app-dl-btn,
.testfstep-dl-btn-group .index-app-dl-btn-free {
  margin-top: 0;
  margin-right: 0;
  float: none;
  padding: 10px 40px;
}


@media only screen and (max-width: 820px) {
  .testfstep-dl-btn-group .index-app-dl-btn,
  .testfstep-dl-btn-group .index-app-dl-btn-free {
    flex: 1;
    min-width: 0;
    text-align: center;
  }
}

.mseries {
    background-color: var(--brand-tint);
    padding: 20px 40px;
    margin: 40px auto;
    text-align: left;
    border-radius: 10px;
}

.mseries h3 {
  text-align: center;
  padding: 10px 0;
}

.mseries ol li {
  list-style-type: decimal;
  line-height: 32px;
}

.mseries li span {
  display: block;
  padding-left: 20px;
}

@media only screen and (max-width: 992px) {
  .mseries {
    display: none;
  }
}

img.redeemcode {
  width: 170px !important;
  margin-left: auto;
  margin-right: auto;
}

/*tab panel for mobile view*/
.tabs {
  /* Step 1: Enable Flex on the container */
  display: flex;
  
  /* Step 2: Enable flex-wrap to put content section below tab label */
  flex-wrap: wrap;
}
.tabs > section {  
  /* Step 3: Move content <section> to the end, after the tab labels */
  order: 999;
  
  /* Step 4: Make sure the content <section> is 100% width */
  width: 100%;
  
  /* Step 5: Hide all content <section> by default */
  display: none;
}
.tabs > input {
  /* display: none; Don’t use display:none. Bad for accessibility */
  
  /* Step 6: Hide the radio inputs */
  opacity: 0;
  
  /* Step 7: Make sure the radio inputs don’t take up space in layout */
  position: absolute;
}
/* Step 8: Select the label right next to the selected input */
.tabs > input[type=radio]:checked + label {
  /* Step 9: Highlight the selected label */
  background: var(--yellow-05);
}
/* Step 10: Select the section right next to the label which is next to the selected input */
.tabs > input[type=radio]:checked + label + section {
  /* Step 11: Unset the 'display:none' we did in step 5 */
  display: unset;
}

/* Done. Make sure to disable the debug code at the beginning of CSS. And now it is time to make the tabs look good */

/* Make the tabs look good */
/* Final Step: Make the tabs pretty with padding and colors */

.tabs > label {
  padding: .6em 1em;
  background: var(--neutral-01);
  color: var(--neutral-06);
  width: 50%;
}

.tabs > label:last-of-type {
  border-right: none;
}

.tabs > input[type=radio]:checked + label {
  color: var(--brand-orange);
  background: linear-gradient(45deg, var(--brand-tint), var(--brand-tint));
} 

.tabs section {
  padding: 1em;
}

/* Voucher account
--------------------------------*/
#Menu6 h5{
  margin-top: 0;
}
#Menu6 h6{
  text-align: left;
}

/* Voucher popup
--------------------------------*/

#voucher-popup.popup-bg {
  justify-content: center;
  align-items: center;
}

#voucher-popup.popup-bg .popup {
  background-color: var(--neutral-01);
  border-radius: 10px;
  width: 60%;
  margin: 0;
  padding: 30px;
  z-index: 99999;
  overflow-x: hidden;
}

.voucher-popup-title {
  text-align: center;
  font-weight: 700;
  margin: 0 0 16px 0;
}

.public-voucher-title {
  text-align: center;
  font-weight: 700;
  margin: 32px 0 16px 0;
}

/*  Sign In prompt section*/
.signin-section {
  background-color: var(--neutral-01);
  border-radius: 14px;
  padding: 26px 24px;
  margin: 32px auto;
  max-width: 1080px;
  text-align: center;
  box-shadow: 0 2px 12px var(--alpha-black-06);

}

.signin-section-title {
  font-weight: 700;
  font-size: 1.4em;
  color: var(--neutral-15);
  margin: 0 0 10px;
}

.signin-section-body {
  font-size: 1em;
  color: var(--neutral-13);
  margin: 0;
  line-height: 1.5;
}

.signin-section .signin-section-link {
  color: var(--brand-orange);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  margin: 0 2px;
}


.signin-section-btn {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 28px;
  background-color: var(--brand-orange);
  color: var(--on-brand);
  font-weight: 600;
  font-size: 1em;
  border-radius: 999em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.signin-section-btn:hover {
 background-color: var(--brand-yellow) !important;
 color: var(--neutral-16) !important;
}

@media screen and (max-width: 519px) {
  .signin-section {
    margin: 24px 12px;
    padding: 20px 16px;
  }
  .signin-section-title {
    font-size: 1.15em;
  }
  .signin-section-body {
    font-size: 0.92em;
  }
  .signin-section-btn {
    font-size: 0.95em;
    padding: 9px 22px;
  }
}

/* equal-height cards: make col divs flex so cards stretch to row height */
.voucher-claim > [class*="col-"],
.voucher-claimed > [class*="col-"],
.voucher-exp > [class*="col-"],
.public-voucher-list > [class*="col-"] {
  display: flex;
}

/* 5 per row on desktop */
.public-voucher-list > [class*="col-"] {
  width: 20%;
}

/* 3 per row on tablet */
@media (max-width: 991px) {
  .public-voucher-list > [class*="col-"] {
    width: 33.333%;
  }
}

/* 2 per row on mobile */
@media (max-width: 575px) {
  .public-voucher-list > [class*="col-"] {
    width: 50%;
  }
}

#voucher-popup.popup-bg .popup .popup-content p {
  text-align: left !important;
}

#voucher-popup .voucher-claimed,
#voucher-popup .voucher-claim {
  overflow-y: auto;
}

.voucher-tab-content {
  height: 450px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: 10px;
}


/* Voucher card new design
--------------------------------*/

.voucher-tab-content .row {
  align-items: stretch;
}

.voucher-tab-content [class*="col-"] {
  display: flex;
}

.voucher-card {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 10px var(--alpha-black-10);
  background: var(--neutral-01);
  display: flex;
  flex-direction: column;
  width: 100%;
}

.voucher-card-header {
  padding:14px;
  color: var(--neutral-01);
}

.voucher-card-header p {
  font-size: 0.85em;
  font-weight: 600;
  margin: 0;
  color: var(--neutral-01) !important;
  text-align: left !important;
}

.voucher-card--orange .voucher-card-header {
  background: linear-gradient(90deg, var(--brand-orange) 0%, var(--orange-09) 100%);
}

.voucher-card--blue .voucher-card-header {
  background: linear-gradient(90deg, var(--blue-09) 0%, var(--cyan-01) 100%);
}

.voucher-card--gray .voucher-card-header {
  background: linear-gradient(90deg, var(--neutral-02) 0%, var(--neutral-01) 100%);
}

.voucher-card--gray .voucher-card-header p {
  color: var(--neutral-06) !important;
}

.voucher-card-body {
  padding: 12px 14px 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 110px;
  text-align: left;
}

.voucher-card-body h3 {
  font-family: 'Manrope', sans-serif !important;
  font-size: 1.4em !important;
  font-weight: 700;
  margin: 0 0 4px !important;
  padding: 0 !important;
  color: var(--neutral-11) !important;
  text-align: left !important;
}

.voucher-card-body p {
  font-family: 'Manrope', sans-serif !important;
  font-size: 0.9em;
  color: var(--neutral-10);
  margin: 0 0 6px !important;
  padding-top: 6px;
  line-height: 16px;
}

.voucher-card--gray .voucher-card-body h3,
.voucher-card--gray .voucher-card-body p {
  color: var(--neutral-05) !important;
}

.voucher-card-remaining {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.voucher-ticket-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.voucher-card-remaining span {
  font-family: 'Manrope', sans-serif;
  font-size: 0.7em;
  font-weight: 600;
  color: var(--brand-orange);
}

.voucher-card--gray .voucher-card-remaining span {
  color: var(--neutral-05);
}

.voucher-card-date {
  font-family: Inter, sans-serif !important;
  font-weight: 700;
  font-size: 0.6em;
  margin-top: auto;
  color: var(--neutral-10);
  display: block;
  text-align: left;
}

.voucher-card--gray .voucher-card-date {
  color: var(--neutral-04);
}

.voucher-card-footer {
  border-top: 1px solid var(--neutral-02);
  padding: 6px;
  text-align: center;
  cursor: pointer;
}

.voucher-card-footer .button {
  background: none !important;
  color: var(--neutral-13) !important;
  padding: 0 !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 0.95em;
  font-weight: 700;
  width: 100%;
  text-align: center;
}

.voucher-card-footer .button:hover {
  background: none !important;
  color: var(--brand-orange) !important;
}

.voucher-card--gray .voucher-card-footer .button {
  color: var(--neutral-04) !important;
  pointer-events: none;
}

.voucher-card--blue .voucher-card-footer .button[disabled] {
  color: var(--neutral-04) !important;
  pointer-events: none;
}

.voucher-card-footer .button.btn-apply {
  color: var(--blue-09) !important;
}

.voucher-card-footer .button.btn-apply:hover {
  color: var(--cyan-01) !important;
}

.voucher-card-footer .button.applied {
  color: var(--brand-orange) !important;
}

@media (min-width: 1400px) {
  .popup-content {
    width: 100%;
  }
}

@media screen and (max-width: 1199px) {
  #voucher-popup.popup-bg .popup {
    width: 70%;
  }
}

@media screen and (max-width: 768px) {
  .voucher-tab-content {
    height: 60vh;
  }
}

@media screen and (max-width: 450px) {
  .popup-bg .popup {
    width: 90%;
  }

  .voucher-tab-content {
    height: 55vh;
  }

  .voucher-card-body h3 {
    font-size: 1.1em !important;
  }
}

#claim-voucher-anchor {
  text-decoration: underline;
  color: var(--brand-orange);
  cursor: pointer;
  background-color: initial;
  padding: 0;
}

::-ms-reveal { 
  /* remove password reveal icon in MS-Edge */
  display: none;
}

#resetpwsForm.hide {
  display: block !important;
  max-height: 0;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}

#resetpwsForm {
  transition: transform 0.5s ease-out, opacity 0.5s ease-out, max-height 0.5s;
  max-height: 500px; /* Adjust as needed for your content */
  opacity: 1;
  transform: translateY(0);
}


/*--------------------------------------------------------------
# Announcement bar
--------------------------------------------------------------*/
#notification-bar {
  width: 100%;
  background-color: var(--neutral-01);
  clear: both;
  z-index: 999;
  margin-bottom: 15px;
  /* background-image: url(/assets/img/summer-bg.png); */
  background-color: var(--brand-orange);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#notification-bar .container {
  height: auto;
  margin: 23px auto 0;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}

@media (max-width: 768px) {
    #notification-bar .container {
      margin: 50px auto 0;
    }
}

#notification-bar p {
  display: inline-block;
  color: var(--neutral-01); 
  margin-bottom: 0;
  animation: blinker 3s linear infinite;
  margin-right: 10px;
  /* text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); */
  font-weight: 600;
}

@keyframes blinker {
  30% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
}

#notification-bar p strong{
  color: var(--yellow-04);
  text-shadow: none;
}

#notification-bar a.btn-action {
  font-size: 14px;
  display: inline-block;
  height: auto;
  line-height: 28px;
  font-weight: bold;
  white-space: nowrap; 
  border-radius: 50px;
  text-align: center;
  text-decoration: none;
  background-color: var(--yellow-04);
  border-radius: 50px;
  padding: 0px 18px;
  margin-left: 20px;
  color: var(--neutral-16) !important;
  cursor: pointer;
}

#notification-bar a.btn-action:hover {
  background-color: var(--blue-01);
  color: var(--neutral-16);
}




/************ Country ********************/
.country {
  padding: 2em;
  border-radius: 10px;
  background: var(--brand-tint);
  box-shadow: 0 4px 10px 0 var(--alpha-tint-10);
  transition: all 0.3s ease-in-out;
  display: flow-root;
  margin-top: 20px;
}

ul.country-list {
  display: flow-root;
}

ul.country-list li {
  float: left;
  width: 20%;
  margin: 6px 0;
  list-style-type: disc;
  text-align: left !important;
  color: var(--neutral-11);
}

@media screen and (max-width: 1199px) {
    ul.country-list li {
        width: 33%;
    }
}

@media screen and (max-width: 991px) {
    ul.country-list li {
        width: 33%;
    }

    .img-country {
      width: 50%;
    }
}

@media screen and (max-width: 767px) {
    ul.country-list li {
        width: 33%;
    }

    .img-country {
      width: 60%;
    }
}

@media screen and (max-width: 580px) {
    ul.country-list li {
        width: 50%;
    }

    .img-country {
      width: 50%;
    }
}

@media screen and (max-width: 519px) {
    ul.country-list li {
        width: 100%;
    }

    .img-country {
      width: 60%;
    }
}



/*--------------------------------------------------------------
# Referral
--------------------------------------------------------------*/
.referral {
  padding: 100px 0 0 0;
  background-color: var(--neutral-01);
  background-position: top center;
  background-size: contain;
  width: 100%;
  background-repeat: no-repeat;
} 

.referral .shareUrl-header h1 {
  font-size: 40px;
  color: var(--alpha-tint-75);
  text-align: center;
}

.referral-b4login {
  padding: 30px 30px 0 30px;
  background-color: var(--neutral-01);
  border: 1px solid var(--neutral-01);
  border-radius: 16px;
  margin-bottom: 50px;
  text-align: left;
}

.referral-b4login img {
  /* was a flat 74% of its column, so the artwork swung between 110px and
     315px depending on the breakpoint. Bounded now so it stays readable. */
  width: 100%;
  max-width: clamp(160px, 34vw, 320px);
  height: auto;
  display: block;
  margin-inline: auto;
}

.referral-b4login h1 {
  margin-bottom: 20px;
  /* was a flat 50px, which ran to 4 lines and 240px tall on a 320px screen.
     Scales with the viewport now and still tops out at the original 50px. */
  font-size: clamp(1.85rem, 5.6vw, 50px);
  line-height: 1.16;
  letter-spacing: 1px;
  color: var(--brand-orange);
  text-wrap: balance;
}

.referral-b4login p {
  font-size: clamp(1rem, 1.5vw, 18px);
  line-height: 1.6;
  margin-bottom: 20px;
}

.referral-b4login button {
  padding: 12px 40px;
  margin-bottom: 40px;
}

@media screen and (max-width: 992px) {
  .referral-b4login h1 {
    letter-spacing: normal;
    text-align: left !important;
  }
}

@media screen and (max-width: 768px) {
  .referral-b4login h1 {
    width: 100%;
    text-align: center !important;
  }

  .referral-b4login p {
    width: 100%;
    text-align: center !important;
  }

  .referral-b4login .col-md-7 {
    display: contents;
  }

  .referral-b4login .col-md-7 > a {
    display: block;
    width: 100%;
    text-align: center;
  }

  .referral-b4login button {
    float: none;
    margin: 30px auto;
    display: block;
    width: 230px;
    max-width: 100%;
  }

  .referral-b4login img {
    width: 100%;
    max-width: clamp(150px, 46vw, 260px);
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}

.referral-benefits {
  padding: 40px 0px;
  text-align: center;
}

.referral-benefits img {
  margin: 20px;
  width: 34% !important;
}

.referral-benefits .col-md-6 {
  background-color: var(--alpha-black-06);
  border-radius: 16px;
  width: 46%;
  margin: 15px;
}

@media screen and (max-width: 992px) {
    .referral-benefits .col-md-6 {
      width: 92%;
      margin: 16px;
    }

    .referral-benefits img {
      margin: 10px;
      width: 30% !important;
    }
}

.shareUrl {
  width: 100%;
  padding: 40px 20px;
  text-align: center;
}

.shareUrl-header {
  margin-bottom: 40px;
}

.shareUrl-headerText {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 22px;
}

.shareUrl-subtext {
  margin-top: 10px;
  font-size: 14px;
}

.shareUrl-body {
  margin-bottom: 40px;
}

.shareUrl-input {
  cursor: pointer;
  width: 100%;
  padding: 10px 0;
  border: 2px solid var(--alpha-black-09);
  text-align: center;
  font-size: 26px;
  font-weight: bold;
  color: var(--brand-orange) !important;
  background: var(--alpha-black-00);
  border-radius: 3px;
  transition: all 300ms ease;
}

.shareUrl-input:hover, .shareUrl-input:focus, .shareUrl-input:active {
  border-color: var(--alpha-black-30);
  background: var(--alpha-white-10);
}

@media (min-width: 568px) {
  .shareUrl-input {
    max-width: 100%;
    font-size: 56px;
  }
  .shareUrl-headerText {
    font-size: 32px;
  }
}

.u-verticalGrid {
  display: flex;
  flex-flow: column wrap;
}

.u-flexCenter {
  display: flex;
  align-items: center !important;
}

.u-sizeViewHeightMin100 {
  min-height: 40vh !important;
  background-color: var(--neutral-01);
  border: 1px solid var(--neutral-01);
  border-radius: 16px;
  transition: all 0.3s 
  cubic-bezier(0, 0, 0.5, 1);
}

.u-size1040 {
  max-width: 1040px;
}

.u-marginAuto {
  margin: 0 auto;
}




/*macOS temp step
.macdownload .windows-adv-mode,
.macdownload .setup,
.macdownload h3{
  display: none;
}*/

ul.simple,
ul.simple li {
  margin: 0px;
  padding-left: 8px;
  padding-right: 8px;
}

/*--------------------------------------------------------------
# Download CTA consistency
# Every download page (android/windows/mac/ios/cloud) renders its
# primary buttons through a different wrapper, so size, text size
# and alignment drifted per page and per breakpoint. These rules
# give them one text size at every width, and one button size,
# centred, below 768px.
--------------------------------------------------------------*/

/* One text size at every breakpoint. The base rule is 1.2rem, but
   .index-app-dl-btn was bumped to 1.5rem below 992px and cut to
   0.9rem for windows, so labels grew on tablet and shrank on phones.
   line-height is unified too: the filled and outlined variants used
   34px and 32px, which left them 2px different in height. */
.dl-btn-center .index-app-dl-btn,
.dl-btn-center .index-app-dl-btn-free,
.android-dl-btn .index-app-dl-btn,
.android-dl-btn .index-app-dl-btn-free,
.windows-dl-btn .index-app-dl-btn,
.windows-dl-btn .index-app-dl-btn-free,
.mac-dl-btn .index-app-dl-btn,
.mac-dl-btn .index-app-dl-btn-free,
.ios-dl-btn .index-app-dl-btn,
.ios-dl-btn .index-app-dl-btn-free {
  font-size: 1.2rem;
  line-height: 34px;
  /* labels stay on one line; .index-app-dl-btn-free had no nowrap of its
     own, which is why "Google Play Download" broke onto a second line */
  white-space: nowrap;
}

@media screen and (max-width: 991.98px) {
  .dl-btn-center,
  .windows-dl-btn,
  .mac-dl-btn,
  .ios-dl-btn,
  .appstore-dl-btn {
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
  }

  /* keeps its column direction (the "old versions" list sits below) */
  .android-dl-btn {
    align-items: center;
  }

  .android-dl-btn .buttons,
  .windows-dl-btn.row {
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  .mac-dl-btn {
    display: flex;
  }

  /* the bootstrap column is sized by its sibling column, so the button
     has to be centred inside it rather than relying on the row */
  .windows-dl-btn.row > [class*="col-"] {
    display: flex;
    justify-content: center;
  }

  /* the anchors wrapping a CTA are inline and pick up stray whitespace,
     which widened their column and knocked the button off centre */
  .dl-btn-center a:has(> .index-app-dl-btn),
  .dl-btn-center a:has(> .index-app-dl-btn-free),
  .android-dl-btn a:has(> .index-app-dl-btn),
  .android-dl-btn a:has(> .index-app-dl-btn-free),
  .windows-dl-btn a:has(> .index-app-dl-btn),
  .windows-dl-btn a:has(> .index-app-dl-btn-free),
  .mac-dl-btn a:has(> .index-app-dl-btn),
  .mac-dl-btn a:has(> .index-app-dl-btn-free),
  .ios-dl-btn a:has(> .index-app-dl-btn),
  .ios-dl-btn a:has(> .index-app-dl-btn-free) {
    display: flex;
    justify-content: center;
    width: auto;
    min-width: 170px;
    max-width: 100%;
  }

  .dl-btn-center .index-app-dl-btn,
  .dl-btn-center .index-app-dl-btn-free,
  .android-dl-btn .index-app-dl-btn,
  .android-dl-btn .index-app-dl-btn-free,
  .windows-dl-btn .index-app-dl-btn,
  .windows-dl-btn .index-app-dl-btn-free,
  .mac-dl-btn .index-app-dl-btn,
  .mac-dl-btn .index-app-dl-btn-free,
  .ios-dl-btn .index-app-dl-btn,
  .ios-dl-btn .index-app-dl-btn-free {
    float: none;
    display: block;
    box-sizing: border-box;
    width: auto;
    min-width: 170px;
    max-width: 100%;
    margin: 0;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 26px;
  }
}

/* "Get Dedicated IP" sits in a narrow col-sm-4, so the default wrapping
   broke it onto 2-3 rows at most widths. Keep it on a single row. */
#svip .svip_third button {
  white-space: nowrap;
}

/* its column is a fixed 4/12, narrower than the button at some widths,
   so let the column size to the button instead of clipping it */
#svip .svip_third > div:first-child {
  width: auto;
  max-width: none;
}

/*--------------------------------------------------------------
# Platform download pills: align the icons across buttons
# The icon + label group is centred, but the labels differ in
# width (Windows 114px ... Android 60px), so each icon landed at
# a different offset. Giving the label a fixed slot makes the
# group a constant width, so centring lines the icons up.
--------------------------------------------------------------*/
@media screen and (min-width: 520px) {
  #download .btn-dl > span {
    flex: 0 0 auto;
    width: 120px;
    text-align: left;
  }
}

/*--------------------------------------------------------------
# Help centre landing (faq-main) - card spacing on phones
--------------------------------------------------------------*/
@media screen and (max-width: 576px) {
  /* 40px + 80px of stacked section padding sat between the popular-questions
     block and the platform cards */
  #services.faq-main-bg {
    padding-bottom: 32px;
  }

  #services:has(.faq-circle) {
    padding: 32px 0 32px 0;
  }

  /* only on the landing page, where this block follows the cards - the FAQ
     detail pages keep their own rhythm */
  #services:has(.faq-circle) ~ #services:has(.faq-links) {
    padding-top: 32px;
  }

  /* one rhythm for all six cards - the nth-child(4)/(5) exceptions above zero
     the bottom margin, which left macOS and the last card touching */
  #services .container .row .col-lg-4 .faq-circle,
  #services .container .row .col-lg-4:nth-child(4) .faq-circle,
  #services .container .row .col-lg-4:nth-child(5) .faq-circle {
    margin: 0 4px 16px 4px;
  }

  #services .container .row .col-lg-4:last-child .faq-circle {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 519px) {
  /* fixed icon box so every label starts on the same x */
  #services .faq-circle img {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    object-fit: contain;
    padding-right: 0;
    margin-right: 14px;
  }

  #services .faq-circle .title {
    margin: 0;
  }
}

/*--------------------------------------------------------------
# Dedicated vs Shared IP comparison table
--------------------------------------------------------------*/
/* #svip_compare i is orange, which is the "yes" colour. The Shared IP column
   needs a visibly different "no" mark - grey rather than red, since these are
   features the shared plan simply does not include, not errors. */
#svip_compare i.svip-no {
  color: var(--neutral-08);
}