/* google font import url */
@import url("https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap");

/* Base css start */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* font-family */
  --font-urbanist: "Urbanist", sans-serif;

  /* colors */
  --blue: #0353ac;
  --dark-blue: #032d67;
  --light-blue: #0db5e9;
  --gray: #7e7e7e;
  --dark-gray: #2b2b2b;
  --white: #fff;
  --black: #000;
  --border: #dddddd;
  --background: #f5f8f7;
  --green: #33cc79;
  --red: #ff8484;
}

body {
  font-family: var(--font-urbanist);
  color: var(--gray);
  background-color: var(--background);
  line-height: normal;
  font-weight: 500;
}

ol,
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style-type: none;
}

a,
button {
  transition: all 0.3s;
  border: 0;
}
a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
}

.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  padding-inline: 20px;
}

.section-spacer {
  margin-top: 120px;
}

.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 52px;
  background-color: var(--dark-blue);
  color: var(--white);
  padding-inline: 30px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 50px;
}
.theme-btn svg {
  color: currentColor;
}
.theme-btn svg path {
  stroke: currentColor;
  transition: all 0.3s;
}
.theme-btn:hover {
  background-color: var(--blue);
}
.theme-btn--transparent {
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--dark-blue);
  box-shadow: 0px 5px 10px 0px #00000012;
  padding-inline: 24px;
  gap: 7px;
}
.theme-btn span {
  color: var(--light-blue);
}
.theme-btn--transparent:hover {
  background-color: rgba(255, 255, 255, 0.5);
}
.theme-btn--sm {
  height: 34px;
  font-size: 12px;
  padding-inline: 15px;
}
.theme-btn--md {
  height: 42px;
  font-size: 14px;
  padding-inline: 20px;
}
.theme-btn--lg {
  height: 58px;
}
.theme-btn--xl {
  height: 62px;
}

.theme-btn--light-blue {
  background-color: var(--light-blue);
  color: var(--dark-blue);
}
.theme-btn--light-blue:hover {
  background-color: #66d3f4;
}

.theme-btn--white {
  background-color: var(--white);
  color: var(--dark-blue);
}
.theme-btn--white:hover {
  color: var(--white);
}

.theme-btn--white-2 {
  background-color: var(--white);
  border: 1px solid var(--dark-blue);
  color: var(--dark-blue);
}
.theme-btn--white-2:hover {
  background-color: var(--light-blue);
  border-color: var(--light-blue);
}

.theme-btn--blue {
  background-color: #0353ac1a;
  color: var(--blue);
}
.theme-btn--blue:hover {
  background-color: var(--blue);
  color: var(--white);
}

.theme-btn--dark-blue {
  background-color: #032d671f;
  color: var(--dark-blue);
}
.theme-btn--dark-blue:hover {
  background-color: var(--dark-blue);
  color: var(--white);
}

.theme-btn--blue-transparent {
  background-color: #0db5e93d;
  color: var(--white);
  border: 1px solid var(--light-blue);
}
.theme-btn--blue-transparent:hover {
  background-color: var(--light-blue);
}

.theme-btn--blue-2 {
  background-color: var(--blue);
}
.theme-btn--blue-2:hover {
  background-color: var(--dark-blue);
}

.section-dark-bg {
  background-color: #020618;
  padding-block: 100px;
  color: var(--border);
}

.section__header {
  margin-bottom: 40px;
}

.section__header-left {
  max-width: 810px;
}
.section__subtitle,
h5 {
  font-size: 18px;
  line-height: normal;
  margin-bottom: 15px;
  color: var(--dark-blue);
}
.section__title,
h2 {
  font-size: 60px;
  line-height: 1.167;
  color: var(--dark-gray);
  font-weight: 800;
  margin-bottom: 25px;
}
.section__title span,
h2 span {
  color: var(--blue);
}
.section__title--sm {
  font-size: 40px;
  line-height: 1.2;
}
.section__title--md {
  font-size: 48px;
  line-height: normal;
}
.section__subtitle--light-blue {
  color: var(--light-blue);
}
.section__title--white {
  color: var(--white);
}
.section__title--white span {
  color: var(--light-blue);
}

.section__header-divider {
  height: 3px;
  background-color: var(--light-blue);
  width: 63px;
}

h3 {
  font-size: 30px;
  color: var(--dark-gray);
}
h3 span {
  color: var(--blue);
}

h4 {
  color: var(--dark-gray);
}

.section__badge {
  padding: 6px 15px;
  background-color: #0353ac26;
  color: var(--dark-gray);
  margin-bottom: 40px;
}
.section__badge::before {
  content: "";
  width: 8px;
  height: 8px;
  background-color: var(--dark-blue);
  border-radius: 50%;
}

.text-base {
  font-size: 18px;
  line-height: normal;
}
.text-xs {
  font-size: 12px;
}
.text-sm {
  font-size: 14px;
  line-height: 20px;
}
.text-md {
  font-size: 20px;
  line-height: 1.5;
}
.text-lg {
  font-size: 24px;
  line-height: 1.41;
}

.tag-btns {
  gap: 10px;
}

/* Homepage hero refinements. Keep these scoped to the hero so the shared
   button and heading styles remain unchanged elsewhere. */
.hero .tag-btns {
  width: 100%;
  max-width: 686px;
  flex-wrap: nowrap !important;
  gap: 8px;
}
.hero .tag-btns .theme-btn--transparent {
  flex: 0 0 auto;
  min-width: 0;
  padding-inline: 24px;
  border: 0;
  color: var(--dark-blue);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 5px 10px #00000012;
  white-space: nowrap;
}
.hero .section__title > span {
  display: inline;
}
.hero__title-line {
  white-space: nowrap;
  color: inherit !important;
}
.hero__title-line strong {
  color: var(--blue);
  font: inherit;
}
.hero .tag-btns .theme-btn--transparent span {
  color: var(--light-blue);
  font-weight: inherit;
}
.hero .tag-btns .theme-btn--transparent:hover {
  background: rgba(255, 255, 255, 0.5);
}

@media (max-width: 767px) {
  .hero .tag-btns {
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 5px;
    scrollbar-width: none;
  }
  .hero .tag-btns::-webkit-scrollbar {
    display: none;
  }
  .hero .tag-btns .theme-btn--transparent {
    flex: 0 0 auto;
  }
}

.text-btn {
  color: var(--light-blue);
}
.text-btn:hover {
  text-decoration: underline;
}
.glass-bg {
  box-shadow:
    inset 0 0px 1px rgba(255, 255, 255, 0.4),
    inset 0 0px 1px rgba(255, 255, 255, 0.4),
    inset 1px 0 1px rgba(255, 255, 255, 0.4),
    inset -1px 0 1px rgba(255, 255, 255, 0.4),
    0 8px 32px rgba(0, 0, 0, 0.25) !important;
}

.text-blue {
  color: var(--blue) !important;
}
.text-light-blue {
  color: var(--light-blue) !important;
}
.text-dark-gray {
  color: var(--dark-gray) !important;
}
.text-green {
  color: var(--green) !important;
}
.two-row {
  grid-row: span 2 / span 2;
}
.two-col {
  grid-column: span 2 / span 2;
}
.pointer-events-none {
  pointer-events: none;
}

.divider {
  height: 1px;
  background-color: #c0c0c0;
  box-shadow: 0px 5px 10px 0px #0000000d;
}
.section-dark-bg .divider {
  background-color: #494e65;
}

/* card start */
.card {
  padding: 25px;
  border-radius: 24px;
  box-shadow: 0px 10px 20px 0px #00000012;
  color: inherit;
}
.card__icon {
  width: 66px;
  height: 66px;
  background-color: var(--dark-blue);
  margin-bottom: 20px;
}
.card__icon img {
  width: 36px;
}
.card__icon--light-blue {
  background-color: var(--light-blue);
}
.card__icon--lg {
  width: 80px;
  height: 80px;
  border-radius: 20px;
}
.card__icon--lg img {
  width: 50px;
}
.card__title {
  margin-bottom: 10px;
  gap: 10px;
}
.card__desc {
  margin-bottom: 32px;
}
.card__title--xl {
  font-size: 42px;
}
.card__header {
  margin-bottom: 10px;
}
.card__badge {
  padding: 10px 15px;
  background-color: #0db5e912;
  color: var(--light-blue);
  flex-shrink: 0;
}
.card__badge::before {
  content: "";
  width: 6px;
  height: 6px;
  background-color: var(--light-blue);
  border-radius: 50%;
}
.card__badge--green {
  background-color: #33cc7926;
  color: var(--dark-gray);
}
.card__badge--green::before {
  background-color: var(--green);
}
.card__badge--sm {
  font-size: 10px;
  padding: 7px 12px;
}
.card__divider {
  height: 1px;
  background: #00000033;
}
.card__title img {
  margin-top: 3px;
}
.card__inner-card {
  padding: 18px;
  background-color: var(--background);
  border: 1px solid #e0e0e0;
  border-radius: 15px;
}
.card__tag {
  background-color: var(--light-blue);
  color: var(--dark-blue);
  padding: 15px 40px;
  border-top-right-radius: inherit;
  border-bottom-left-radius: inherit;
}
.card__tag--md {
  padding: 10px 15px;
  border-radius: 0 0 10px 10px;
}
.card__left {
  max-width: 690px;
}
.card__meta {
  color: var(--dark-blue);
}
.card__meta-divider {
  width: 6px;
  height: 6px;
  background-color: var(--green);
}
.card__price-wrap {
  gap: 5px;
}
.card__price {
  color: var(--dark-blue);
  line-height: normal;
}
.card__subtitle {
  margin-bottom: 10px;
}

.card--light-mint {
  background-color: var(--background);
  border-color: #e0e0e0;
}
/* card end */

/* form start */
.form {
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px;
}
.form__input-label {
  color: var(--dark-blue);
  line-height: normal;
  margin-bottom: 7px;
}
.form__input-field {
  height: 42px;
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding-inline: 15px;
  font-size: 14px;
  color: var(--dark-gray);
  font-weight: 500;
}
.form__input-field:focus {
  outline: none;
}
.form__submit-btn {
  border: 1px solid var(--border);
}

.form__input--lg .form__input-field {
  height: 58px;
  font-size: 18px;
  border-radius: 10px;
  padding-inline: 20px;
}
.form__input--light-mint .form__input-field {
  background-color: var(--background);
  border-color: #e0e0e0;
}
.form__input-field--select {
  appearance: none;
}
.form__input-chevron {
  width: 15px;
  right: 20px;
  pointer-events: none;
}
.form__submit-btn.theme-btn--lg {
  border-radius: 10px;
}
.form__input--dark .form__input-label {
  color: var(--border);
}
.form__input--dark .form__input-field {
  background-color: #00000012;
}
.form__input--dark .form__input-field::placeholder {
  color: inherit;
}
.form__input--md .form__input-label {
  margin-bottom: 10px;
}
.form__input--md .form__input-field {
  height: 52px;
  padding-inline: 20px;
}
.form__title {
  color: var(--blue);
}
.form .row {
  --bs-gutter-x: 20px;
  --bs-gutter-y: 20px;
}
.form__input-field--textarea {
  min-height: 160px;
  resize: none;
  padding-block: 20px;
}
/* form end */

/* slider-nav start */
.slider-nav {
  gap: 30px;
}
.slider-nav__btn {
  width: 48px;
  height: 48px;
  background-color: var(--white);
  box-shadow:
    0px 0px 0px 0px #00000014,
    0px 6.9px 15.78px 0px #00000012,
    0px 28.6px 28.6px 0px #0000000f,
    0px 64.1px 38.46px 0px #0000000a,
    0px 114.4px 45.36px 0px #00000003,
    0px 178.5px 50.29px 0px #00000000;
}
.slider-nav__btn img {
  width: 11px;
  transition: all 0.3s;
}
.slider-nav__btn:hover {
  background-color: var(--light-blue);
}
.slider-nav__btn:hover img {
  filter: brightness(100);
}
/* slider-nav end */

/* toggle switch start */
.vps-plan .section__header p {
  max-width: 660px;
}
.toggle__switch {
  width: 42px;
  height: 24px;
  background-color: #35384a;
  border-radius: 30px;
  position: relative;
  display: block;
}
.toggle__switch::after {
  content: "";
  width: 20px;
  height: 20px;
  background-color: var(--light-blue);
  border-radius: 50%;
  transition: all 0.3s;
  position: absolute;
  left: 2px;
  top: 2px;
}
.toggle__input:checked ~ .toggle__switch::after {
  transform: translateX(18px);
}
.toggle {
  cursor: pointer;
}
.toggle__input:checked ~ .toggle__text--after {
  color: var(--blue);
  font-weight: 600;
}
.toggle__text--before {
  color: var(--blue);
  font-weight: 600;
}
.toggle__input:checked ~ .toggle__text--before {
  color: var(--gray);
  font-weight: 500;
}
.toggle__text {
  transition: all 0.3s;
}
/* toggle switch end */

/* radio-btn start */
.radio-container {
  cursor: pointer;
}
.radio-btn {
  width: 20px;
  height: 20px;
  border: 1px solid #d0d0d0;
  transition: all 0.3s;
}
.radio-btn::after {
  content: "";
  width: 12px;
  height: 12px;
  background-color: var(--blue);
  border-radius: 50%;
  position: absolute;
  opacity: 0;
  transition: all 0.3s;
}
.radio-input:checked ~ .radio-btn {
  border-color: var(--blue);
}
.radio-input:checked ~ .radio-btn::after {
  opacity: 1;
}
/* radio-btn end */

/* progress-circle start */
.progress-circle {
  background-color: #373a48;
  border-radius: 50%;
}
.progress-circle-bar {
  --percentage: 92; /* change this value to update the progress */
  --size: 120px;
  --thickness: 16px;
  --color: var(--light-blue);
  --track: transparent;

  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: conic-gradient(var(--color) calc(var(--percentage) * 1%), var(--track) 0);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* rounded caps at the start and end of the arc */
.progress-circle-bar::before,
.progress-circle-bar::after {
  content: "";
  position: absolute;
  width: var(--thickness);
  height: var(--thickness);
  border-radius: 50%;
  background: var(--color);
  top: 0;
  left: calc(50% - var(--thickness) / 2);
}

.progress-circle-bar::after {
  transform: rotate(calc(var(--percentage) * 3.6deg));
  transform-origin: 50% calc(var(--size) / 2);
}

/* inner circle cutout to create the ring */
.progress-circle .hole {
  position: absolute;
  width: calc(var(--size) - var(--thickness) * 2);
  height: calc(var(--size) - var(--thickness) * 2);
  background: #141728;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-circle .label {
  color: #ffffff;
  font-size: 30px;
  font-weight: 600;
  z-index: 1;
}
/* progress-circle end */

/* theme-tabs start */
.theme-tabs {
  width: fit-content;
  background-color: var(--dark-blue);
  padding: 7px;
  border-radius: 10px;
  box-shadow: 0px 10px 20px 0px #00000012;
}
.theme-tab {
  color: #dddddd;
  font-weight: 400;
  background-color: transparent;
  padding: 7px 12px;
  border-radius: 7px;
  border: 1px solid transparent;
  gap: 5px;
  font-size: 14px;
  font-weight: 400;
  position: relative;
}
.theme-tab svg path {
  stroke: currentColor;
}
.theme-tab.active {
  background: var(--light-blue);
  border-color: var(--light-blue);
  color: var(--dark-blue);
  font-weight: 600;
}
.theme-tab:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 12px;
  background-color: #999999;
  border-radius: 2px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -4px;
}
.theme-tab.active::after {
  display: none;
}
.theme-tabs.glass-bg {
  background-color: #0000001f;
}

.theme-tab__num {
  height: 16px;
  min-width: 16px;
  background-color: #21263d;
  border-radius: 5px;
  color: #fff;
  padding-inline: 4px;
}
.theme-tab.active .theme-tab__num {
  background-color: #020618;
}
/* theme-tabs end */

.white-outline::before {
  content: "";
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  background-color: #fff0;
  position: absolute;
  top: -10px;
  left: -10px;
  box-shadow: 0px 10px 20px 0px #0000001a;
  z-index: -1;
  border-radius: 40px;
}

/* Base css end */

/* header start */
.header {
  top: 40px;
}
.logo img {
  width: 170px;
}
.header__wrapper {
  position: relative;
}
.header__right {
  gap: 40px;
}
.header__menu {
  gap: 40px;
}
.header__link {
  font-size: 18px;
  color: var(--gray);
  padding-block: 8px;
}
.header__link svg {
  width: 16px;
  transition: all 0.3s;
}
.header__menu-item:hover .header__link {
  color: var(--dark-gray);
}
.header__menu-item:hover .header__link svg {
  transform: rotate(180deg);
}

.header__submenu {
  background-color: #fff;
  padding-block: 8px;
  min-width: 180px;
  border-radius: 12px;
  box-shadow: 0px 10px 20px 0px #0000001a;
  top: calc(100% + 40px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s;
}
.header__menu-item:hover .header__submenu {
  top: 100%;
  opacity: 1;
  visibility: visible;
}
.header__submenu-link {
  font-size: 18px;
  line-height: normal;
  padding: 8px 16px;
}
.header__submenu-link:hover {
  color: var(--dark-blue);
}

.header__toggle {
  width: 40px;
  height: 40px;
  background-color: var(--dark-blue);
  border-radius: 8px;
}
.header__toggle svg {
  width: 24px;
}
.header__toggle:hover {
  background-color: var(--blue);
}

.header--color-2 .header__menu-item:hover .header__link {
  color: var(--white);
}


.megamenu {
  padding: 40px 100px;
  border-radius: 40px;
  z-index: 10;
  box-shadow: 0px 10px 20px 0px #00000012;
  top: 150%;
  opacity: 0;
  visibility: hidden;
  transition: all .4s;
}
.header__menu-item:hover .megamenu {
  top: 100%;
  opacity: 1;
  visibility: visible;
}
.megamenu__wrapper {
  grid-template-columns: 1fr 1fr 192px;
  gap: 58px;
}
.megamenu__menu {
  gap: 10px;
}
.megamenu__item {
  padding: 19px;
  background-color: var(--background);
  border: 1px solid #E0E0E0;
  border-radius: 20px;
}
.megamenu__icon {
  width: 60px;
  height: 60px;
  border-radius: 20px;
  background-color: var(--dark-blue);
}
.megamenu__icon img {
  width: 36px;
}
.megamenu__item h6 {
  color: var(--dark-gray);
  margin-bottom: 2px;
}

.megamenu__card {
  padding: 19px;
  border-radius: 20px;
  gap: 20px;
}
.card__thumb {
  border-radius: 20px;
}
.megamenu__contact {
  gap: 40px;
}
.megamenu__contact-item h4 {
  margin-bottom: 10px;
}
.megamenu .social-icons {
  gap: 8px;
}
.megamenu .social-icon {
  width: 40px;
  height: 40px;
}
.megamenu .social-icon img {
  width: 24px;
}
/* header end */

/* offcanvas menu start */
.offcanvas__link {
  font-size: 18px;
  color: var(--dark-blue);
  padding: 12px 0;
}
.offcanvas__menu li {
  border-bottom: 1px solid var(--dark-blue);
}
.offcanvas__submenu {
  padding: 0 0 15px 15px;
  gap: 10px;
}
.offcanvas__submenu-link {
  color: var(--dark-blue);
}
.offcanvas__link[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.offcanvas__link svg {
  transition: all 0.3s;
}
/* offcanvas menu end */

/* hero section start */
.hero {
  padding-block: 140px 54px;
}
.hero::before {
  content: "";
  width: 100%;
  height: 754px;
  background-image: linear-gradient(180deg, #d3e5ff 0%, var(--background) 100%);
  position: absolute;
  top: 0;
  left: 0;
}
.hero__wrapper {
  gap: 52px;
}
.hero__thumb {
  width: 38%;
}
.hero__content {
  gap: 40px;
  padding-block: 24px;
}

.searchbox {
  padding-right: 10px;
  box-shadow: 0px 10px 20px 0px #0000001a;
  max-width: 686px;
  width: 100%;
}
.searchbox__input {
  height: 72px;
  background-color: transparent;
  padding-inline: 40px;
  color: var(--dark-blue);
}
.searchbox__input:focus {
  outline: none;
}
.searchbox__input::placeholder {
  color: var(--gray);
}

.hero__features {
  gap: 25px;
}
.hero__features-item {
  gap: 5px;
  color: var(--dark-blue);
}
.hero__features-item img {
  width: 18px;
}

.hero__bg {
  opacity: 5%;
}
.hero__lotus-img {
  max-width: 1440px;
  opacity: 60%;
}

.hero__wrapper .row {
  --bs-gutter-x: 52px;
  --bs-gutter-y: 40px;
}
.hero__pricing {
  box-shadow: 0px 10px 20px 0px #0000001a;
  padding: 20px 25px;
  border-radius: 25px;
  margin-bottom: 40px;
  gap: 24px;
}
.hero__pricing-price h3 {
  font-size: 40px;
  color: var(--dark-blue);
  font-weight: 800;
}
.hero__pricing-price {
  gap: 5px;
}
.hero__pricing-price span {
  margin-bottom: 10px;
}
.hero__pricing-divider {
  width: 1px;
  height: 70px;
  background-color: var(--border);
}
.hero__pricing-features {
  gap: 10px;
}
.vps-hosting .hero__wrapper {
  margin-right: -20px;
}
.vps-hosting .hero__thumb {
  border: 10px solid #0206180d;
  border-radius: 30px;
  box-shadow: 0px 10px 20px 0px #0000000d;
}

.hero--style-2 {
  background-size: cover;
  background-position: center;
}
.hero--style-2::after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--black);
  opacity: 0.7;
  position: absolute;
  top: 0;
  left: 0;
}
.hero--style-2::before {
  display: none;
}
.hero--style-2 .hero__subtitle {
  color: var(--light-blue);
}
.hero--style-2 .hero__title {
  font-size: 80px;
  color: var(--white);
}
.hero--style-2 .hero__title span {
  color: var(--light-blue);
}
.hero--style-2 .hero__desc {
  color: rgba(255, 255, 255, 0.7);
  max-width: 785px;
}
.hero--style-2 .hero__content {
  max-width: 900px;
}

.domain-registration .hero {
  padding-block: 198px 403px;
}

.web-hosting .hero {
  padding-block: 172px 270px;
}
.web-hosting .hero__content {
  max-width: 950px;
}
.web-hosting .hero__desc {
  max-width: 860px;
}

.uk-domain-registration .hero {
  padding-block: 172px 72px;
}
.uk-domain-registration .hero__wrapper {
  gap: 40px;
}
.hero__card {
  width: 40%;
  background-color: #020618;
  box-shadow: 0px 10px 20px 0px #0000001a;
  padding: 40px;
  border-radius: 40px;
  color: var(--border);
}
.hero__card-subtitle {
  color: var(--light-blue);
  margin-bottom: 10px;
}
.hero__price-selection {
  gap: 10px;
}
.hero__price-option {
  background-color: #ffffff26;
  padding: 12px 25px;
  gap: 10px;
}
.hero__price-option-check {
  width: 20px;
}

.hero__tip-title img {
  width: 18px;
  margin-top: 2px;
}
/* hero section end */

/* Homepage banner: preserved customised dev-v2 presentation. */
.hero--home {
  background-image: linear-gradient(180deg, #d3e5ff 0%, var(--background) 100%);
}
.hero--home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  width: auto;
  height: auto;
  top: 0;
  left: 0;
  background-image: url("../img/backgrounds/hero-london-datacentre.png");
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.28;
}
@media (min-width: 768px) {
  .hero--home .hero__thumb {
    width: 43%;
    max-width: 560px;
    align-self: flex-end;
    filter: drop-shadow(0 24px 28px rgba(4, 36, 89, 0.16));
  }

  .hero--home .hero__mascot {
    display: block;
    max-height: 760px;
    object-fit: contain;
    object-position: center bottom;
  }
}
.hero--home .hero__bg,
.hero--home .hero__lotus-img {
  display: none !important;
}
.hero--home .searchbox__input::-webkit-search-cancel-button,
.hero--home .searchbox__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
.hero--home .searchbox__clear {
  display: none;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  margin-right: 6px;
  border: 0;
  border-radius: 50%;
  color: #526a84;
  background: #edf4fa;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.hero--home .searchbox__clear.is-visible {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hero--home .searchbox__clear:hover,
.hero--home .searchbox__clear:focus-visible {
  color: #073a76;
  background: #dcecf8;
  outline: none;
}

/* overview section start */
.overview__wrapper {
  margin-top: -54px;
  padding: 20px 40px;
  box-shadow: 0px 10px 20px 0px #0000001a;
  border-radius: 20px;
  gap: 48px;
}
.overview__icon {
  width: 60px;
  height: 60px;
  background-color: var(--light-blue);
}
.overview__icon img {
  width: 36px;
}
.overview__divider {
  height: 60px;
  width: 2px;
  background-color: #d9d9d9;
  border-radius: 10px;
}
.overview .white-outline::before {
  border-radius: 30px;
}
/* overview section end */

/* service section start */
.service .section__header {
  max-width: 930px;
}
.service .section__header p {
  max-width: 750px;
}
.service__cards {
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.service__card:nth-child(2n) {
  margin-top: 100px;
}
.service .tips-card {
  margin-top: 40px;
}
.tips-card {
  padding: 40px;
  background-color: #020618;
  box-shadow: 0px 10px 20px 0px #00000012;
  border-radius: 30px;
  gap: 20px;
  color: var(--border);
}
.tips-card__icon {
  width: 78px;
  height: 78px;
  background-color: var(--light-blue);
  border-radius: 20px;
}
.tips-card__icon img {
  width: 48px;
}
.tips-card__title {
  margin-bottom: 10px;
}
/* service section end */

/* site-generator section start */
.site-generator__container {
  padding: 40px;
  border-radius: 24px;
  box-shadow: 0px 10px 20px 0px #00000012;
}
.site-generator__header {
  gap: 10px;
}
.site-generator__header-icon {
  width: 30px;
  margin-top: 3px;
}
.site-generator__header-title {
  font-size: 30px;
  font-weight: 800;
  color: var(--dark-gray);
  margin-bottom: 10px;
}
.site-generator__wrapper {
  margin-left: 40px;
  grid-template-columns: 6fr 7fr;
  gap: 40px;
}
.select-demo__items {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.select-demo__item-inner {
  background-color: var(--background);
  border: 1px solid var(--border);
  padding: 11px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s;
}
.select-demo__item h6 {
  color: var(--dark-blue);
  transition: all 0.3s;
}
.select-demo__item input:checked ~ .select-demo__item-inner {
  background-color: var(--dark-blue);
  border-color: var(--dark-blue);
  color: var(--border);
}
.select-demo__item input:checked ~ .select-demo__item-inner h6 {
  color: var(--white);
}

.site-generator__btn {
  border-radius: 12px;
  margin-top: 40px;
  font-size: 14px;
}

.site-generator__preview img {
  filter: drop-shadow(0px 10px 20px #0000001a);
}
/* site-generator section end */

/* how-it-works section start */
.how-it-works .section__header {
  max-width: 620px;
}
.how-it-works__steps {
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.how-it-works__step-icon {
  width: 80px;
}
.how-it-works__step-title {
  color: #0e0f0b;
}
.how-it-works__step-desc {
  color: #707070;
  line-height: 1.56;
}
.how-it-works__step:nth-child(2n) {
  padding-top: 80px;
}
.how-it-works__step-arrow {
  width: 155px;
  right: -89px;
  top: 55px;
}
/* how-it-works section end */

/* pricing section start */
.pricing .section__header p {
  max-width: 580px;
}
.pricing__cards {
  grid-template-columns: repeat(3, 1fr);
}
.pricing__card {
  padding: 40px;
  border-radius: 40px;
}
.pricing__icon {
  width: 72px;
  height: 72px;
  background-color: #eaf3ff;
}
.pricing__subtitle {
  line-height: 1;
}
.pricing__title {
  font-size: 24px;
  color: var(--dark-gray);
}
.pricing__title--sm {
  font-size: 20px;
}
.pricing__desc {
  line-height: 1.67;
}
.pricing__price h3 {
  font-size: 54px;
  line-height: 1.22;
  color: var(--dark-gray);
}
.pricing__price span {
  margin-bottom: 12px;
  line-height: 1.1;
}
.pricing__price {
  margin-bottom: 10px;
}
.pricing__features h5 {
  color: var(--dark-gray);
}
.pricing__features-item {
  gap: 14px;
}
.pricing__features-list {
  margin-right: -6px;
}
.pricing__features-item img {
  width: 26px;
  flex-shrink: 0;
}
.pricing__tags {
  gap: 10px;
  padding-block: 60px 40px;
}

.domain-registration .pricing .section__header p {
  max-width: 780px;
}

.web-hosting .pricing .section__header {
  max-width: 930px;
}
.web-hosting .pricing .section__header p {
  max-width: 750px;
}

.uk-domain-registration .pricing .section__header {
  max-width: 930px;
}
.uk-domain-registration .pricing .section__header p {
  max-width: 840px;
}

.uk-domain-registration .pricing__card .theme-btn {
  margin-top: 40px;
}

.pricing__card .card__tag {
  right: 35px;
}

.pricing__transfer {
  margin-top: 40px;
  padding: 40px;
  border-radius: 30px;
}
.pricing__transfer .card__left {
  max-width: 710px;
}

.pricing--dark .section__header {
  max-width: 100% !important;
}

.pricing__card.glass-bg {
  background-color: #ffffff12;
}

.pricing--dark .pricing__price h3 {
  font-size: 30px;
}
.pricing--dark .pricing__price span {
  margin-bottom: 7px;
}
/* pricing section end */

/* features section start */
.features__wrapper {
  grid-template-columns: 315fr 448fr 383fr;
  gap: 25px;
}

.features__list {
  margin-top: 30px;
}
.features__item {
  gap: 15px;
  padding-bottom: 14px;
  border-bottom: 1px solid #cacaca;
}
.features__icon {
  width: 48px;
  height: 48px;
  background-color: var(--dark-blue);
}
.features__icon img {
  width: 28px;
}
.features__title {
  color: var(--dark-gray);
  line-height: 1.2;
}
.features__card {
  padding: 15px 15px 15px 18px;
  box-shadow: 0px 10px 20px 0px #0000001a;
  border-radius: 40px;
}
.features__card-logo {
  width: 48.75%;
}
.features__overview {
  width: 51.25%;
}
.features__overview {
  padding: 24px 19px;
  background-color: var(--background);
  border: 1px solid #d6e6e1;
  border-radius: 24px;
  gap: 45px;
}
.features__overview-title {
  font-size: 30px;
  color: var(--blue);
}
.features__support-thumb {
  width: 59%;
  margin-right: -36px;
  margin-top: 80px;
  border-bottom: 2px solid #d9d9d9;
}
.features__support-card {
  padding: 15px;
  border-radius: 15px;
  width: 50%;
  filter: drop-shadow(0px 10px 20px #0000001a);
}
.features__support-title {
  color: var(--dark-gray);
  line-height: 17px;
  margin-bottom: 10px;
}
.features__support-desc {
  max-width: 136px;
}
.features__support-card-shape {
  width: 52px;
  position: absolute;
  top: 100%;
  left: 20px;
}
/* features section end */

/* testimonial section start */
.testimonial__wrapper {
  margin-block: 117px 60px;
}
.testimonial__wrapper .row {
  --bs-gutter-x: 20px;
  --bs-gutter-y: 40px;
}
.testimonial__profile {
  margin-right: 20px;
  background-image: url("../img/backgrounds/testimonial-img-bg.jpg");
  background-size: cover;
  background-position: center;
  padding: 20px;
  border-radius: 40px;
}
.testimonial__profile--brand {
  background: #071d42;
  overflow: hidden;
}
.testimonial__profile-img.testimonial__brand-stage {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 34px;
  background: #f5faff;
  border-color: #d7e5f1;
  box-shadow: none;
}
.testimonial__brand-stage::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -70px;
  top: -70px;
  border: 36px solid rgba(0, 183, 235, 0.09);
  border-radius: 50%;
}
.testimonial__brand-intro,
.testimonial__brand-list,
.testimonial__brand-proof {
  position: relative;
  z-index: 1;
}
.testimonial__brand-kicker {
  display: block;
  margin-bottom: 10px;
  color: #007fc9;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.testimonial__brand-intro h3 {
  margin-bottom: 10px;
  color: var(--dark-blue);
  font-size: 30px;
  line-height: 1.08;
}
.testimonial__brand-intro p {
  max-width: 320px;
  margin: 0;
  color: #5d6978;
  font-size: 14px;
  line-height: 1.55;
}
.testimonial__brand-list {
  border-top: 1px solid #d7e5f1;
  border-bottom: 1px solid #d7e5f1;
}
.testimonial__brand-item {
  min-height: 78px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
}
.testimonial__brand-item + .testimonial__brand-item {
  border-top: 1px solid #d7e5f1;
}
.testimonial__brand-item span {
  color: #607086;
  font-size: 12px;
  white-space: nowrap;
}
.testimonial__brand-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}
.testimonial__brand-logo--dmm {
  width: 220px;
}
.testimonial__brand-logo--oxbys {
  width: 150px;
}
.testimonial__brand-proof {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.testimonial__brand-proof strong {
  color: var(--dark-blue);
  font-size: 24px;
}
.testimonial__brand-proof span {
  color: #607086;
  font-size: 12px;
}
.testimonial__profile-img {
  height: 464px;
  background-color: #ffffff0d;
  border: 1px solid #ffffff17;
  box-shadow: 9px -7px 17px -3px #ffffff14 inset;
  border-radius: 30px;
}
.testimonial__profile-img img {
  border-radius: 0 0 30px 30px;
}
.testimonial__profile-info {
  margin-top: 30px;
}
.testimonial__profile-designation {
  color: var(--light-blue);
}
.testimonial__header {
  margin-bottom: 30px;
}
.testimonial__reviewer {
  gap: 15px;
  margin-bottom: 10px;
}
.testimonial__reviewer-avatar {
  width: 60px;
  height: 60px;
}
.testimonial__reviewer-avatar--logo,
.testimonial__reviewer-avatar--initials {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #d9e6f2;
  background: #fff;
}
.testimonial__reviewer-avatar--logo img {
  width: 82%;
  height: 82%;
  object-fit: contain;
}
.testimonial__reviewer-avatar--initials {
  color: #fff;
  background: var(--dark-blue);
  border-color: var(--dark-blue);
  font-weight: 700;
  letter-spacing: 0;
}
.testimonial__reviewer-name {
  color: var(--dark-gray);
  margin-bottom: 2px;
}
.testimonial__reviewer-role {
  color: var(--blue);
}
.testimonial__quote-icon {
  width: 36px;
  opacity: 0.22;
}
.testimonial__card-slider {
  max-width: 644px;
  padding-block: 48px;
  margin-bottom: -48px;
}
.testimonial__card {
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0px 10px 20px 0px #0000001a;
}
.testimonial__stars {
  gap: 9px;
  margin-block: 2px 18px;
}
.testimonial__card .testimonial__reviewer {
  gap: 12px;
}
.testimonial__card .testimonial__reviewer-avatar {
  width: 48px;
  height: 48px;
}
.testimonial__card-quote-icon {
  width: 48px;
}
/* testimonial section end */

/* faq section start */
.faq__wrapper {
  grid-template-columns: 6.4fr 5fr;
  gap: 60px;
}
.faq__accordion {
  gap: 12px;
}
.accordion-item {
  border-radius: 10px !important;
  overflow: hidden;
  box-shadow: 0px 5px 10px 0px #0000000d;
}
.accordion-button {
  padding: 15px 20px;
  color: var(--dark-gray) !important;
  line-height: 1.2;
}
.accordion-button span {
  color: inherit;
}
.accordion-button::after {
  display: none;
}

.accordion-button-icon {
  width: 24px;
  transition: all 0.3s;
}
.accordion-button[aria-expanded="true"] .accordion-button-icon {
  transform: rotate(180deg);
}
.accordion-body {
  padding: 0 40px 20px 20px;
  color: var(--gray);
  line-height: 1.33;
}

.faq__search {
  max-width: 980px;
  width: 100%;
}
.faq__search-input {
  height: 64px;
  box-shadow: 0px 5px 10px 0px #0000000d;
  border-radius: 15px;
  padding-inline: 47px 20px;
  color: var(--gray);
}
.faq__search-input::placeholder {
  color: var(--gray);
}
.faq__search-input:focus {
  outline: none;
}
.faq__search-icon {
  width: 20px;
  left: 20px;
  pointer-events: none;
}
/* faq section end */

/* blog section start */
.blog__thumb {
  border-radius: 30px;
  box-shadow: 0px 15px 30px 0px #00000026;
}
.blog__thumb img {
  aspect-ratio: 384/254;
  transition: all 1s ease-in-out;
}
.blog__thumb:hover img {
  transform: scale(1.1);
}

.blog__rating {
  top: 20px;
  right: 20px;
  background-color: #2b2b2b33;
  padding: 5px 10px;
}
.blog__card {
  gap: 20px;
}
.blog__title {
  color: var(--dark-gray);
  line-height: 1.2;
  margin-bottom: 10px;
}
.blog__desc {
  line-height: 1.56;
}
.blog__date {
  color: var(--blue);
}
.blog__slider {
  margin-bottom: 60px;
}
/* blog section end */

/* brands section start */
.brands__logo img {
  height: 60px;
}
/* brands section end */

/* cta section start */
.cta__wrapper {
  padding: 60px;
  border-radius: 40px;
  background-color: var(--dark-blue);
}
.cta__content {
  max-width: 880px;
}
.cta__title {
  max-width: 674px;
}
.cta__desc {
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.56;
  margin-bottom: 40px;
}
.vps-hosting .cta__desc {
  max-width: 560px;
}

.uk-domain-registration .cta__title,
.contact-page .cta__title {
  max-width: 100%;
}
.uk-domain-registration .cta__desc,
.contact-page .cta__desc {
  max-width: 820px;
}
/* cta section end */

/* footer start */
.footer::before {
  content: "";
  width: 100%;
  height: 880px;
  background-image: linear-gradient(0deg, #d3e5ff 0%, #f5f8f7 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
}
.footer__wrapper {
  gap: 40px;
}
.footer__widget--intro {
  max-width: 331px;
}
.footer__desc {
  line-height: 1.625;
}
.social-icon {
  width: 50px;
  height: 50px;
  border: 1px solid var(--dark-gray);
}
.social-icon img {
  width: 30px;
}
.social-icon:hover {
  background-color: var(--white);
}
.social-icons {
  gap: 10px;
}
.footer__widget-title {
  color: var(--dark-gray);
}
.footer__links {
  gap: 15px;
}
.footer__link:hover {
  color: var(--dark-blue);
}
.footer__copyright {
  padding-block: 25px 30px;
  border-top: 1px solid #c0c0c0;
  margin-top: 52px;
}
.footer__copyright-links {
  gap: 8px;
}
.footer__copyright-links a:hover {
  color: var(--dark-blue);
}
/* footer end */

/* infrastructure section start */
.infrastructure {
  padding-top: 72px;
}
.infrastructure .section__header {
  max-width: 930px;
}
.infrastructure .section__header p {
  max-width: 750px;
}
.infrastructure .row {
  --bs-gutter-x: 30px;
  --bs-gutter-y: 40px;
}
.infrastructure__icon {
  width: 80px;
  height: 80px;
  border-radius: 20px;
}
.infrastructure__icon img {
  width: 50px;
}
.infrastructure__title {
  color: var(--dark-gray);
}
/* infrastructure section end */

/* vps-plan section start */
.vps-plan__type {
  box-shadow: 0px 5px 10px 0px #0000000d;
  border-radius: 25px;
  padding: 12px 85px;
  gap: 24px;
}
.vps-plan__type-item--popular {
  background-color: var(--dark-blue);
  border-radius: 15px;
  padding: 20px;
  width: 280px;
}
.vps-plan__type-item--popular p {
  color: rgba(255, 255, 255, 0.7);
}
.vps-plan__type-badge {
  font-size: 12px;
  padding: 5px 15px;
  color: var(--dark-blue);
  background-color: var(--light-blue);
  top: -12px;
  white-space: nowrap;
}
.vps-plan__divider {
  width: 1px;
  height: 48px;
  background-color: #d9d9d9;
}
.vps-plan__detail {
  padding: 40px;
  border-radius: 40px;
  box-shadow: 0px 10px 20px 0px #0000000d;
}
.vps-plan__heading {
  gap: 10px;
  margin-bottom: 10px;
}
.vps-plan__tag {
  font-size: 12px;
  color: var(--dark-blue);
  background-color: #032d671a;
  padding: 10px 15px;
}
.vps-plan__price-box {
  padding: 15px 20px;
  background-color: #032d6712;
  border-radius: 15px;
}
.vps-plan__price h3 {
  color: var(--dark-blue);
}
.vps-plan__price span {
  margin-bottom: 10px;
}
.vps-plan__heading {
  gap: 10px;
  margin-bottom: 10px;
}
.vps-plan__tag {
  font-size: 12px;
  color: var(--dark-blue);
  background-color: #032d671a;
  padding: 10px 15px;
}
.vps-plan__price-box {
  padding: 15px 20px;
  background-color: #032d6712;
  border-radius: 15px;
}
.vps-plan__price h3 {
  color: var(--dark-blue);
}
.vps-plan__price span {
  margin-bottom: 10px;
}
.vps-plan__detail-divider {
  height: 1px;
  background-color: #c0c0c0;
  border-radius: 2px;
  box-shadow: 0px 5px 10px 0px #0000000d;
  margin-block: 40px;
}
.vps-plan__specs .row {
  --bs-gutter-x: 12px;
  --bs-gutter-y: 20px;
}
.vps-plan__spec-card {
  background-color: #f5f8f7;
  border: 1px solid #e0e0e0;
  padding: 20px;
  border-radius: 24px;
}
.vps-plan__spec-icon {
  width: 48px;
  height: 48px;
  background-color: var(--light-blue);
}
.vps-plan__spec-icon img {
  width: 28px;
}
.vps-plan__spec-value {
  color: #0e0f0b;
}
.vps-plan__spec-name {
  color: #0e0f0b;
  margin-bottom: 10px;
}
.vps-plan__spec-bar {
  height: 8px;
  border-radius: 10px;
  overflow: hidden;
  background-color: rgba(208, 208, 208, 0.55);
}
.vps-plan__spec-bar-fill {
  height: 100%;
  background-color: var(--light-blue);
  border-radius: inherit;
}
.vps-plan__spec-feature {
  margin-top: 25px;
}
.vps-plan__spec-feature-icon {
  width: 20px;
}
.vps-plan__comparison {
  margin-top: 60px;
}
.vps-plan__table-container {
  border: 1px solid #c0c0c0;
  background-color: var(--white);
  box-shadow: 0px 10px 20px 0px #0000000d;
  border-radius: 30px;
  overflow: hidden;
}
.vps-plan__table th {
  background-color: #020618;
  padding: 12px 20px;
}
.vps-plan__table th p {
  color: #ffffffb2;
}
.vps-plan__table th:first-child {
  padding-inline: 40px;
}
.vps-plan__table td {
  color: #0e0f0b;
  padding: 20px 18px;
  border-bottom: 1px solid #c0c0c0;
}
.vps-plan__table tr:last-child td {
  border-bottom: 0;
}
.vps-plan__table td:first-child {
  background-color: #f5f8f7;
  border-right: 1px solid #c0c0c0;
  padding-inline: 40px;
}
.vps-plan__table .target-workloads td:not(:first-child) {
  color: var(--gray);
}
.vps-plan__table .deploy-action td:not(:first-child) {
  padding-block: 14px;
}
/* vps-plan section end */

/* panel section start */
.panel .section__header {
  max-width: 830px;
}
.panel__boundary {
  padding: 40px;
  gap: 48px;
  box-shadow: 0px 5px 10px 0px #0000000d;
  border-radius: 25px;
}
.panel__boundary h5 {
  margin-bottom: 10px;
}
.panel__boundary-divider {
  width: 1px;
  height: 80px;
  background-color: #d9d9d9;
}
.panel__boundary-list {
  width: 38%;
  gap: 10px;
  padding-left: 24px;
}
.panel__boundary-list li * {
  line-height: 28px;
}
.panel__boundary-list li h6 {
  color: var(--dark-gray);
}
.panel__boundary-list li {
  list-style-type: disc;
}
.panel__boundary-list li::marker {
  color: var(--light-blue);
}
.panel__main {
  background-color: #020618;
  border-radius: 40px;
  box-shadow: 0px 10px 20px 0px #0000000d;
}
.panel__header {
  padding: 40px 40px 25px;
}
.panel__logo {
  width: 50px;
  height: 50px;
  background-color: var(--light-blue);
  border-radius: 12px;
  color: #020618;
}
.panel__brand-subtitle {
  color: #cecece;
}
.panel__actions {
  gap: 10px;
}
.panel__status {
  height: 38px;
  color: var(--green);
  background-color: #33cc791a;
  border-radius: 10px;
  padding-inline: 15px;
}
.panel__status::before {
  content: "";
  width: 6px;
  height: 6px;
  background-color: var(--green);
  border-radius: 50%;
}

.panel__action-btn {
  height: 38px !important;
  font-size: 14px;
  padding-inline: 15px !important;
  border-radius: 10px;
  color: #020618;
}

.panel__tabs {
  background: rgba(255, 255, 255, 0.1);
  padding: 15px 47px;
  gap: 8px;
}
.panel__tab {
  color: #cecece;
  font-weight: 400;
  background-color: transparent;
  padding: 7px 12px;
  border-radius: 7px;
  border: 1px solid transparent;
  gap: 5px;
  font-size: 14px;
  font-weight: 400;
  position: relative;
}
.panel__tab svg path {
  stroke: currentColor;
}
.panel__tab.active {
  background: #0db5e926;
  border-color: #0db5e999;
  color: var(--light-blue);
  font-weight: 600;
}
.panel__tab:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 10px;
  background-color: #ffffff33;
  border-radius: 2px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -4px;
}
.panel__tab.active::after {
  display: none;
}
.panel__tab-content {
  padding: 40px;
}
.panel__cards .row {
  --bs-gutter-x: 20px;
  --bs-gutter-y: 20px;
}
.panel__card {
  padding: 30px;
  background-color: #ffffff12;
  border-radius: 24px;
}
.panel__card-header {
  margin-bottom: 10px;
  gap: 10px;
}
.panel__graph {
  min-height: 160px;
  background-color: #ffffff12;
  padding: 8px;
  border-radius: 12px;
}
.panel__card-footer {
  margin-top: 15px;
  font-size: 12px;
  color: #cecece;
}
.panel__creds {
  background-color: #ffffff12;
  border-radius: 24px;
  padding: 25px 60px;
  gap: 24px;
}
.cred__label {
  color: #cecece;
}
.cred__password {
  width: 300px;
}
.cred__password-input {
  height: 38px;
  padding-inline: 15px 52px;
  background-color: #020618;
  border: 0;
  border-radius: 7px;
}
.cred__password-input:focus {
  outline: none;
}
.cred__password-toggle img {
  width: 18px;
}
/* panel section end */

/* os-panel section start */
.os-panel .section__header {
  max-width: 870px;
}
.os-panel .section__header p {
  max-width: 830px;
}
.os-panel .row {
  --bs-gutter-x: 40px;
  --bs-gutter-y: 40px;
}
.os-panel__column-header {
  gap: 20px;
}
.os-panel__column-num {
  width: 40px;
  height: 40px;
  background-color: var(--blue);
  flex-shrink: 0;
}
.os-panel__column-tag {
  font-size: 12px;
  color: var(--green);
  padding: 10px 15px;
  background-color: #33cc791a;
}

.os-panel__cards {
  gap: 10px;
}
.os-panel__card {
  box-shadow: 0px 5px 10px 0px #0000000d;
  border-radius: 24px;
  padding: 25px;
}
.os-panel__card-logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
}
.os-panel__card-title {
  color: var(--dark-gray);
}
.os-panel__card-best-for {
  color: var(--dark-gray);
  margin-bottom: 0;
}
.os-panel__card-best-for span {
  color: var(--gray);
}
.os-panel__card-tag {
  color: var(--green);
  flex-shrink: 0;
}
.os-panel__card .radio-container {
  inset: 0;
}
.os-panel__card .radio-btn {
  top: 25px;
  right: 25px;
}

.os-panel__card-title-row {
  gap: 10px;
}
.os-panel__card-badge {
  font-size: 10px;
  padding: 5px 10px;
  color: var(--light-blue);
  background-color: #0db5e91a;
}
.os-panel__card-features {
  grid-template-columns: 1fr 1fr;
  gap: 5px 25px;
}
.os-panel__card-features li {
  list-style-type: disc;
  margin-left: 12px;
}
.os-panel__card-features li::marker {
  color: var(--blue);
}
.os-panel__card--selected-comb {
  background-color: #020618;
}
.os-panel__card--selected-comb h6 {
  font-size: 12px;
  color: var(--light-blue);
}
.os-panel__card--selected-comb .os-panel__card-features li::marker {
  color: var(--gray);
}
.os-panel__card--selected-comb .os-panel__card-features li {
  margin-left: 20px;
}
.os-panel__card-price {
  color: var(--green);
}
/* os-panel section end */

/* backup section start */
.backup .section__header {
  max-width: 870px;
}
.backup__card {
  padding: 25px;
  border-radius: 40px;
}
.backup__card-icon {
  width: 80px;
  height: 80px;
  background-color: #0353ac1a;
  border-radius: 24px;
}
.backup__card-icon img {
  width: 50px;
}

.backup__scope {
  padding: 40px;
  border-radius: 30px;
  box-shadow: 0px 10px 20px 0px #0000000d;
  border: 1px solid #c0c0c0;
}
.backup__scope-divider {
  height: 1px;
  background: #c0c0c0;
  box-shadow: 0px 5px 10px 0px #0000000d;
}

.backup__table {
  table-layout: fixed;
}
.backup__table th {
  line-height: 1.2;
  padding: 18px 25px;
  background-color: #020618;
}
.backup__table th:first-child {
  border-radius: 12px 0 0 12px;
}
.backup__table th:last-child {
  border-radius: 0 12px 12px 0;
}
.backup__table th.fully-managed-vps {
  background-color: var(--light-blue);
}
.backup__table td {
  padding: 20px 25px;
  border-bottom: 1px solid #c0c0c0;
  color: #0e0f0b;
}
.backup__table-feature {
  gap: 10px;
}
.backup__table-check-icon {
  width: 19px;
  margin-top: 2px;
}
.backup__table::after {
  content: "";
  width: 374px;
  height: 100%;
  background-color: var(--background);
  border: 1px solid #c0c0c0;
  border-top-right-radius: 12px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}
/* backup section end */

/* workload section start */
.workload .section__header {
  max-width: 890px;
}
.workload .section__header p {
  max-width: 700px;
}
.workload__cards {
  grid-template-columns: repeat(5, 1fr);
  gap: 25px;
}
.workload__card {
  box-shadow: 0px 5px 10px 0px #0000000d;
  padding: 20px;
}
.workload__card .card__icon {
  width: 40px;
  height: 40px;
  background-color: #0353ac1a;
  border-radius: 12px;
}
.workload__card .card__icon img {
  width: 26px;
}
.workload__card .card__title {
  color: #0e0f0b;
}
.workload__card .card__desc {
  line-height: 18px;
}
.workload__comparison {
  margin-top: 60px;
}
.workload__table-container {
  background-color: var(--white);
  box-shadow: 0px 10px 20px 0px #0000000d;
  border: 1px solid #c0c0c0;
  border-radius: 30px;
}
.workload__table {
  table-layout: fixed;
  color: #0e0f0b;
}
.workload__table th {
  padding: 28px 20px;
  background-color: #020618;
}
.workload__table td {
  padding: 20px 18px;
  border-bottom: 1px solid #c0c0c0;
}
.workload__table th.uk-kvm-vps {
  background-color: var(--light-blue);
}
.workload__table td.uk-kvm-vps {
  background-color: var(--background);
  border-inline: 1px solid #c0c0c0;
}
.workload__table tr:last-child td {
  border-bottom: 0;
}
.backup__table-container::after {
  width: 339px;
}
/* workload section end */

/* domain-search section start */
.domain-search__container {
  padding-inline: 20px;
}
.domain-search__wrapper {
  background-image: linear-gradient(180deg, #ffffff 0%, #def4ff 100%);
  outline: 20px solid #ffffff1a;
  border-radius: 40px;
  box-shadow: 0px 10px 20px 0px #0000000d;
  padding: 60px;
  margin-top: -324px;
}
.domain-search__box {
  padding: 40px;
  box-shadow: 0px 10px 20px 0px #00000012;
  border-radius: 30px;
}
.domain-search__input-field {
  height: 60px;
  background-color: #f2f2f2;
  border: 1px solid #e5e5e5;
  border-radius: 15px;
  padding-inline: 20px;
  color: var(--dark-gray);
  font-weight: 500;
}
.domain-search__input-field::placeholder {
  color: var(--gray);
}
.domain-search__input-field:focus {
  outline: none;
}
.domain-search__submit-btn {
  height: 60px;
  padding-inline: 35px;
  border-radius: 15px;
}
.domain-search__tags {
  gap: 10px;
}

.domain-list {
  gap: 12px;
}
.domain-list__item {
  grid-template-columns: 85px 1fr 40px;
  gap: 24px;
  padding: 19px 24px;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
}
.domain-type {
  color: #121212;
}
.domain-view-btn {
  color: var(--dark-blue);
}
.domain-view-btn:hover {
  color: var(--blue);
}
/* domain-search section end */

/* extension section start */
.extension__cards {
  grid-template-columns: 48fr 33.6fr 33.6fr;
  gap: 24px;
}
.extension__card {
  padding: 20px;
  border-radius: 30px;
  box-shadow: 0px 10px 20px 0px #00000012;
}
.extension__title {
  color: var(--dark-blue);
  font-weight: 800;
}
.extension__price {
  color: var(--light-blue);
}
.extension__desc {
  line-height: 18px;
}
.extension__card--lg {
  padding: 40px;
  grid-row: span 2 / span 2;
}
.extension__card--lg .extension__title {
  font-size: 48px;
}
.extension__card--lg .extension__desc {
  line-height: 1.56;
}
.extension__features li {
  gap: 10px;
  color: var(--dark-blue);
}
.extension__badge {
  right: 40px;
  padding: 15px 20px 10px;
  color: var(--dark-blue);
  background-color: var(--light-blue);
  border-radius: 0 0 12px 12px;
}
/* extension section end */

/* protection section start */
.protection .section__header p {
  max-width: 860px;
}
.protection__main {
  background-color: #020618;
  outline: 20px solid #0206181a;
  box-shadow: 0px 10px 20px 0px #0000000d;
  padding: 40px;
  border-radius: 40px;
}
.protection__domains {
  gap: 10px;
}
.protection__domain {
  font-size: 14px;
  padding: 10px 20px;
  background-color: rgba(255, 255, 255, 0.1);
  color: #cecece;
  border-radius: 10px;
  font-weight: 400;
}
.protection__domain--selected {
  background-color: var(--light-blue);
  color: #020618;
  font-weight: 600;
}
.protection__divider {
  height: 1px;
  background-color: #ffffff33;
  border-radius: 2px;
  margin-bottom: 40px;
}
.domain-info {
  padding: 25px;
  background-color: #0000001a;
  border-radius: 20px;
  margin-bottom: 20px;
}
.domain-info__badge {
  color: var(--green);
  background-color: #3cff001a;
  padding: 5px 15px;
}

.domain-info__expiry {
  color: #cecece;
}
.domain-info__expiry-date {
  color: var(--light-blue);
}
.domain-info__tabs {
  background: #ffffff1f;
  padding: 7px !important;
  border-radius: 10px;
}
.domain-info__cards .row {
  --bs-gutter-x: 20px;
  --bs-gutter-y: 20px;
}
.domain-info__card {
  background-color: #ffffff12;
  padding: 30px;
  border-radius: 24px;
  color: #cecece;
}
.protection-status {
  background-color: #00000026;
  padding: 15px;
  border-radius: 12px;
}
.auth-code__input {
  height: 48px;
  background: #00000026;
  border-radius: 12px;
  padding-inline: 15px 30px;
  color: #cecece;
}

.copy-btn {
  height: 48px;
  background-color: #ffffff26;
  color: var(--white);
  border-radius: 12px;
  gap: 5px;
}

.security-health {
  gap: 20px;
  margin-bottom: 38px;
}
.domain-info__note {
  background-color: #020618;
  padding: 13px 8px;
  border-radius: 7px;
  font-size: 10px;
}
/* protection section end */

/* guide section start */
.guide__main {
  padding: 40px;
  border-radius: 40px;
  box-shadow: 0px 10px 20px 0px #00000012;
}
.guide__title {
  font-weight: 800;
  color: var(--dark-blue);
  margin-bottom: 10px;
}
.guide__title span {
  color: var(--light-blue);
}
.guide__header {
  max-width: 864px;
}
.guide__main .row {
  --bs-gutter-x: 20px;
  --bs-gutter-y: 20px;
}
.guide__card {
  padding: 20px 25px 25px;
  background-color: var(--background);
  border: 1px solid #cbcecd;
  border-radius: 24px;
}
.guide__card-title-row {
  margin-bottom: 10px;
}
.guide__card-title {
  font-size: 36px;
  font-weight: 800;
  color: var(--dark-blue);
}
.guide__badge {
  padding: 7px 11px;
  background-color: #032d6726;
  border: 1px solid #032d6799;
  border-radius: 7px;
  color: var(--dark-blue);
}
.guide__card-desc {
  line-height: 1.5;
}
.guide__features {
  gap: 10px;
}
.guide__feature {
  gap: 7px;
  color: var(--dark-blue);
}
.guide__feature-tick {
  width: 20px;
}
.guide__tip {
  width: fit-content;
  margin-top: 20px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--dark-blue);
}
.guide__tip-icon {
  width: 16px;
  margin-top: 2px;
}
/* guide section end */

/* domain-checking section start */
.domain-checking__wrapper {
  padding: 40px;
  outline: 10px solid #ffffff03;
  border-radius: 30px;
  margin-top: -210px;
}
.domain-checking__server {
  color: var(--blue);
}
.domain-checking__form {
  grid-template-columns: 1fr 1fr auto;
  gap: 20px;
}
.domain-checking__cta {
  padding: 20px;
  border: 1px solid #e0e0e0;
  background-color: var(--background);
  border-radius: 10px;
}
.domain-checking__cta-icon {
  width: 60px;
  height: 60px;
  background-color: var(--light-blue);
  border-radius: 20px;
  box-shadow: 0px 5px 10px 0px #00000040;
}
.domain-checking__cta-icon img {
  width: 40px;
}
.domain-checking__cta-btn {
  padding-inline: 25px;
}
/* domain-checking section end */

/* plan-finder section start */
.plan-finder {
  padding-block: 100px;
  background-color: #020618;
  box-shadow: 0px 10px 20px 0px #0000000d;
}
.plan-finder .section__header {
  max-width: 994px;
}
.plan-finder .section__header p {
  max-width: 890px;
}
.plan-finder__inner-tabs {
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.plan-finder__inner-tab {
  background-color: #ffffff12;
  padding: 20px;
  border-radius: 10px;
  text-align: left;
  color: var(--gray);
  border: 1px solid transparent;
}
.plan-finder__inner-tab-icon {
  width: 40px;
  height: 40px;
  background-color: var(--light-blue);
  border-radius: 10px;
  margin-bottom: 12px;
}
.plan-finder__inner-tab-icon img {
  width: 24px;
}
.plan-finder__inner-tab h6 {
  line-height: normal;
}
.plan-finder__inner-tab.active {
  border-color: var(--light-blue);
  box-shadow: unset !important;
}
.plan-finder__inner-tab-content {
  padding: 40px;
  background-color: #ffffff12;
  border-radius: 24px;
  color: #cecece;
  grid-template-columns: 65.5fr 38.4fr;
  gap: 80px;
}
.plan-finder__intro-icon {
  width: 50px;
  height: 50px;
  background-color: var(--light-blue);
  border-radius: 12px;
}
.plan-finder__intro-icon img {
  width: 30px;
}
.plan-finder__desc {
  max-width: 558px;
}
.plan-finder__features-title {
  color: var(--light-blue);
  margin-bottom: 10px;
}

.plan-finder__features-wrapper {
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.plan-finder__feature {
  background-color: #ffffff26;
  padding: 15px 20px;
  border-radius: 12px;
  line-height: 18px;
}
.plan-finder__feature-tick {
  width: 14px;
  margin-top: 2px;
}
.plan-finder__card {
  background-color: #ffffff26;
  padding: 25px 30px;
  border-radius: 20px;
  color: #dddddd;
}
.plan-finder__price {
  background-color: #0000003d;
  padding: 12px;
  border-radius: 12px;
}
.plan-finder__price p {
  color: var(--light-blue);
}
.plan-finder__specs {
  margin-top: 10px;
}
.plan-finder__spec-divider {
  height: 1px;
  background-color: #fff3;
  border-radius: 2px;
}
/* plan-finder section end */

/* performance section start */
.performance .section__header p {
  max-width: 830px;
}
.performance__cards {
  grid-template-columns: 33.6fr 33.6fr 48fr;
  gap: 24px;
}
.performance__card {
  border-radius: 30px;
}
.performance__card .card__title {
  color: var(--dark-blue);
}
.performance__card h6 {
  line-height: normal;
  color: var(--dark-gray);
}
.performance__card .row {
  --bs-gutter-x: 14px;
  --bs-gutter-y: 14px;
}
.performance__latency-list {
  gap: 10px;
  margin-bottom: 10px;
}
.performance__latency {
  padding: 14px 19px;
  background-color: var(--background);
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  gap: 40px;
}
.performance__latency-location {
  gap: 10px;
  color: var(--dark-gray);
}
.performance__latency-location::before {
  content: "";
  width: 10px;
  height: 10px;
  background-color: var(--light-blue);
  border-radius: 50%;
}
.performance__latency-unit {
  color: var(--light-blue);
}
.performance__compliant {
  padding: 14px 19px;
  background-color: #032d6712;
  border: 1px solid #c5cad2;
  border-radius: 10px;
  gap: 5px;
}
.performance__complaint-tick {
  width: 16px;
  margin-top: 2px;
}
.performance__compliant h6 {
  color: var(--light-blue);
}
.performance__compliant p {
  color: var(--dark-blue);
}
/* performance section end */

/* dashboard section start */
.dashboard .section__header p {
  max-width: 1050px;
}
.dashboard__demo img {
  border-radius: 30px;
  box-shadow: 0px 10px 20px 0px #00000012;
}
/* dashboard section end */

/* deploy section start */
.deploy__container {
  background-color: #020618;
  outline: 20px solid #0206181a;
  box-shadow: 0px 10px 20px 0px #0000000d;
  padding: 100px 40px 40px;
  border-radius: 40px;
}
.deploy .section__header {
  max-width: 920px;
}
.deploy__step {
  background: #ffffff12;
  box-shadow: 0px 10px 20px 0px #0000000d;
  padding: 44px 40px;
  border-radius: 40px;
  color: var(--border);
}
.deploy__divider {
  height: 1px;
  background-color: #fff3;
}
.app-cards .row {
  --bs-gutter-x: 20px;
  --bs-gutter-y: 20px;
}
.app-card {
  padding: 25px;
  background-color: #ffffff26;
  border-radius: 20px;
}
.app-card__icon {
  width: 60px;
  height: 60px;
  background-color: #020618;
  border-radius: 20px;
}
.app-card__icon img {
  width: 40px;
}
.app-card__title {
  margin-bottom: 10px;
}
/* deploy section end */

/* benefits section start */
.benefits .section__header {
  max-width: 894px;
}
.benefits__wrapper {
  grid-template-columns: 66.9fr 49.1fr;
  gap: 40px;
}
.benefits__features {
  gap: 10px;
}
.benefits__feature {
  padding: 15px;
  background-color: var(--white);
  border-radius: 12px;
  gap: 10px;
  box-shadow: 0px 10px 20px 0px #00000012;
}
.benefits__feature-tick {
  width: 22px;
  margin-top: 1px;
}
.benefits h6 {
  line-height: normal;
  color: var(--dark-gray);
}

.benefits__card {
  padding: 30px;
  box-shadow: 0px 10px 20px 0px #00000012;
  border-radius: 30px;
}
.benefits .form__input-chevron {
  right: 12px;
}
.benefits .form__input-field {
  height: 44px;
  border-radius: 10px;
}
.benefits .form__submit-btn {
  border-radius: 10px;
}
/* benefits section end */

/* compare section start */
.compare .section__header {
  max-width: 750px;
}
.compare .section__header p {
  max-width: 630px;
}
.compare__wrapper {
  padding: 40px;
  border-radius: 30px;
  box-shadow: 0px 10px 20px 0px #00000012;
}
.compare__table-container {
  border: 1px solid #e0e0e0;
  border-radius: 20px;
}
.compare__table th {
  background-color: #032d6712;
  padding: 15px 20px;
}
.compare__table th:first-child,
.compare__table td:first-child {
  padding-left: 40px;
}
.compare__table th:last-child,
.compare__table td:last-child {
  padding-right: 40px;
}
.compare__table td {
  color: var(--dark-gray);
  padding: 15px 20px;
  border-top: 1px solid #e0e0e0;
}
.compare__table .compare__table-subheader {
  color: var(--blue);
  background-color: #032d6712;
}
.compare__table-tick {
  width: 20px;
}
/* compare section end */

/* result section start */
.result--primary {
  padding: 40px;
  border-radius: 40px;
}
.result__alternatives {
  padding: 40px;
  box-shadow: 0px 10px 20px 0px #0000000d;
  border-radius: 40px;
}
.result__alternatives-title {
  gap: 10px;
}
.result__alternatives-title img {
  width: 26px;
  margin-top: 5px;
}
.result__alternatives-divider {
  height: 1px;
  background-color: #c0c0c0;
  box-shadow: 0px 5px 10px 0px #0000000d;
  margin-bottom: 40px;
}
.result__alternatives .row {
  --bs-gutter-x: 20px;
  --bs-gutter-y: 20px;
}

.result--alternatives {
  padding: 19px;
  background-color: var(--background);
  border: 1px solid #e0e0e0;
  border-radius: 15px;
  gap: 15px;
}
.result__card h6 {
  color: var(--dark-gray);
}
.result--alternatives .card__badge::before {
  display: none;
}
.result--alternatives .card__right {
  gap: 20px;
}
.result--alternatives .theme-btn {
  font-size: 18px;
  padding-inline: 25px;
}
/* result section end */

/* steps section start */
.steps .section__header p {
  max-width: 720px;
}
.steps .section__header {
  max-width: 920px;
}
.steps__understanding {
  padding: 40px;
  border-radius: 40px;
  box-shadow: 0px 10px 20px 0px #0000000d;
  margin-top: 40px;
}
.steps__understanding-header {
  gap: 10px;
}
.steps__understanding-header-icon {
  width: 24px;
  margin-top: 3px;
}
.steps__understanding .row {
  --bs-gutter-x: 20px;
  --bs-gutter-y: 20px;
}
.steps__understanding-card {
  padding: 19px;
  border-radius: 15px;
}
/* steps section end */

/* domain-naming section start */
.domain-naming__coach {
  padding: 30px;
  border-radius: 30px;
  margin-bottom: 40px;
  gap: 25px;
}
.domain-naming__coach-thumb {
  width: 220px;
  border-radius: 30px;
}
.domain-naming__coach-thumb img {
  transition: all 1s ease-in-out;
}
.domain-naming__coach-thumb:hover img {
  transform: scale(1.1);
}
.domain-naming__coach .form__input-field {
  background-color: rgba(208, 208, 208, 0.55);
}
.domain-naming__coach-form {
  gap: 10px;
}

.domain-naming__steps .row {
  --bs-gutter-x: 40px;
  --bs-gutter-y: 40px;
}

.domain-naming__step-header {
  gap: 15px;
}

.card__num {
  width: 80px;
  height: 80px;
  background-color: #032d671a;
  border-radius: 20px;
  font-size: 40px;
  color: var(--dark-blue);
}

.domain-naming__examples {
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.domain-naming__example {
  padding: 14px;
  background-color: #33cc791a;
  border: 1px solid var(--green);
  border-radius: 12px;
  gap: 5px;
  min-width: 0;
}
.domain-naming__example * {
  min-width: 0;
}
.domain-naming__example-icon {
  margin-top: 4px;
}
.domain-naming__example h6 {
  color: var(--dark-gray);
}
.domain-naming__example--avoid {
  background: #ff84841a;
  border-color: var(--red);
}
/* domain-naming section end */

/* contact section start */
.contact {
  padding-block: 192px 0;
  color: #535367;
}
.contact__wrapper {
  gap: 40px;
}
.contact__form {
  width: 50%;
  padding: 50px;
  border-radius: 40px;
  box-shadow: 0px 10px 25px 0px #21343014;
  margin-bottom: -112px;
}
.contact__info-item {
  gap: 20px;
}
.contact__content {
  max-width: 467px;
}
.contact__icon {
  width: 70px;
  height: 70px;
  background-color: var(--dark-blue);
  flex-shrink: 0;
}
.contact__icon img {
  width: 34px;
}
.contact__info-item > div {
  padding-top: 8px;
}
.contact__info-title {
  color: #121212;
}
.contact__info-item a:hover {
  color: var(--dark-blue);
}
.contact__form .form__input-field {
  color: #535367;
}
.contact__form .form__input-field::placeholder {
  color: #535367;
}
/* contact section end */