:root {
  --Blue: #1a73e8;
  --White: #fff;
  --LightGrey: #dadce0;
  --LighterGrey: #f8f9fa;
  --Text: #5f6368;
  --Text-dark: #3c3c3c;
  --TextLight: #5f6368;
  --Yellow: #fcc934;
  --Red: #ea4435;
}

* {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  margin: 0;
  line-height: normal;
  position: relative;
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

a {
  text-decoration: none;
}

body,
html {
  overflow-x: hidden;
}
@media (max-width: 640px) {
  header .logo {
    max-width: 150px;
  }
}


.hidden {
  display: none !important;
}

/**
 * TEMP-------------------------------------
*/
.step {
  display: none !important;
}

.step.active {
  display: flex !important;
}

.error {
  border: 2px solid red !important;
}

.bold {
  font-weight: 500;
}

.light {
  font-weight: 300;
}

.blue {
  color: var(--Blue);
}

/**
 * ----------------------------------------------
 * Buttons
*/
.button-light {
  padding: 6px 11px;
  border-radius: 5px;
  border: 1px solid var(--Blue);
  background: var(--White);
  color: var(--Blue);
  font-size: 14px;
  display: block;
  cursor: pointer;
  min-width: 115px;
  text-align: center;
}

.button-light:hover {
  background-color: var(--Blue);
  color: var(--White);
}

.button-light:disabled {
  background-color: var(--LightGrey);
  border: 1px solid var(--LightGrey);
  color: var(--White);
  cursor: not-allowed;
}

.button-dark {
  padding: 6px 11px;
  border-radius: 5px;
  border: 1px solid var(--Blue);
  background: var(--Blue);
  color: var(--White);
  font-size: 14px;
  display: block;
  cursor: pointer;
  min-width: 115px;
  text-align: center;
}

.button-dark:hover {
  background-color: var(--White);
  color: var(--Blue);
}

.button-container {
  display: flex;
  gap: 10px;
  width: fit-content;
  height: fit-content;
}

.back-button {
  position: fixed;
  left: 50px;
  top: 45%;
  z-index: 9999;
  cursor: pointer;
}

/**
 * ----------------------------------------------
 * Header, footer, main, headings, paragraph,
 * span, input
*/

header {
  width: 100%;
  border-bottom: 1px solid var(--LightGrey);
}

header .wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header .logo {
  width: 250px;
}

.language-select-container {
  display: flex;
  gap: 10px;
}

header .button-light {
  min-width: auto;
}

footer {
  width: 100%;
  border-top: 1px solid var(--LightGrey);
}

footer .button-light {
  font-size: 12px;
  min-width: auto;
}

footer .wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 10px 20px;
  min-height: 77px;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
}

.partner-logo-container {
  display: flex;
  gap: 10px;
  align-items: center;
}

.partner-logo-container p {
  font-size: 12px;
}

.partner-logo-container img {
  width: 100px;
  object-fit: contain;
}

.faq {
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  text-decoration-line: underline;
  color: var(--Blue);
}

h1 {
  color: var(--Text-dark);
  font-size: 40px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
}

h3,
h2 {
  color: var(--Blue);
  font-size: 25px;
  font-weight: 400;
}

.radio-group label,
td,
p {
  color: var(--TextLight);
  line-height: 25px;
}

select,
input {
  border-radius: 5px;
  border: 1px solid var(--Blue);
  background: var(--White);
  padding: 10px 16px;
  z-index: 9;
  -webkit-appearance: none;
  color: var(--Text);
}

span {
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
}

footer {
  z-index: 0;
}

.slide-name {
  color: var(--Blue);
}

.gradient-circle {
  position: absolute;
  bottom: -50%;
  left: -20%;
  z-index: 0;
}

.content-with-tooltip {
  display: inline;
}

.tooltip {
  display: inline;
}

.tooltip-icon {
  cursor: pointer;
  width: 10px;
  margin-bottom: 4px;
  display: inline-block;
}

.tooltip-text {
  background-color: var(--White);
  border: 1px solid var(--TextLight);
  border-radius: 5px;
  padding: 5px 10px;
  width: 300px;
  font-size: 12px;
  position: absolute;
  z-index: 10;
  left: 0;
  bottom: 25px;
  line-height: 20px;
  color: var(--Text);
}

.tooltip-paragraph {
  display: inline;
  color: var(--Text);
  line-height: 25px;
}

.tooltip-text span {
  white-space: break-spaces;
}

.form-group label {
  color: var(--Blue);
  background-color: var(--White);
  position: absolute;
  padding: 5px;
  top: -11px;
  left: 20px;
  z-index: 10;
  font-size: 12px;
}

.form-group input {
  width: 100%;
}

.form-group .tip {
  font-size: 12px;
  color: var(--Blue);
}

.colors {
  position: absolute;
  left: 0;
  bottom: 100px;
  object-fit: contain;
}

@media (max-width: 1300px) {
  .colors {
    display: none;
  }
}

@media (max-width: 700px) {
  h1 {
    font-size: 35px;
  }

  h2,
  h3 {
    font-size: 20px;
  }
}

@media (max-width: 640px) {
  * {
    font-size: 14px;
  }

  .tooltip-text {
    width: calc(100vw - 50px);
  }
}

/**
 * ----------------------------------------------
 * All steps
 * Vieport height - header & footer height
*/
.step {
  min-height: calc(100vh - 82px - 77px);
  padding: 0 100px;
}

@media (max-width: 1024px) {
  .google-colors {
    display: none;
  }

  .step {
    padding: 0 30px;
  }

  .back-button {
    left: 10px;
  }
}

/**
 * ----------------------------------------------
 * Step 0
*/

#step0 {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

#step0 h1 {
  text-align: center;
}

#step0 .is-customer {
  display: flex;
  gap: 10px;
}

#step0 .is-customer > div {
  border: 1px solid var(--Blue);
  width: 203px;
  padding: 9px 20px;
  border-radius: 5px;
  cursor: pointer;
}

#step0 .is-customer > div p {
  text-align: center;
  font-size: 14px;
  font-style: normal;
  line-height: normal;
}

#step0 .is-customer > div p span:nth-of-type(2) {
  font-weight: 600;
  color: var(--Blue);
}

#step0 .is-customer-msg {
  color: var(--Red);
  text-align: center;
  font-size: 14px;
  max-width: 320px;
  width: 100%;
}

#step0 .gmail-img {
  max-width: 370px;
  width: 100%;
  object-fit: contain;
  margin-top: 30px;
}

@media (max-width: 640px) {
  #step0 .is-customer {
    flex-direction: column;
  }
}

/**
 * ----------------------------------------------
 * Step 1
*/

#step1 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  position: static;
}

#step1 .top-content {
  padding: 50px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#step1 .top-content h1 {
  margin-bottom: 25px;
}

#step1 .top-content input {
  max-width: 450px;
}

#step1 .content-with-tooltip {
  gap: 4px;
  color: var(--Text);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 25px; /* 156.25% */
  max-width: 450px;
}

#keyRedeemedMsg {
  max-width: 1024px;
  margin: auto;
  padding: 20px;
}

.google-colors {
  position: absolute;
  left: 0;
  top: 55%;
}

/**
 * ----------------------------------------------
 * Step 2
*/

#step2 .wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 30px 20px;
  display: flex;
  gap: 20px;
  width: 100%;
}

#step2 h1 {
  margin-bottom: 25px;
}

#step2 .wrap .left-content p {
  max-width: 280px;
}

#step2 .bottom-content {
  margin-left: auto;
}

#step2 .cards {
  max-width: 1024px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  gap: 20px;
  width: 100%;
}

#step2 .cards .card {
  width: calc(50% - 10px);
  max-width: 375px;
  display: flex;
  z-index: 1;
}

#step2 .cards .right-card {
  padding: 4px;
  border-radius: 5px;
  background: linear-gradient(315deg, #fbc02d, #fff, #fff, #fff, #4285f4);
}
#step2 .cards .left-card {
  background: linear-gradient(315deg, #fbc02d, #fff, #fff, #fff, #4285f4);
  padding: 1px;
  border-radius: 5px;
}

#step2 .cards .card .card-content {
  background-color: var(--White);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  padding: 30px;
  width: 100%;
}

#step2 .cards .card .card-content p {
  color: var(--TextLight);
  font-weight: 300;
}

#step2 .cards .card .card-content .price-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

#step2 .cards .card .card-content .price-block .price-wrap {
  display: flex;
  position: relative;
}

#step2 .cards .card .card-content .price-block .price-wrap .price {
  color: var(--Blue);
  font-size: 40px;
  font-weight: 400;
}

#step2 .cards .card .card-content .price-block .price-wrap .old-price {
  color: var(--Red);
  font-size: 25px;
  font-weight: 400;
  position: relative;
  height: fit-content;
  padding: 0 2px;
  margin: auto 15px 4px 0;
  white-space: nowrap;
}

#step2 .cards .card .card-content .price-block .price-wrap .old-price:after {
  content: '';
  background-color: var(--Red);
  height: 1.5px;
  width: 100%;
  position: absolute;
  bottom: 11px;
  left: 0;
}

#step2 .cards .card .card-content .price-block .price-wrap .discount {
  color: var(--White);
  font-size: 25px;
  background-color: var(--Red);
  font-size: 14px;
  border-radius: 5px;
  height: fit-content;
  padding: 3px 8px;
  margin: -5px 0 0 6px;
}

.chevron {
  position: absolute;
  top: 50%;
  transform: translate(0, -6px);
  left: -12px;
  display: block;
  width: 1px;
}
.chevron::before,
.chevron::after {
  display: block;
  content: '';
  border: 6px solid transparent;
  transform: rotate(90deg);
}

.chevron::before {
  top: 0;
  border-top-color: var(--Red);
}

#step2 .cards .card .card-content .compare-plans {
  color: var(--Blue);
  font-size: 14px;
  font-weight: 400;
  text-decoration-line: underline;
  cursor: pointer;
}

#step2 .cards .left-card .card-content .line {
  height: 1px;
  width: 100%;
  background-color: var(--LightGrey);
}
#step2 .cards .right-card .card-content .line {
  height: 1px;
  width: 100%;
  background-color: var(--Blue);
}

#step2 .cards .right-card .card-content .most-popular {
  background-color: var(--Yellow);
  padding: 10px;
  border-radius: 5px;
  color: var(--White);
  font-weight: 400;
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 139px;
}

#step2 .cards .card .card-content .enchanced-productivity {
  font-size: 14px;
  text-align: center;
}

#step2 .cards .card .card-content .storage-amount {
  color: var(--Blue);
}

#comparePlans {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 10;
  justify-content: center;
  align-items: center;
  padding: 150px;
  z-index: 99999;
}

#step2 .compare .compare-content {
  padding: 50px;
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  background-color: var(--White);
}

#step2 .compare .compare-content .close {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
  z-index: 10;
}

#step2 .compare table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

#step2 .compare table .check-icon {
  width: 20px;
}

#step2 table td {
  padding: 20px;
}

#step2 table thead td {
  padding: 20px 0px;
}

#step2 table tr {
  border-top: 1px solid var(--LightGrey);
}

#step2 table thead tr {
  border-top: none;
}

.blueTd {
  color: var(--Blue);
}
.greyRow {
  background-color: var(--LighterGrey);
}

.compatible-with {
  display: block;
  max-width: 300px;
}

#step2 .payment-plan-popup.active {
  display: flex;
}

#step2 .payment-plan-popup {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 10;
  justify-content: center;
  align-items: center;
}

#step2 .payment-plan-popup .close {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
  z-index: 10;
}

#step2 .payment-plan-popup .selectPlan {
  width: fit-content;
  margin-left: auto;
}

#step2 .payment-plan-popup h2 {
  color: var(--Text-dark);
  font-size: 40px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
}

#step2 .payment-plan-popup .wrap {
  background-color: var(--White);
  display: flex;
  flex-direction: column;
  padding: 40px;
  width: 670px;
  border-radius: 5px;
}

#step2 .payment-plan-popup .wrap .radio-container {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding-bottom: 35px;
  padding-top: 25px;
  align-items: center;
}

#step2 .payment-plan-popup .wrap .radio-container .price {
  width: 150px;
}

#step2 .payment-plan-popup .wrap .radio-container:first-of-type .discount {
  visibility: hidden;
}

#step2 .payment-plan-popup .wrap .radio-container .discount {
  width: 100px;
  display: flex;
  padding: 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 5px;
  background: var(--Yellow);
  color: var(--White);
}

#step2 .payment-plan-popup .wrap .radio-container:first-of-type {
  border-bottom: 1px solid var(--LightGrey);
}

#step2 .payment-plan-popup .wrap .radio-container label {
  width: 200px;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  color: var(--Text);
  padding-left: 30px;
}

@media (max-width: 1024px) {
  #step2 .wrap {
    flex-direction: column;
    padding: 50px 0 20px 0;
  }

  #step2 .cards {
    padding: 0;
    margin-top: 20px;
  }

  #comparePlans {
    padding: 20px;
  }

  #step2 .compare .compare-content .close {
    top: 10px;
    right: 10px;
  }

  #step2 .compare .compare-content {
    padding: 50px 10px 10px 10px;
  }
}

@media (max-width: 700px) {
  #step2 .cards {
    flex-direction: column-reverse;
    padding: 0;
  }

  #step2 .cards .card {
    width: 100%;
  }

  #step2 .cards .card .card-content .price {
    font-size: 30px;
  }

  #step2 .payment-plan-popup .wrap .radio-container {
    flex-direction: column;
    align-items: start;
  }
}

@media (max-width: 640px) {
  #step2 .top-content {
    flex-direction: column-reverse;
    text-align: center;
  }

  #step2 .top-content .left-content,
  #step2 .top-content .right-content {
    width: 100%;
  }

  #step2 .top-content .right-content img {
    max-width: 250px;
    width: 100%;
    margin: auto;
  }

  #step2 .cards .card .card-content {
    padding: 35px 10px 10px 10px;
  }

  #step2 .compare {
    padding: 5px;
  }

  #step2 .payment-plan-popup .close {
    top: 0;
    right: 10px;
  }

  #step2 table td,
  #step2 table thead td {
    padding: 10px 5px;
    font-size: 12px;
    line-height: 16px;
  }
}

/**
 * ----------------------------------------------
 * Step 3
*/

#step3 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#step3 .blue {
  color: var(--Blue);
}

#step3 .wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 50px 20px 20px 20px;
  display: flex;
  width: 100%;
  gap: 20px;
}

#step3 .left-content {
  max-width: 325px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

#step3 .right-content {
  width: 100%;
  max-width: 770px;
  height: fit-content;
  margin-left: auto;
}

#step3 .right-content .wrap {
  background: linear-gradient(341deg, #fbc02d, #fff, #fff, #fff, #4285f4);
  border-radius: 5px;
  padding: 1px;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

#step3 .right-content .background {
  background-color: var(--White);
  height: 100%;
  width: 100%;
  padding: 35px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#step3 .right-content .radio-inputs {
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

#step3 .right-content .radio-container {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding-bottom: 35px;
  padding-top: 25px;
  align-items: center;
}

#step3 .right-content .radio-input-container label {
  font-size: 16px;
  line-height: normal;
  color: var(--Text);
  padding-left: 30px;
  padding-top: 5px;
}

#step3 .right-content .haveRegisteredDomain {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 25px;
}

#step3 .right-content .haveRegisteredDomain p {
  max-width: 377px;
  width: 100%;
}

#step3 .right-content .haveRegisteredDomain .form-group {
  margin-top: 20px;
}

#step3 .right-content .light {
  font-weight: 300;
  margin-top: 20px;
  max-width: 377px;
  width: 100%;
}

#step3 .right-content .newDomain {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#step3 .right-content .domain-search {
  position: absolute;
  z-index: 10;
  top: 11px;
  right: 10px;
}

#step3 .enter-domain span {
  font-weight: 300;
}

#step3 .right-content .newDomain .form-group input,
#step3 .right-content .haveRegisteredDomain .form-group input {
  font-size: 14px;
}

#step3 .right-content .newDomain .error-messages p,
#step3 .right-content .haveRegisteredDomain .error-messages p {
  color: var(--Red);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 19px;
}

#step3 .wrap .button-container {
  margin-left: auto;
  margin-top: 20px;
}

@media (max-width: 1024px) {
  #step3 .wrap {
    flex-direction: column;
    gap: 50px;
    padding: 50px 0 20px 0;
  }

  #step3 .left-content {
    width: 100%;
    max-width: unset;
  }

  #step3 .right-content {
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  #step3 .right-content .radio-inputs {
    flex-direction: column;
  }

  #step3 .right-content .background {
    padding: 20px;
  }
}

/**
 * ----------------------------------------------
 * Step 4
*/

#step4 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#step4 .wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 50px 20px 20px 20px;
  display: flex;
  width: 100%;
  gap: 20px;
}

#step4 .left-content {
  max-width: 325px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

#step4 .right-content {
  width: 100%;
  max-width: 770px;
  height: fit-content;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#step4 .right-content .wrap {
  background: linear-gradient(341deg, #fbc02d, #fff, #fff, #fff, #4285f4);
  border-radius: 5px;
  padding: 1px;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

#step4 .right-content .background {
  background-color: var(--White);
  height: 100%;
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#step4 .right-content .create-username,
#step4 .right-content .create-domain {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#step4 .right-content .create-domain-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 20px;
}

#step4 .right-content .create-username-heading,
#step4 .right-content .create-domain-heading {
  display: flex;
  gap: 15px;
  align-items: center;
}

#step4 .right-content .create-domain .edit {
  color: var(--TextLight);
  line-height: normal;
  text-decoration-line: underline;
  cursor: pointer;
}

#step4 .right-content .create-username .form-group,
#step4 .right-content .create-domain .form-group {
  margin-top: 15px;
}

#step4 .right-content .create-username .form-group input,
#step4 .right-content .create-domain .form-group input {
  font-size: 14px;
}

#step4 .right-content .create-username .tip {
  position: absolute;
  right: 10px;
  top: 8px;
  z-index: 10;
}

#step4 .createEmailAddress {
  max-width: 410px;
  width: 100%;
}

#step4 .wrap .button-container {
  margin-left: auto;
  margin-top: 20px;
}

@media (max-width: 1024px) {
  #step4 .wrap {
    flex-direction: column;
    gap: 50px;
    padding: 50px 0 20px 0;
  }

  #step4 .left-content {
    width: 100%;
    max-width: unset;
  }

  #step4 .right-content {
    margin-left: 0;
  }
}

/**
 * ----------------------------------------------
 * Step 5
*/

#step5 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#step5 .wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 50px 20px 20px 20px;
  display: flex;
  width: 100%;
  gap: 20px;
}

#step5 .left-content {
  max-width: 340px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 25px;
  z-index: 10;
}

#step5 .left-content .tooltip {
  display: inline;
  z-index: 10;
}

#step5 .left-content .tooltip .heading {
  font-weight: 500;
  display: block;
  padding-bottom: 10px;
}

#step5 .left-content .tooltip .main {
  display: block;
  padding-bottom: 10px;
}

#step5 .right-content {
  width: 100%;
  height: fit-content;
  margin-left: auto;
  z-index: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 770px;
}

#step5 .right-content .wrap {
  background: linear-gradient(341deg, #fbc02d, #fff, #fff, #fff, #4285f4);
  border-radius: 5px;
  padding: 1px;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

#step5 .right-content .background {
  background-color: var(--White);
  height: 100%;
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#step5 .right-content h2 {
  color: var(--TextLight);
  font-size: 16px;
  line-height: normal;
  width: 100%;
}

#step5 .right-content .fill-in-fields {
  width: 100%;
}

#step5 .right-content .contact-information-heading {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 20px;
}

#step5 .right-content .edit {
  color: var(--TextLight);
  line-height: normal;
  text-decoration-line: underline;
  cursor: pointer;
}

#step5 .right-content .contact-information-container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

#step5 .right-content .business-information .background {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
}

#step5 .right-content .form-group.email .warning {
  color: var(--Red);
  font-size: 14px;
}

#step5 .right-content .form-group.email label {
  display: flex;
  gap: 5px;
}

#step5 .right-content .form-group.phone {
  width: calc(50% - 10px);
  display: flex;
  height: fit-content;
}

#step5 .right-content .phone .country-code {
  width: 85px;
  border-radius: 5px 0 0 5px;
  border-right: none;
  padding-left: 30px;
}

#step5 .right-content .phone .plus {
  color: var(--Blue);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 17px;
  z-index: 10;
}

#step5 .right-content .phone .phone-wrap {
  width: 100%;
}

#step5 .right-content .phone .phone-number {
  border-radius: 0 5px 5px 0;
  width: 100%;
}

#step5 .right-content .form-group.email,
#step5 .right-content .form-group.registration-id,
#step5 .right-content .form-group.tax-id,
#step5 .right-content .form-group.postal-code,
#step5 .right-content .form-group.city,
#step5 .right-content .form-group.country,
#step5 .right-content .form-group.billing-name,
#step5 .right-content .form-group.billing-address,
#step5 .right-content .form-group.billing-administravtive-area {
  width: calc(50% - 10px);
}

#step5 .right-content .form-group.business-name,
#step5 .right-content .form-group.billing-administravtive-area select,
#step5 .right-content .form-group.country select {
  width: 100%;
}

#step5 label[for='purchasingAsBusinessCheckbox'] {
  padding-left: 35px;
}

#step5 .wrap .button-container {
  margin-left: auto;
}

@media (max-width: 1024px) {
  #step5 .wrap {
    flex-direction: column;
    gap: 50px;
    padding: 50px 0 20px 0;
  }

  #step5 .left-content {
    width: 100%;
    max-width: unset;
  }

  #step5 .right-content {
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  #step5 .right-content .form-group.email,
  #step5 .right-content .form-group.phone,
  #step5 .right-content .form-group.registration-id,
  #step5 .right-content .form-group.tax-id,
  #step5 .right-content .form-group.postal-code,
  #step5 .right-content .form-group.city,
  #step5 .right-content .form-group.country,
  #step5 .right-content .form-group.billing-administravtive-area {
    width: 100%;
  }
}

/**
 * ----------------------------------------------
 * Step 6
*/
#step6 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#step6 .wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 50px 20px;
  display: flex;
  width: 100%;
  gap: 20px;
}

#step6 .left-content {
  max-width: 340px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 25px;
  z-index: 10;
}

#step6 .right-content {
  width: 100%;
  max-width: 770px;
  height: fit-content;
  margin-left: auto;
  z-index: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#step6 .right-content .wrap {
  background: linear-gradient(341deg, #fbc02d, #fff, #fff, #fff, #4285f4);
  border-radius: 5px;
  padding: 1px;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

#step6 .right-content .background {
  background-color: var(--White);
  height: 100%;
  width: 100%;
  padding: 35px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#step6 .right-content h2 {
  color: var(--TextLight);
  font-size: 16px;
  line-height: normal;
  width: 100%;
}

#step6 .google-img {
  width: 40px;
}

#step6 table {
  border-collapse: collapse;
}

#step6 table .product {
  display: flex;
  align-items: center;
  gap: 20px;
}

#step6 table .product span {
  color: var(--Blue);
}

#step6 table tr td {
  padding: 10px;
}

#step6 table .warning span {
  color: var(--Red);
  font-size: 14px;
  font-weight: 400;
}

#step6 table tr td:nth-of-type(2) {
  font-weight: 500;
  text-align: end;
}

#step6 table tr:last-of-type td p {
  font-weight: 500;
  font-size: 20px;
  color: var(--Text-dark);
}

#step6 .wrap .button-container {
  margin-left: auto;
  margin-top: 20px;
}

@media (max-width: 1024px) {
  #step6 .wrap {
    flex-direction: column;
    gap: 50px;
    padding: 50px 0 20px 0;
  }

  #step6 .left-content {
    width: 100%;
    max-width: unset;
  }

  #step6 .right-content {
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  #step6 .right-content .background {
    padding: 20px;
  }

  #step6 table .product {
    flex-direction: column;
    align-items: start;
    gap: 5px;
  }

  #step6 table tr td {
    padding-bottom: 10px;
  }

  #step6 table tr td:first-of-type {
    padding-right: 10px;
  }
}

/**
 * ----------------------------------------------
 * Step 7
*/
#step7 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#step7 .wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 50px 20px;
  display: flex;
  width: 100%;
  gap: 20px;
}

#step7 .left-content {
  max-width: 340px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 25px;
  z-index: 10;
}

#step7 .right-content {
  width: 100%;
  max-width: 770px;
  height: fit-content;
  margin-left: auto;
  z-index: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#step7 .right-content .wrap {
  background: linear-gradient(311deg, #fbc02d, #fff, #fff, #fff, #4285f4);
  border-radius: 5px;
  padding: 1px;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

#step7 .right-content .wrap span#subscribeTo2 {
  max-width: 135px;
  display: block;
}

#step7 .right-content .background {
  background-color: var(--White);
  height: 100%;
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#step7 .right-content h2 {
  color: var(--TextLight);
  font-size: 16px;
  line-height: normal;
  width: 100%;
  margin-bottom: 20px;
}

#step7 .google-img {
  width: 40px;
}

#step7 .review-container {
  display: flex;
  gap: 20px;
}

#step7 table {
  border-collapse: collapse;
  width: calc(50px -10px);
}

#step7 .right-content .payment-details {
  width: 50%;
  border-left: 1px solid var(--LightGrey);
  display: flex;
  gap: 20px;
  padding-left: 20px;
  flex-direction: column;
}

#step7 table .product {
  display: flex;
  align-items: center;
  gap: 20px;
}

#step7 table .product span {
  color: var(--Blue);
}

#step7 tr.tax,
#step7 tr.product-quantity {
  border-bottom: 1px solid var(--LightGrey);
}

#step7 table tr td {
  padding: 5px;
}

#step7 table .warning span {
  color: var(--Red);
  font-size: 14px;
  font-weight: 400;
}

#step7 table tr td:nth-of-type(2) {
  font-weight: 500;
  text-align: end;
}

#step7 table tr:nth-of-type(2) td {
  padding: 10px 10px 20px 10px;
}

#step7 table tr.total td:first-child {
  display: flex;
  gap: 10px;
  align-items: center;
}

#step7 table tr.total td p {
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
}

#tc {
  display: flex;
  gap: 20px;
}

#tc .button-container button.button-dark span {
  color: var(--White);
}

#tc .button-container button.button-dark:hover span {
  color: var(--Text);
}

#tc span,
#enableAutoRenewal {
  color: var(--Text);
  font-size: 16px;
}

#tc span,
#disableAutoRenewal {
    color: var(--Text);
    font-size: 16px;
}

    #step7 table tr td:first-of-type {
        padding: 0;
    }

#step7 .payment-details label {
  background-color: transparent;
  top: -23px;
  left: -5px;
  color: var(--TextLight);
}

#step7 .payment-details input {
  border: 1px solid var(--TextLight);
}

#step7 p.tooltip-paragraph {
  padding-top: 10px;
}

#step7 .right-content .card-expiry-cvc {
  display: flex;
  margin-top: 15px;
}

#step7 .right-content .card-expiry-cvc .form-group {
  width: 50%;
}
#cardExpiry {
  border-radius: 5px 0 0 5px;
}

#cardCvc {
  border-radius: 0 5px 5px 0;
  border-left: none !important;
}

#step7 .wrap .button-container {
  margin-left: auto;
}

#step7 label[for='tc1'] {
  padding-left: 33px;
}

@media (max-width: 1024px) {
  #step7 .wrap {
    flex-direction: column;
    gap: 50px;
    padding: 50px 0 20px 0;
  }

  #step7 .left-content {
    width: 100%;
    max-width: unset;
  }

  #step7 .right-content {
    margin-left: 0;
  }

  #step7 .review-container {
    flex-direction: column;
  }

  #step7 table {
    width: 100%;
  }

  #step7 .right-content .payment-details {
    width: 100%;
    border-left: none;
    margin-top: 50px;
    padding-left: 0;
  }
}

@media (max-width: 640px) {
  #step7 .right-content .background {
    padding: 20px;
  }
  #step7 table .product {
    flex-direction: column;
    align-items: start;
    gap: 5px;
  }

  #step7 table tr td {
    padding: 0;
    padding-bottom: 10px;
  }

  #step7 table tr td:first-of-type {
    padding-right: 10px;
  }

  #step7 .total td {
    padding-top: 10px;
  }
}

/**CHECKBOX*/
[type='checkbox']:not(:checked),
[type='checkbox']:checked,
[type='radio']:not(:checked),
[type='radio']:checked {
  position: absolute;
  left: 0;
  opacity: 0.001;
  z-index: 99;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

[type='checkbox']:not(:checked) + label,
[type='checkbox']:checked + label,
[type='radio']:not(:checked) + label,
[type='radio']:checked + label {
  position: relative;
  padding-left: 25px;
  font-size: 18px;
  line-height: 1.7;
  cursor: pointer;
  display: inline-block;
}

[type='checkbox']:not(:checked) + label:before,
[type='checkbox']:checked + label:before,
[type='radio']:not(:checked) + label:before,
[type='radio']:checked + label:before {
  content: '';
  position: absolute;
  left: 0px;
  top: 3px;
  width: 22px;
  height: 22px;
  border: 1px solid var(--Blue);
  border-radius: 20px !important;
  background: #fff;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 rgba(76, 76, 76, 0.2);
  -webkit-transition: all 0.275s;
  transition: all 0.275s;
}

[type='checkbox']:not(:checked) + label:after,
[type='checkbox']:checked + label:after,
[type='radio']:not(:checked) + label:after,
[type='radio']:checked + label:after {
  content: '' !important;
  position: absolute;
  top: 8.5px;
  left: 6px;
  font-size: 1.375em;
  color: var(--Blue);
  background-color: var(--Blue);
  border-radius: 20px !important;
  line-height: 0;
  transition: all 0.2s;
  width: 12px;
  height: 12px;
}

/* checked mark aspect changes */
[type='checkbox']:not(:checked) + label:after,
[type='radio']:not(:checked) + label:after {
  opacity: 0;
  -webkit-transform: scale(0) rotate(45deg);
  transform: scale(0) rotate(45deg);
}

[type='checkbox']:checked + label:after,
[type='radio']:checked + label:after {
  opacity: 1;
  -webkit-transform: scale(1) rotate(0);
  transform: scale(1) rotate(0);
}

/* Disabled checkbox */
[type='checkbox']:disabled:not(:checked) + label:before,
[type='radio']:disabled:not(:checked) + label:before,
[type='checkbox']:disabled:checked + label:before,
[type='radio']:disabled:checked + label:before {
  box-shadow: none;
  border-color: #101011;
  background-color: var(--Blue);
}

[type='checkbox']:disabled:checked + label:after,
[type='radio']:disabled:checked + label:after {
  color: #777;
}

[type='checkbox']:disabled + label,
[type='radio']:disabled + label {
  color: #aaa;
}

/* Accessibility */
[type='checkbox']:checked:focus + label:before,
[type='radio']:checked:focus + label:before,
[type='checkbox']:not(:checked):focus + label:before,
[type='radio']:not(:checked):focus + label:before {
  box-shadow: 0 0 3px 0px rgba(62, 10, 10, 0.3), 0 0 0 4px rgba(80, 80, 80, 0.3);
}

@media (max-width: 768px) {
  [type='checkbox']:not(:checked) + label:before,
  [type='checkbox']:checked + label:before {
    top: -1px;
  }
  [type='checkbox']:not(:checked) + label:after,
  [type='checkbox']:checked + label:after {
    top: 5px;
  }
}

@media (max-width: 640px) {
  [type='checkbox']:not(:checked) + label,
  [type='checkbox']:checked + label {
    font-size: 14px;
    text-align: left;
  }
}

.loader-container {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8); /* optional: semi-transparent background */
  z-index: 1000;
}

.flex-container {
    display: flex;
    gap: 10px;
}