body {
  overflow-x: hidden;
  background-color: #F6F6F6;
  color: #4C5671;
  font-family: "Inter", sans-serif;
}

.Top-Banner {
  height: 100vh;
  position: relative;
  background: linear-gradient(-45deg, #7CF5FF 10%, #0774FF 55%, #0774FF 90%);
}
.Top-Banner .black-cover {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.2);
}
.Top-Banner .absolute-man-laptop-img {
  height: 65vh;
  position: absolute;
  top: none;
  bottom: 20%;
  right: 5%;
  left: none;
  z-index: 3;
}
.Top-Banner .absolute-img-anim-man {
  position: absolute;
  top: 25%;
  bottom: none;
  right: 7%;
  left: none;
  z-index: 4;
  height: 53vh;
}
.Top-Banner .absolute-img-lines {
  position: absolute;
  top: none;
  bottom: none;
  right: none;
  left: none;
  z-index: 4;
  width: 100%;
  height: 100%;
  filter: invert(1);
}
.Top-Banner .absolute-img-man {
  position: absolute;
  top: none;
  bottom: 0;
  right: 0;
  left: none;
  z-index: 3;
  height: 75vh;
}
.Top-Banner .absolute-img-cloudanima {
  position: absolute;
  top: 20%;
  bottom: none;
  right: 17%;
  left: none;
  z-index: 3;
  animation-name: Smoothmove;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  height: 20vh;
}
.Top-Banner .absolute-img-wifi {
  position: absolute;
  top: 48%;
  bottom: none;
  right: 25%;
  left: none;
  z-index: 3;
  width: 4vw;
  animation-name: Smoothresizing;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.Top-Banner .absolute-img-cloud {
  position: absolute;
  top: 22%;
  bottom: none;
  right: 5%;
  left: none;
  z-index: 3;
  height: 60vh;
}
.Top-Banner .absolute-img-woman {
  position: absolute;
  top: 40%;
  bottom: 0;
  right: 5%;
  left: none;
  z-index: 4;
  height: 50vh;
}
.Top-Banner .absolute-img-mobile {
  position: absolute;
  top: 40%;
  bottom: 0;
  right: 25%;
  left: none;
  z-index: 3;
  height: 50vh;
}
.Top-Banner .absolute-img-envelope {
  position: absolute;
  top: 32%;
  bottom: none;
  right: 32%;
  left: none;
  z-index: 4;
  animation-name: SmoothBouncingThree;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  width: 5vw;
}
.Top-Banner .absolute-img-fly {
  position: absolute;
  top: 25%;
  bottom: none;
  right: 10%;
  left: none;
  z-index: 4;
  animation-name: SmoothBouncingFly;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  width: 10vw;
}
.Top-Banner .absolute-img-email {
  position: absolute;
  top: 27%;
  bottom: none;
  right: 20%;
  left: none;
  z-index: 3;
  width: 12vw;
}
.Top-Banner .absolute-img-rb {
  position: absolute;
  top: 22%;
  bottom: none;
  right: none;
  left: 3%;
  z-index: 4;
  animation-name: SmoothBouncingOne;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  width: 10vw;
}
.Top-Banner .absolute-img-render {
  position: absolute;
  top: none;
  bottom: 10%;
  right: none;
  left: 10%;
  z-index: 3;
  animation-name: SmoothBouncingTwo;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
  width: 8vw;
}
.Top-Banner .absolute-desc-box {
  width: 52vw;
  position: absolute;
  top: 55%;
  bottom: none;
  right: none;
  left: 50%;
  z-index: 4;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: none;
  align-items: center;
  flex-direction: column;
}
.Top-Banner .absolute-desc-box h1 {
  font-size: clamp(36px, 3.5vw, 52px);
  text-transform: capitalize;
  color: white;
  text-align: center;
  font-weight: bold;
  margin-bottom: clamp(23px, 2vw, 2.5vw);
}
.Top-Banner .absolute-desc-box h3 {
  color: white;
  text-align: center;
  font-size: clamp(16px, 1.3vw, 20px);
  margin-bottom: clamp(25px, 2vw, 2.5vw);
}
.Top-Banner .absolute-desc-box h3 a {
  color: #FFC107;
  text-decoration: none;
  padding-left: 5px;
}
.Top-Banner .absolute-desc-box h3 a:hover {
  text-decoration: underline;
}
.Top-Banner .absolute-desc-box .domain-select-div {
  display: flex;
  justify-content: none;
  align-items: none;
  flex-direction: row;
  border-radius: 0.25rem;
  background-color: white;
  width: 100%;
  height: clamp(40px, 3.5vw, 4vw);
  margin-bottom: clamp(25px, 2vw, 2.5vw);
}
.Top-Banner .absolute-desc-box .domain-select-div input {
  width: 80%;
  height: 100%;
  font-size: clamp(13px, 1vw, 15px);
  border-radius: 0.25rem 0rem 0rem 0.25rem;
  border: none;
}
.Top-Banner .absolute-desc-box .domain-select-div input:focus {
  box-shadow: none;
}
.Top-Banner .absolute-desc-box .domain-select-div select {
  width: auto;
  height: 100%;
  border-radius: 0rem;
  border: none;
  color: grey;
  font-size: clamp(13px, 1vw, 15px);
  padding: 0.375rem 0.6rem;
  margin: 0;
  font-weight: 500;
  background-position: right center;
  background-size: clamp(7px, 0.8vw, 0.9vw) clamp(7px, 0.8vw, 0.9vw);
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20fill%3D%27none%27%20stroke%3D%27%23999999%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20stroke-width%3D%272%27%20d%3D%27M2%205l6%206%206-6%27%2F%3E%3C%2Fsvg%3E);
}
.Top-Banner .absolute-desc-box .domain-select-div select:focus {
  box-shadow: none;
}
.Top-Banner .absolute-desc-box .domain-select-div a {
  margin-left: 5px;
  width: 20%;
  height: 100%;
  background-color: #FFC107;
  border-radius: 0px 0.25rem 0.25rem 0px;
  font-size: clamp(13px, 1vw, 15px);
  color: grey;
  font-weight: 500;
  display: inline-block;
  height: 100%;
  align-content: center;
  text-align: center;
  text-transform: capitalize;
  text-decoration: none;
  transition: all 0.5s ease-in-out;
  padding: 0.5rem 0.6rem;
}
.Top-Banner .absolute-desc-box .domain-select-div a:hover {
  background-color: black;
  color: white;
}
.Top-Banner .absolute-desc-box .popular-domains {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
}
.Top-Banner .absolute-desc-box .popular-domains h4 {
  font-size: clamp(12px, 1.2vw, 18px);
  color: white;
  margin-right: 10px;
  text-wrap: nowrap;
}
.Top-Banner .absolute-desc-box .popular-domains .domain {
  padding: 0.3rem 0.4rem;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  font-size: clamp(13px, 1vw, 15px);
  color: white;
  text-wrap: nowrap;
  margin-right: 10px;
  margin-bottom: 10px;
}
.Top-Banner .absolute-desc-box-getstarted {
  width: 40vw;
  position: absolute;
  top: 50%;
  bottom: none;
  right: none;
  left: 6%;
  z-index: 4;
  transform: translateY(-50%);
  display: flex;
  justify-content: none;
  align-items: start;
  flex-direction: column;
}
.Top-Banner .absolute-desc-box-getstarted .top-banner-dia-word .top-banner-dia-word-div {
  padding-right: 10px;
}
.Top-Banner .absolute-desc-box-getstarted .top-banner-dia-word .top-banner-dia-word-div i {
  font-size: clamp(38px, 3vw, 45px);
  padding-right: 8px;
  color: white;
}
.Top-Banner .absolute-desc-box-getstarted .top-banner-dia-word .top-banner-dia-word-div p {
  margin-bottom: 0;
  color: white;
}
.Top-Banner .absolute-desc-box-getstarted a {
  display: inline-block;
  height: 100%;
  align-content: center;
  text-align: center;
  text-transform: capitalize;
  text-decoration: none;
  transition: all 0.5s ease-in-out;
  transform: translateY(-50%);
  font-size: clamp(13px, 1vw, 15px);
  width: clamp(130px, 10vw, 10.3vw);
  height: clamp(40px, 3.4vw, 48px);
  font-weight: bold;
  color: black;
  border-radius: 5px;
  margin-top: 25px;
  background-color: #FFC107;
}
.Top-Banner .absolute-desc-box-getstarted a:hover {
  background-color: white;
  color: #4C5671;
  border-color: transparent;
}
.Top-Banner .absolute-desc-box-getstarted a:hover i {
  padding-left: 15px;
}
.Top-Banner .absolute-desc-box-getstarted a i {
  font-size: clamp(11px, 0.9vw, 14px);
  padding-left: 10px;
  transition: all 0.5s ease-in-out;
}
.Top-Banner .absolute-desc-box-getstarted h1 {
  font-size: clamp(36px, 3.5vw, 52px);
  text-transform: capitalize;
  color: white;
  text-align: center;
  font-weight: bold;
  margin-bottom: clamp(10px, 1.2vw, 1.5vw);
}
.Top-Banner .absolute-desc-box-getstarted h3 {
  color: white;
  font-size: clamp(16px, 1.3vw, 20px);
  margin-bottom: clamp(25px, 2vw, 2.5vw);
}
.Top-Banner .absolute-desc-box-getstarted .domain-select-div {
  display: flex;
  justify-content: none;
  align-items: none;
  flex-direction: row;
  border-radius: 0.25rem;
  background-color: white;
  width: 100%;
  height: clamp(40px, 3.5vw, 4vw);
  margin-bottom: clamp(25px, 2vw, 2.5vw);
}
.Top-Banner .absolute-desc-box-getstarted .domain-select-div input {
  width: 80%;
  height: 100%;
  font-size: clamp(13px, 1vw, 15px);
  border-radius: 0.25rem 0rem 0rem 0.25rem;
  border: none;
}
.Top-Banner .absolute-desc-box-getstarted .domain-select-div input:focus {
  box-shadow: none;
}
.Top-Banner .absolute-desc-box-getstarted .domain-select-div select {
  width: auto;
  height: 100%;
  border-radius: 0rem;
  border: none;
  color: grey;
  font-size: clamp(13px, 1vw, 15px);
  padding: 0.375rem 0.6rem;
  margin: 0;
  font-weight: 500;
  background-position: right center;
  background-size: clamp(7px, 0.8vw, 0.9vw) clamp(7px, 0.8vw, 0.9vw);
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20fill%3D%27none%27%20stroke%3D%27%23999999%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20stroke-width%3D%272%27%20d%3D%27M2%205l6%206%206-6%27%2F%3E%3C%2Fsvg%3E);
}
.Top-Banner .absolute-desc-box-getstarted .domain-select-div select:focus {
  box-shadow: none;
}
.Top-Banner .absolute-desc-box-getstarted .domain-select-div a {
  margin-left: 5px;
  width: 20%;
  height: 100%;
  background-color: #FFC107;
  border-radius: 0px 0.25rem 0.25rem 0px;
  font-size: clamp(13px, 1vw, 15px);
  color: grey;
  font-weight: 500;
  display: inline-block;
  height: 100%;
  align-content: center;
  text-align: center;
  text-transform: capitalize;
  text-decoration: none;
  transition: all 0.5s ease-in-out;
  padding: 0.5rem 0.6rem;
}
.Top-Banner .absolute-desc-box-getstarted .domain-select-div a:hover {
  background-color: black;
  color: white;
}
.Top-Banner .absolute-desc-box-getstarted .popular-domains {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
}
.Top-Banner .absolute-desc-box-getstarted .popular-domains h4 {
  font-size: clamp(12px, 1.2vw, 18px);
  color: white;
  margin-right: 10px;
  text-wrap: nowrap;
}
.Top-Banner .absolute-desc-box-getstarted .popular-domains .domain {
  padding: 0.3rem 0.4rem;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  font-size: clamp(13px, 1vw, 15px);
  color: white;
  text-wrap: nowrap;
  margin-right: 10px;
  margin-bottom: 10px;
}

.fixed-headerblue {
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  background: white;
  height: clamp(50px, 4vw, 60px);
  padding: clamp(5px, 2%, 2.5vw) auto;
  box-shadow: 0px 0px 5px 5px rgba(128, 128, 128, 0.05);
  animation: smoothScroll 1s forwards;
}

.fixed-header {
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  background: white;
  height: clamp(50px, 4vw, 60px);
  padding: clamp(5px, 2%, 2.5vw) auto;
  box-shadow: 0px 0px 5px 5px rgba(128, 128, 128, 0.05);
  animation: smoothScroll 1s forwards;
}
.fixed-header .nav-item .dropdown .btn {
  color: grey !important;
}
.fixed-header .nav-item .dropdown-menu {
  padding: 0;
  background-color: #0774FF !important;
}
.fixed-header .nav-item .dropdown-menu .dropdown-item {
  color: white !important;
}
.fixed-header .nav-item:hover .dropdown-menu {
  display: block;
}
.fixed-header #navbarSupportedContent form .getstartedbtn {
  color: grey !important;
  border-color: grey !important;
  transition: all 0.5s ease-in-out;
}
.fixed-header #navbarSupportedContent form .getstartedbtn:hover {
  color: black !important;
  border: none !important;
}
.fixed-header #navbarSupportedContent form .loginbtn {
  color: grey !important;
}
.fixed-header #navbarSupportedContent form .loginbtn:hover {
  color: black !important;
}
.fixed-header #navbarSupportedContent.show {
  background-color: white !important;
}
.fixed-header .navbar-toggler {
  color: grey !important;
  border-color: grey !important;
}

.navbar {
  padding: clamp(8px, 1.5vw, 10px) clamp(10px, 6%, 120px) 15px clamp(10px, 6%, 120px);
  z-index: 4;
}
.navbar .header-logo-img {
  width: clamp(135px, 15vw, 220px);
  margin-right: clamp(10px, 3rem, 4rem);
}
.navbar .header-logo-img img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.navbar .nav-item {
  margin-right: 10px;
}
.navbar .nav-item .dropdown .btn {
  background-position: right 7px;
  background-color: transparent;
  border-color: transparent;
  font-weight: 500;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  font-size: clamp(13px, 1vw, 15px);
  box-shadow: none;
  width: 100%;
  border-radius: 0;
}
.navbar .nav-item .dropdown .btn::after {
  display: none;
}
.navbar .nav-item .dropdown .btn i {
  padding: 8px;
  font-size: clamp(10px, 0.7vw, 10px);
}
.navbar .nav-item .dropdown .dropdown-menu {
  padding: 0;
  background-color: white;
}
.navbar .nav-item .dropdown .dropdown-menu .dropdown-item {
  color: #0774FF;
  font-size: clamp(13px, 1vw, 15px);
}
.navbar .nav-item .dropdown .dropdown-menu .dropdown-item:hover {
  color: white;
  background-color: black;
}
.navbar .nav-item .dropdown:hover .dropdown-menu {
  display: block;
}
.navbar .navbar-toggler {
  color: white;
  border-color: white;
  font-size: 12px;
  padding: 4px 8px;
}
.navbar #navbarSupportedContent form .getstartedbtn {
  display: inline-block;
  height: 100%;
  align-content: center;
  text-align: center;
  text-transform: capitalize;
  text-decoration: none;
  transition: all 0.5s ease-in-out;
  padding: 0.5rem 0rem;
  font-size: clamp(13px, 1vw, 15px);
  width: clamp(90px, 8vw, 115px);
  color: white;
  border: 1px solid white;
  border-radius: 5px;
  font-weight: 500;
}
.navbar #navbarSupportedContent form .getstartedbtn:hover {
  background-color: #FFC107;
  color: black;
  border-color: transparent;
}
.navbar #navbarSupportedContent form .loginbtn {
  display: inline-block;
  height: 100%;
  align-content: center;
  text-align: center;
  text-transform: capitalize;
  text-decoration: none;
  transition: all 0.5s ease-in-out;
  padding: 0.5rem 0.25rem;
  color: white;
  font-size: clamp(13px, 1vw, 15px);
  margin-right: 20px;
  font-weight: 500;
}
.navbar #navbarSupportedContent form .loginbtn i {
  padding-right: 5px;
}
.navbar #navbarSupportedContent form .loginbtn:hover {
  color: black;
}
.navbar #navbarSupportedContent.show {
  background-color: #0774FF;
  padding-bottom: 20px;
}

.df-navbar {
  background-color: #0774FF;
  padding: 8px auto;
}

.hosting-banner {
  padding: clamp(8px, 5%, 118px) clamp(10px, 6%, 120px);
}
.hosting-banner .hosting {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  border-bottom: 5px solid #CCE4FF;
  transition: border-color 0.5s ease-in-out;
  border-radius: 10px;
  height: clamp(150px, 14vw, 200px);
  background: linear-gradient(#CCE4FF, white);
}
.hosting-banner .hosting .hosting-df-img {
  height: clamp(32px, 2.8vw, 52px);
}
.hosting-banner .hosting .hosting-df-img img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.hosting-banner .hosting .hosting-img-div {
  height: clamp(38px, 3.5vw, 52px);
}
.hosting-banner .hosting .hosting-img-div img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.hosting-banner .hosting .hosting-desc-div h3 {
  font-size: clamp(16px, 1.3vw, 20px);
  margin-bottom: 1vw;
  font-weight: bold;
  color: #2D3C58;
}
.hosting-banner .hosting .hosting-desc-div p {
  font-size: clamp(13px, 1vw, 15px);
  margin-bottom: 1vw;
  padding-right: 1vw;
  color: #4C5671;
}
.hosting-banner .hosting .hosting-desc-div a {
  font-size: clamp(13px, 1vw, 15px);
  text-decoration: none;
  color: #2D3C58;
  font-weight: 500;
}
.hosting-banner .hosting .hosting-desc-div a i {
  padding-left: 8px;
  transition: all 0.5s ease-in-out;
}
.hosting-banner .hosting .hosting-desc-div a:hover i {
  padding-left: 15px;
}
.hosting-banner .hosting:hover {
  border-color: #FFC107;
}

.fa-check {
  color: green;
}

.fa-xmark {
  color: red;
}

#nav-tabContent {
  width: 100%;
  margin-bottom: clamp(10px, 6%, 120px);
}
#nav-tabContent .levels-section-banner-df .level {
  border: 1px solid #0774FF;
}
#nav-tabContent .levels-section-banner {
  padding: clamp(10px, 6%, 120px) clamp(10px, 6%, 120px) 0 clamp(10px, 6%, 120px);
}
#nav-tabContent .levels-section-banner .level {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  padding: 2em 0em;
  border-radius: 7px;
  background-color: #F5FAFF;
  background-image: url("https://hostie-react.vercel.app/assets/images/pricing/plan__hover__bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: all 0.5s ease-in-out;
}
#nav-tabContent .levels-section-banner .level h3 {
  text-transform: capitalize;
  margin-bottom: 0.6em;
  font-size: clamp(18px, 1.4vw, 21px);
}
#nav-tabContent .levels-section-banner .level h3 img {
  margin-right: 8px;
  width: clamp(22px, 2.1vw, 32px);
}
#nav-tabContent .levels-section-banner .level p {
  font-size: clamp(11px, 0.9vw, 14px);
}
#nav-tabContent .levels-section-banner .level h1 {
  font-size: clamp(25px, 2.4vw, 35px);
  margin-bottom: 0.5em;
  font-weight: 700;
}
#nav-tabContent .levels-section-banner .level h1 span {
  font-size: clamp(13px, 1vw, 15px);
}
#nav-tabContent .levels-section-banner .level h1 sup {
  font-size: clamp(13px, 1vw, 15px);
  top: -1.5em;
}
#nav-tabContent .levels-section-banner .level a {
  font-size: clamp(12px, 1.2vw, 18px);
  text-transform: capitalize;
  font-weight: 600;
  border-radius: 2px;
  text-decoration: none;
  display: inline-block;
  height: clamp(30px, 2.6vw, 40px);
  align-content: center;
  text-align: center;
  color: white;
  margin-bottom: 1em;
  background-color: #0774FF;
  transition: all 0.5s ease-in-out;
  width: 90%;
}
#nav-tabContent .levels-section-banner .level ul {
  padding-left: 0;
  list-style-type: none;
  width: 90%;
}
#nav-tabContent .levels-section-banner .level ul li {
  font-size: clamp(11px, 0.9vw, 14px);
  color: #2D3C58;
  font-weight: 500;
  text-transform: capitalize;
  padding: 0.5em 0em;
  transition: color 0.5s ease-in-out;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}
#nav-tabContent .levels-section-banner .level ul li .fa-check {
  color: green;
  transition: color 0.5s ease-in-out;
}
#nav-tabContent .levels-section-banner .level ul li .fa-xmark {
  color: red;
  transition: color 0.5s ease-in-out;
}
#nav-tabContent .levels-section-banner .level ul li .fa-xmark,
#nav-tabContent .levels-section-banner .level ul li .fa-check {
  padding-right: 1em;
}
#nav-tabContent .levels-section-banner .level ul .display-features-n {
  display: none;
}
#nav-tabContent .levels-section-banner .level .more-feature {
  font-size: clamp(12px, 1.1vw, 16px);
  cursor: pointer;
  text-transform: capitalize;
  font-weight: 500;
}
#nav-tabContent .levels-section-banner .level .more-feature i {
  padding-left: 0.5em;
  font-size: clamp(11px, 0.9vw, 14px);
}
#nav-tabContent .levels-section-banner .level:hover {
  background-color: #0774FF;
  color: white;
}
#nav-tabContent .levels-section-banner .level:hover ul li {
  color: white;
}
#nav-tabContent .levels-section-banner .level:hover ul li .fa-check,
#nav-tabContent .levels-section-banner .level:hover ul li .fa-xmark {
  color: white;
}
#nav-tabContent .levels-section-banner .level:hover a {
  background-color: white;
  color: #4C5671;
}
#nav-tabContent .levels-section-banner .level:hover .more-feature {
  color: #FFC107;
}
#nav-tabContent .levels-section-banner .level:hover .tag {
  color: #4C5671;
}
#nav-tabContent .levels-section-banner .level:hover .offer span {
  color: white;
}
#nav-tabContent .levels-section-banner .level:hover .offer .off {
  color: #4C5671;
}
#nav-tabContent .levels-section-banner .level .tag {
  position: absolute;
  top: -3.5%;
  bottom: none;
  right: none;
  left: 50%;
  z-index: none;
  transform: translateX(-50%);
  background-color: #FFC107;
  padding: 0.5rem clamp(10px, 1vw, 20px);
  border-radius: 1rem;
  font-size: clamp(13px, 1vw, 15px);
}
#nav-tabContent .levels-section-banner .level .offer {
  display: flex;
  justify-content: none;
  align-items: center;
  flex-direction: row;
}
#nav-tabContent .levels-section-banner .level .offer span {
  font-size: clamp(13px, 1vw, 15px);
  text-decoration: line-through;
  font-weight: 600;
}
#nav-tabContent .levels-section-banner .level .offer .off {
  font-size: clamp(13px, 1vw, 15px);
  padding: 0.5rem clamp(12px, 1vw, 16px);
  border-radius: 20px;
  background-color: #EAF1FF;
  margin: 10px;
}

.choose-hosting-plan-banner {
  display: flex;
  justify-content: none;
  align-items: center;
  flex-direction: column;
}
.choose-hosting-plan-banner h1 {
  font-size: clamp(24px, 3.2vw, 35px);
  text-transform: capitalize;
  color: #2D3C58;
  font-weight: bold;
}
.choose-hosting-plan-banner p {
  font-size: clamp(13px, 1vw, 15px);
  color: #4C5671;
  text-align: center;
  font-weight: 500;
}
.choose-hosting-plan-banner .choose-hosting-btn-div {
  display: flex;
  justify-content: none;
  align-items: center;
  flex-direction: row;
  position: relative;
  margin-right: 2rem;
  margin-top: clamp(10px, 3%, 50px);
  width: -moz-fit-content;
  width: fit-content;
  border: none;
}
.choose-hosting-plan-banner .choose-hosting-btn-div .nav-tabs {
  border-radius: 4px;
  padding: 0.4rem 0.2rem;
  background-color: white;
  border-bottom: none;
}
.choose-hosting-plan-banner .choose-hosting-btn-div .nav-tabs button {
  display: inline-block;
  height: 100%;
  align-content: center;
  text-align: center;
  text-transform: capitalize;
  text-decoration: none;
  transition: all 0.5s ease-in-out;
  margin-right: 5px;
  padding: 0.5rem 0.8rem;
  border-radius: 5px;
  font-size: clamp(13px, 1vw, 15px);
  border: none;
  transition: all 0.5s ease-in-out;
}
.choose-hosting-plan-banner .choose-hosting-btn-div .nav-tabs button.active {
  background-color: #0774FF;
  color: white;
}
.choose-hosting-plan-banner span {
  font-size: clamp(13px, 1vw, 15px);
  padding-left: clamp(12px, 2.5vw, 35px);
}
.choose-hosting-plan-banner .absolute-arrow-img {
  position: absolute;
  top: -20%;
  bottom: none;
  right: 16%;
  left: none;
  z-index: none;
  width: clamp(50px, 5vw, 80px);
}

.best-services-banner-df {
  background-color: white !important;
}
.best-services-banner-df .custom-row .hosting {
  background-color: #EAF1FF !important;
}
.best-services-banner-df .custom-row .hosting:hover {
  background-color: #0774FF !important;
  border-color: #013396 !important;
}
.best-services-banner-df .custom-row .hosting:hover h3,
.best-services-banner-df .custom-row .hosting:hover p,
.best-services-banner-df .custom-row .hosting:hover a,
.best-services-banner-df .custom-row .hosting:hover small {
  color: white !important;
}
.best-services-banner-df .custom-row .hosting .hosting-img-div {
  height: clamp(42px, 3.8vw, 55px) !important;
}
.best-services-banner-df .custom-row .hosting .hosting-img-div img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.best-services-banner {
  padding: clamp(8px, 5%, 118px) clamp(10px, 6%, 120px) clamp(8px, 5%, 118px) clamp(10px, 6%, 120px);
  background-color: #0245CA;
}
.best-services-banner .best-services-heading-container {
  text-align: center;
}
.best-services-banner .best-services-heading-container h1 {
  color: white;
  font-size: clamp(24px, 3.2vw, 35px);
  text-transform: capitalize;
  font-weight: bold;
}
.best-services-banner .best-services-heading-container p {
  color: white;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 500;
}
.best-services-banner .hosting-services-btn span {
  color: white;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.1);
  font-size: clamp(13px, 1vw, 15px);
}
.best-services-banner .hosting-services-btn span a {
  padding-left: 0.8em;
  color: white;
  transition: all 0.5s ease-in-out;
}
.best-services-banner .hosting-services-btn span a:hover {
  font-weight: bold;
}
.best-services-banner .custom-row {
  margin: clamp(10px, 1vw, 30px) 0 clamp(20px, 3.5vw, 60px) 0;
  flex-wrap: wrap;
}
.best-services-banner .custom-row .hosting {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  border-bottom: 5px solid #CCE4FF;
  transition: border-color 0.5s ease-in-out;
  border-radius: 10px;
  height: clamp(150px, 14vw, 200px);
  background-image: url("https://hostie-react.vercel.app/assets/images/pricing/plan__hover__bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: all 0.5s ease-in-out;
  background-color: white;
}
.best-services-banner .custom-row .hosting .hosting-df-img {
  height: clamp(32px, 2.8vw, 52px);
}
.best-services-banner .custom-row .hosting .hosting-df-img img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.best-services-banner .custom-row .hosting .hosting-img-div {
  height: clamp(38px, 3.5vw, 52px);
}
.best-services-banner .custom-row .hosting .hosting-img-div img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.best-services-banner .custom-row .hosting .hosting-desc-div h3 {
  font-size: clamp(16px, 1.3vw, 20px);
  margin-bottom: 1vw;
  font-weight: bold;
  color: #2D3C58;
}
.best-services-banner .custom-row .hosting .hosting-desc-div p {
  font-size: clamp(13px, 1vw, 15px);
  margin-bottom: 1vw;
  padding-right: 1vw;
  color: #4C5671;
}
.best-services-banner .custom-row .hosting .hosting-desc-div a {
  font-size: clamp(13px, 1vw, 15px);
  text-decoration: none;
  color: #2D3C58;
  font-weight: 500;
}
.best-services-banner .custom-row .hosting .hosting-desc-div a i {
  padding-left: 8px;
  transition: all 0.5s ease-in-out;
}
.best-services-banner .custom-row .hosting .hosting-desc-div a:hover i {
  padding-left: 15px;
}
.best-services-banner .custom-row .hosting:hover {
  background-color: #013396;
  border-color: white;
}
.best-services-banner .custom-row .hosting:hover h3,
.best-services-banner .custom-row .hosting:hover p,
.best-services-banner .custom-row .hosting:hover a {
  color: white;
}

.choose-hostie-banner-header {
  margin: clamp(10px, 6%, 120px) clamp(10px, 6%, 120px) 0 clamp(10px, 6%, 120px);
}
.choose-hostie-banner-header h1 {
  font-size: clamp(20px, 2.5vw, 40px);
  text-transform: capitalize;
  font-weight: bold;
  margin-bottom: 2vw;
}
.choose-hostie-banner-header p {
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 500;
  margin-bottom: 0;
}
.choose-hostie-banner-header a {
  display: inline-block;
  height: 100%;
  align-content: center;
  text-align: center;
  text-transform: capitalize;
  text-decoration: none;
  transition: all 0.5s ease-in-out;
  padding: 0.5rem 0.6rem;
  font-size: clamp(13px, 1vw, 15px);
  width: clamp(115px, 8.5vw, 120vw);
  color: #4C5671;
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  font-weight: 500;
}
.choose-hostie-banner-header a:hover {
  background-color: #FFC107;
  color: black;
  border-color: transparent;
}
.choose-hostie-banner-header .border-circle-div {
  border-bottom: 2px solid #CCE4FF;
  display: flex;
  justify-content: space-around;
  align-items: none;
  flex-direction: row;
  margin-top: clamp(8px, 4%, 90px);
}
.choose-hostie-banner-header .border-circle-div .blue {
  display: block;
  height: clamp(10px, 1vw, 1.3vw);
  width: clamp(10px, 1vw, 1.3vw);
  background-color: #013396;
  border-radius: 50%;
  margin-bottom: -6px;
  position: relative;
}
.choose-hostie-banner-header .border-circle-div .blue::after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: none;
  right: none;
  left: 50%;
  z-index: none;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  height: 50%;
  width: 50%;
  background-color: white;
}

.hostie {
  display: flex;
  justify-content: none;
  align-items: center;
  flex-direction: column;
  background-color: white;
  padding: 1.8vw 1.5vw;
  border-radius: 10px;
  border-bottom: 5px solid transparent;
  transition: all 0.5s ease-in-out;
  position: relative;
}
.hostie .hosting-img-div {
  height: clamp(38px, 3.5vw, 52px);
  margin-bottom: 1vw;
}
.hostie .hosting-img-div img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.hostie h3 {
  font-size: clamp(16px, 1.3vw, 20px);
  margin-bottom: 1vw;
  font-weight: bold;
  text-align: center;
}
.hostie p {
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 500;
}
.hostie:hover {
  border-color: #013396;
}

.hostie-getstarted {
  display: flex;
  justify-content: none;
  align-items: none;
  flex-direction: column;
  background-color: white;
  padding: 1.8vw 1.5vw;
  border-radius: 10px;
  border-bottom: 5px solid transparent;
  transition: all 0.5s ease-in-out;
  position: relative;
}
.hostie-getstarted h3 {
  font-size: clamp(16px, 1.3vw, 20px);
  margin-bottom: 1vw;
}
.hostie-getstarted h3 a {
  text-decoration: none;
  color: #4C5671;
}
.hostie-getstarted i {
  font-size: clamp(20px, 2vw, 30px);
  margin-bottom: 15px;
}
.hostie-getstarted:hover {
  background-color: #FFC107;
  border-color: black;
  color: black;
}
.hostie-getstarted:hover h3 a {
  color: black;
}

.hostie-getstarted-df i {
  font-size: clamp(23px, 3vw, 45px) !important;
  padding: 1rem;
  background-color: #EAF1FF;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 50%;
}
.hostie-getstarted-df:hover {
  background-color: #0774FF !important;
  color: white;
  border-color: #013396 !important;
}
.hostie-getstarted-df:hover i {
  color: #4C5671;
}

.choose-hostie-banner {
  padding: clamp(8px, 2.8%, 40px) clamp(10px, 6%, 120px) clamp(8px, 5%, 120px) clamp(10px, 6%, 120px);
}
.choose-hostie-banner h1 {
  font-size: clamp(24px, 3.2vw, 35px);
  text-transform: capitalize;
  color: #4C5671;
  text-align: center;
  font-weight: bold;
  margin: 40px 0px;
}

.sign-up-banner-section {
  background-color: white;
}
.sign-up-banner-section .sign-now-banner {
  margin: clamp(8px, 2.8%, 40px) clamp(10px, 6%, 120px) clamp(8px, 5%, 120px) clamp(10px, 6%, 120px);
  height: clamp(100px, 12vw, 170px);
  padding: 2vw;
  position: relative;
  background-color: #0774FF;
}
.sign-up-banner-section .sign-now-banner img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.sign-up-banner-section .sign-now-banner h1 {
  position: absolute;
  top: 50%;
  bottom: none;
  right: none;
  left: 5%;
  z-index: none;
  transform: translateY(-50%);
  font-size: clamp(16px, 2.5vw, 40px);
  color: white;
  text-transform: capitalize;
  margin: 0;
  font-weight: bold;
}
.sign-up-banner-section .sign-now-banner a {
  display: inline-block;
  height: 100%;
  align-content: center;
  text-align: center;
  text-transform: capitalize;
  text-decoration: none;
  transition: all 0.5s ease-in-out;
  position: absolute;
  top: 50%;
  bottom: none;
  right: 5%;
  left: none;
  z-index: none;
  transform: translateY(-50%);
  font-size: clamp(13px, 1vw, 15px);
  width: clamp(85px, 8.5vw, 9vw);
  height: clamp(30px, 3vw, 48px);
  font-weight: bold;
  color: #4C5671;
  border-radius: 5px;
  background-color: white;
}
.sign-up-banner-section .sign-now-banner a:hover {
  background-color: #FFC107;
  color: black;
  border-color: transparent;
}
.sign-up-banner-section .sign-now-banner a:hover i {
  padding-left: 10px;
}
.sign-up-banner-section .sign-now-banner a i {
  font-size: clamp(11px, 0.9vw, 14px);
  padding-left: 5px;
  transition: all 0.5s ease-in-out;
}

.footer-section-banner {
  padding: clamp(8px, 2.8%, 40px) clamp(10px, 6%, 120px) 0 clamp(10px, 6%, 120px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
.footer-section-banner .header-logo-img {
  width: clamp(135px, 15vw, 220px);
  padding-bottom: clamp(5px, 1.2vw, 1.4vw);
}
.footer-section-banner .header-logo-img img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.footer-section-banner p {
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 500;
  padding: clamp(10px, 1vw, 1.2vw) 0 clamp(10px, 2vw, 2.2vw) 0;
  width: -moz-fit-content;
  width: fit-content;
  text-transform: capitalize;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
.footer-section-banner ul {
  list-style-type: none;
  padding-left: 0;
}
.footer-section-banner ul li {
  font-size: clamp(13px, 1vw, 15px);
  padding-bottom: clamp(10px, 1vw, 1.2vw);
  font-weight: 500;
}
.footer-section-banner ul li i {
  padding: clamp(7px, 0.7vw, 0.9vw);
  margin-right: 10px;
  border: 0.5px solid rgba(0, 0, 0, 0.125);
  border-radius: 4px;
  transition: all 0.2s ease-in-out;
}
.footer-section-banner ul li i:hover {
  border-color: #0774FF;
}
.footer-section-banner ul li .blue-icon {
  color: white;
  background-color: #0774FF;
  border: none !important;
  padding: clamp(7px, 0.7vw, 0.9vw);
  transition: all 0.2s ease-in-out;
}
.footer-section-banner ul li .blue-icon:hover {
  background-color: #FFC107;
  color: black;
}
.footer-section-banner ul li a {
  text-decoration: none;
  color: #4C5671;
  text-transform: capitalize;
  transition: color 0.1s ease-in-out;
}
.footer-section-banner ul li a:hover {
  color: #0774FF;
}
.footer-section-banner ul .email-box {
  display: flex;
  justify-content: none;
  align-items: center;
  flex-direction: row;
  height: clamp(50px, 3.8vw, 55px);
  background-color: white;
  margin-bottom: 2rem;
  padding: 0.5vw;
  box-shadow: 0px 0px 10px 0.5px #EAF1FF;
  border: 1px solid #EAF1FF;
  border-radius: 5rem;
}
.footer-section-banner ul .email-box input {
  border: none;
  box-shadow: none;
  font-size: clamp(13px, 1vw, 15px);
}
.footer-section-banner ul .email-box .send-icon {
  background-color: #0774FF;
  padding: clamp(7px, 0.8vw, 1vw);
  margin-right: 5px;
  border-radius: 50%;
  color: white;
  transform: rotate(-45deg);
  transition: all 0.1s ease-in-out;
  font-size: clamp(13px, 1vw, 15px);
}
.footer-section-banner ul .email-box .send-icon:hover {
  background-color: #FFC107;
  color: black;
}
.footer-section-banner ul .email-box .fa-envelope-open {
  padding-left: 10px;
  font-size: clamp(13px, 1vw, 15px);
}
.footer-section-banner ul h3 {
  text-transform: capitalize;
  font-weight: bold;
  margin-bottom: 2.4vw;
  font-size: clamp(16px, 1.3vw, 20px);
}

footer {
  padding: clamp(10px, 1.3vw, 40px) clamp(10px, 6%, 120px);
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}
footer p {
  font-size: clamp(13px, 1vw, 15px);
  text-transform: capitalize;
  font-weight: 500;
  max-width: -moz-fit-content;
  max-width: fit-content;
  align-content: center;
  margin-bottom: 0;
}
footer ul {
  padding-left: 0;
  list-style-type: none;
  align-items: center;
  margin-bottom: 0;
}
footer ul li {
  padding-right: clamp(2px, 0.5vw, 0.9vw);
}
footer ul li img {
  width: clamp(30px, 3vw, 48px);
}
footer .position-cover-div {
  position: fixed;
  right: 3%;
  bottom: 3%;
  cursor: pointer;
}
footer .position-cover-div .calculator-span-tag {
  display: block;
  height: clamp(30px, 3vw, 48px);
  width: clamp(30px, 3vw, 48px);
  background-color: #0774FF;
  transition: all 0.5s ease-in-out;
  border-radius: 50%;
  position: relative;
}
footer .position-cover-div .calculator-span-tag .arrow-child-span {
  position: absolute;
  top: 50%;
  bottom: none;
  right: none;
  left: 50%;
  z-index: none;
  transform: translate(-50%, -50%);
  height: clamp(20px, 1.8vw, 2vw);
  width: clamp(20px, 1.8vw, 2vw);
  border-radius: 50%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
footer .position-cover-div .calculator-span-tag .arrow-child-span i {
  color: #0774FF;
  font-size: clamp(13px, 1vw, 15px);
  transition: all 0.5s ease-in-out;
}

.login-section .login .header-logo-img {
  width: clamp(135px, 15vw, 220px);
}
.login-section .login .header-logo-img img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

@keyframes Smoothresizing {
  from {
    width: 4vw;
  }
  to {
    width: 3.5vw;
  }
}
@keyframes Smoothmove {
  from {
    right: 17%;
  }
  to {
    right: 15%;
  }
}
@keyframes SmoothBouncingOne {
  from {
    top: 22%;
  }
  to {
    top: 20%;
  }
}
@keyframes SmoothBouncingTwo {
  from {
    bottom: 10%;
  }
  to {
    bottom: 12%;
  }
}
@keyframes SmoothBouncingThree {
  from {
    Top: 32%;
  }
  to {
    Top: 34%;
  }
}
@keyframes SmoothBouncingFly {
  from {
    right: 10%;
  }
  to {
    right: 12%;
  }
}
@keyframes smoothScroll {
  0% {
    transform: translateY(-40px);
  }
  100% {
    transform: translateY(0px);
  }
}
.login-section {
  text-align: center;
}
.login-section .login {
  padding: 1rem 0rem;
  height: 90vh;
  width: 45vw;
  margin: 20px auto;
  text-align: center;
  background-color: white;
}
.login-section .login .header-logo-img {
  margin: 10px auto;
  width: clamp(135px, 15vw, 220px);
}
.login-section .login .header-logo-img img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.login-section .login h1 {
  font-size: clamp(36px, 3.5vw, 52px);
  margin-bottom: 20px;
  font-weight: bold;
}
.login-section .login input[type=text],
.login-section .login input[type=password],
.login-section .login input[type=email] {
  margin: 10px auto;
  border: none;
  box-shadow: none;
  font-size: clamp(13px, 1vw, 15px);
  border: 1px solid #EAF1FF;
  background-color: transparent;
  padding: 0.7rem;
  width: 60%;
}
.login-section .login input[type=text]:focus,
.login-section .login input[type=password]:focus,
.login-section .login input[type=email]:focus {
  box-shadow: none;
}
.login-section .login .terms-uses {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  margin: 20px 0px;
}
.login-section .login .terms-uses input[type=checkbox] {
  padding: 0.5rem;
  margin-right: 10px;
  border-color: #0774FF;
}
.login-section .login .terms-uses span {
  font-size: clamp(13px, 1vw, 15px);
}
.login-section .login .terms-uses span a:hover {
  color: #FFC107;
}
.login-section .login .login-btn {
  font-size: clamp(16px, 1.1vw, 20px);
  text-transform: capitalize;
  font-weight: bold;
  text-decoration: none;
  color: white;
  background-color: #0774FF;
  display: block;
  height: clamp(40px, 3vw, 3.1vw);
  align-content: center;
  text-align: center;
  margin: 25px auto;
  border-radius: 6px;
  width: clamp(200px, 40%, 42%);
  transition: all 0.5s ease-in-out;
}
.login-section .login .login-btn:hover {
  background-color: #FFC107;
  color: black;
}
.login-section .login p {
  font-size: clamp(13px, 1vw, 15px);
  margin: 50px 0px;
}
.login-section .login p a:hover {
  color: #FFC107;
}

.ask-a-question-banner {
  padding: clamp(8px, 2.8%, 40px) clamp(10px, 6%, 120px) clamp(8px, 5%, 120px) clamp(10px, 6%, 120px);
}
.ask-a-question-banner .question-msg-div .question {
  position: relative;
}
.ask-a-question-banner .question-msg-div .question .msg-img-div {
  width: 20vw;
}
.ask-a-question-banner .question-msg-div .question .msg-img-div img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.ask-a-question-banner .question-msg-div .question .popper-img {
  width: 10vw;
  position: absolute;
  top: 44%;
  bottom: none;
  right: 20%;
  left: none;
  z-index: none;
}
.ask-a-question-banner .question-msg-div .question h1 {
  font-size: clamp(36px, 3.5vw, 52px);
  text-transform: capitalize;
  color: #4C5671;
  font-weight: bold;
  margin-bottom: clamp(23px, 2vw, 2.5vw);
}
.ask-a-question-banner .question-msg-div .question h3 {
  color: #4C5671;
  font-size: clamp(16px, 1.3vw, 20px);
  margin-bottom: clamp(25px, 2vw, 2.5vw);
}
.ask-a-question-banner .question-msg-div .msg {
  padding: 2.5vw 1vw 1vw 1vw;
  border: 1px solid #EAF1FF;
}
.ask-a-question-banner .question-msg-div .msg input[type=phone-no],
.ask-a-question-banner .question-msg-div .msg input[type=text],
.ask-a-question-banner .question-msg-div .msg input[type=password],
.ask-a-question-banner .question-msg-div .msg input[type=email],
.ask-a-question-banner .question-msg-div .msg textarea {
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-size: clamp(13px, 1vw, 15px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  background-color: transparent;
  padding: 0.7rem;
  width: 100%;
  color: #4C5671;
}
.ask-a-question-banner .question-msg-div .msg input[type=phone-no]:focus,
.ask-a-question-banner .question-msg-div .msg input[type=text]:focus,
.ask-a-question-banner .question-msg-div .msg input[type=password]:focus,
.ask-a-question-banner .question-msg-div .msg input[type=email]:focus,
.ask-a-question-banner .question-msg-div .msg textarea:focus {
  box-shadow: none;
}
.ask-a-question-banner .question-msg-div .msg select {
  width: auto;
  border-radius: 0rem;
  border: none;
  height: 100%;
  color: grey;
  font-size: clamp(13px, 1vw, 15px);
  margin: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  font-weight: 500;
  background-color: transparent;
  width: 100%;
  background-position: right center;
  background-size: clamp(7px, 0.8vw, 0.9vw) clamp(7px, 0.8vw, 0.9vw);
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20fill%3D%27none%27%20stroke%3D%27%23999999%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20stroke-width%3D%272%27%20d%3D%27M2%205l6%206%206-6%27%2F%3E%3C%2Fsvg%3E);
}
.ask-a-question-banner .question-msg-div .msg select:focus {
  box-shadow: none;
}
.ask-a-question-banner .question-msg-div .msg .terms-uses {
  margin: 20px 0px;
}
.ask-a-question-banner .question-msg-div .msg .terms-uses input[type=checkbox] {
  padding: 0.5rem;
  margin-right: 10px;
  border-color: #0774FF;
}
.ask-a-question-banner .question-msg-div .msg .terms-uses span {
  font-size: clamp(13px, 1vw, 15px);
}
.ask-a-question-banner .question-msg-div .msg .terms-uses span a:hover {
  color: #FFC107;
}
.ask-a-question-banner .question-msg-div .msg .login-btn {
  font-size: clamp(16px, 1.1vw, 20px);
  text-transform: capitalize;
  font-weight: bold;
  text-decoration: none;
  color: white;
  background-color: #0774FF;
  display: block;
  height: clamp(40px, 3vw, 3.1vw);
  align-content: center;
  text-align: center;
  margin: 30px auto 0 auto;
  border-radius: 6px;
  width: clamp(200px, 15vw, 215px);
  transition: all 0.5s ease-in-out;
}
.ask-a-question-banner .question-msg-div .msg .login-btn:hover {
  background-color: #FFC107;
  color: black;
}

.our-advance-services-section-bg {
  background-color: #2D3C58;
}
.our-advance-services-section-bg h1 {
  color: white;
}
.our-advance-services-section-bg h3 {
  color: white;
}

.our-advance-services-section {
  padding: 0 clamp(10px, 6%, 120px) 0 clamp(10px, 6%, 120px);
}
.our-advance-services-section .services .banner-img {
  height: 80%;
}
.our-advance-services-section .services .banner-img img {
  border-radius: 10px;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.our-advance-services-section .details h1 {
  font-size: clamp(36px, 3.5vw, 52px);
  text-transform: capitalize;
  font-weight: bold;
  margin-bottom: clamp(10px, 1.2vw, 1.5vw);
}
.our-advance-services-section .details a {
  display: inline-block;
  height: 100%;
  align-content: center;
  text-align: center;
  text-transform: capitalize;
  text-decoration: none;
  transition: all 0.5s ease-in-out;
  transform: translateY(-50%);
  font-size: clamp(13px, 1vw, 15px);
  width: clamp(130px, 10vw, 10.3vw);
  height: clamp(40px, 3.4vw, 48px);
  font-weight: bold;
  color: black;
  border-radius: 5px;
  margin-top: 25px;
  background-color: #FFC107;
}
.our-advance-services-section .details a:hover {
  background-color: white;
  color: #4C5671;
  border-color: transparent;
}
.our-advance-services-section .details a:hover i {
  padding-left: 15px;
}
.our-advance-services-section .details a i {
  font-size: clamp(11px, 0.9vw, 14px);
  padding-left: 10px;
  transition: all 0.5s ease-in-out;
}
.our-advance-services-section .details h3 {
  font-size: clamp(13px, 1vw, 15px);
  line-height: clamp(20px, 1.5vw, 22px);
  margin-bottom: clamp(25px, 2vw, 2.5vw);
}

.knowledges-section {
  padding: clamp(10px, 6%, 120px) clamp(10px, 6%, 120px) clamp(10px, 6%, 120px) clamp(10px, 6%, 120px);
}
.knowledges-section .knowledges .knowledges-col {
  background-color: white;
  border: 1px solid #EAF1FF;
}
.knowledges-section .knowledges .knowledges-col h3 {
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: bolder;
  text-transform: capitalize;
  width: 90%;
  margin: 20px auto;
  text-align: start;
}
.knowledges-section .knowledges .knowledges-col ul {
  list-style-type: none;
  padding-left: 0;
  width: 90%;
  margin: 20px auto;
}
.knowledges-section .knowledges .knowledges-col ul li {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 600;
  padding: 1rem;
  border: 1px solid #EAF1FF;
  margin-bottom: 5px;
  transition: all 0.25s ease-in-out;
}
.knowledges-section .knowledges .knowledges-col ul li:hover {
  background-color: #0774FF;
  color: white;
}
.knowledges-section .knowledges .knowledgebase-desc {
  background-color: white;
}
.knowledges-section .knowledges .knowledgebase-desc .desc {
  padding: 20px;
  border: 1px solid #EAF1FF;
}
.knowledges-section .knowledges .knowledgebase-desc .desc h4 {
  margin: 15px 0px;
}
.knowledges-section .knowledges .knowledgebase-desc .desc i {
  padding-right: 10px;
}
.knowledges-section .knowledges .knowledgebase-desc .desc p {
  font-size: clamp(13px, 1vw, 15px);
}

.world-class-support-section-df .world-class-support ul li {
  font-weight: 600 !important;
  font-size: clamp(13px, 1vw, 15px) !important;
}

.world-class-support-section-bg {
  background-color: #EAF1FF;
}

.world-class-support-section {
  padding: clamp(10px, 6%, 120px) clamp(10px, 6%, 120px) 20px clamp(10px, 6%, 120px);
  overflow-x: hidden;
}
.world-class-support-section .world-class-support .desc h1 {
  font-size: clamp(24px, 3.2vw, 35px);
  margin-bottom: 15px;
}
.world-class-support-section .world-class-support .desc ul {
  list-style-type: none;
  padding-left: 0;
}
.world-class-support-section .world-class-support .desc ul li {
  font-weight: bold;
  font-size: clamp(15px, 1.3vw, 20px);
  padding: 0.5rem 0rem;
}
.world-class-support-section .world-class-support .desc ul li i {
  padding-right: 10px;
  color: #0774FF;
}
.world-class-support-section .world-class-support .desc a {
  display: inline-block;
  height: 100%;
  align-content: center;
  text-align: center;
  text-transform: capitalize;
  text-decoration: none;
  transition: all 0.5s ease-in-out;
  font-size: clamp(13px, 1vw, 15px);
  width: clamp(115px, 8.5vw, 9vw);
  height: clamp(30px, 3vw, 48px);
  font-weight: bold;
  color: white;
  border-radius: 5px;
  background-color: #0774FF;
}
.world-class-support-section .world-class-support .desc a:hover {
  background-color: #FFC107;
  color: black;
  border-color: transparent;
}
.world-class-support-section .world-class-support .desc a:hover i {
  padding-left: 10px;
  color: black;
}
.world-class-support-section .world-class-support .desc a i {
  font-size: clamp(11px, 0.9vw, 14px);
  color: white;
  padding-left: 5px;
  transition: all 0.5s ease-in-out;
}
.world-class-support-section .world-class-support .img-div {
  height: 25vw;
}
.world-class-support-section .world-class-support .img-div img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  transform: translate(20%, -20%);
}

.frequently-asked-questions-section {
  padding: clamp(10px, 6%, 120px) clamp(10px, 6%, 120px) 20px clamp(10px, 6%, 120px);
}
.frequently-asked-questions-section .frequently-asked-questions h1 {
  font-size: clamp(36px, 3.5vw, 52px);
  text-transform: capitalize;
  text-align: center;
  font-weight: bold;
  margin-bottom: clamp(23px, 2vw, 2.5vw);
}
.frequently-asked-questions-section .frequently-asked-questions .accordion .accordion-item button {
  background-color: #EAF1FF;
  color: #4C5671;
  font-weight: 600;
  font-size: clamp(16px, 1.3vw, 20px);
  box-shadow: none;
}
.frequently-asked-questions-section .frequently-asked-questions .accordion .accordion-item .accordion-body {
  font-size: clamp(13px, 1vw, 15px);
}

.sign-up-banner-section-knowledgebase {
  background-color: white;
}
.sign-up-banner-section-knowledgebase .sign-now-banner {
  margin: clamp(8px, 2.8%, 40px) clamp(10px, 6%, 120px) clamp(8px, 5%, 120px) clamp(10px, 6%, 120px);
  height: clamp(170px, 18vw, 300px);
  padding: 2vw;
  position: relative;
  background-color: #0774FF;
}
.sign-up-banner-section-knowledgebase .sign-now-banner img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.sign-up-banner-section-knowledgebase .sign-now-banner h1 {
  position: absolute;
  top: 54%;
  bottom: none;
  right: none;
  left: 5%;
  z-index: none;
  transform: translateY(-50%);
  font-size: clamp(16px, 2.5vw, 40px);
  color: white;
  text-transform: capitalize;
  margin: 0;
  font-weight: bold;
}
.sign-up-banner-section-knowledgebase .sign-now-banner a {
  display: inline-block;
  height: 100%;
  align-content: center;
  text-align: center;
  text-transform: capitalize;
  text-decoration: none;
  transition: all 0.5s ease-in-out;
  position: absolute;
  top: 50%;
  bottom: none;
  right: 5%;
  left: none;
  z-index: none;
  transform: translateY(-50%);
  font-size: clamp(13px, 1vw, 15px);
  width: clamp(120px, 9.5vw, 9.6vw);
  height: clamp(30px, 3vw, 48px);
  font-weight: bold;
  color: #4C5671;
  border-radius: 5px;
  background-color: #FFC107;
}
.sign-up-banner-section-knowledgebase .sign-now-banner a:hover {
  background-color: white;
  border-color: transparent;
}
.sign-up-banner-section-knowledgebase .sign-now-banner .popular-domains {
  position: absolute;
  top: 19%;
  bottom: none;
  right: none;
  left: 5%;
  z-index: none;
}
.sign-up-banner-section-knowledgebase .sign-now-banner .popular-domains .domain {
  padding: 0.3rem 0.4rem;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  font-size: clamp(13px, 1vw, 15px);
  color: white;
  text-wrap: nowrap;
  margin-right: 10px;
  margin-bottom: 10px;
}

.Table-Of-Domains {
  padding: 20px clamp(10px, 6%, 120px) 20px clamp(10px, 6%, 120px);
  background-color: #EAF1FF;
}
.Table-Of-Domains .table {
  border: 1px solid #4C5671;
  margin-bottom: clamp(10px, 6%, 120px);
}
.Table-Of-Domains .table .bg-blue {
  background-color: #0774FF !important;
  color: white;
}
.Table-Of-Domains .table tr th,
.Table-Of-Domains .table tr td {
  font-size: clamp(13px, 1vw, 15px);
  width: 33.3%;
  text-align: center;
  padding: 1rem;
  align-content: center;
}
.Table-Of-Domains .table tr th p,
.Table-Of-Domains .table tr td p {
  margin: 0;
}
.Table-Of-Domains .table tr:hover {
  background-color: white;
}

.shopping-cart-count {
  display: block;
  border: 0.5px solid #0774FF;
  padding: 10px;
  border-radius: 8px;
}
.shopping-cart-count i {
  position: relative;
  color: #0774FF;
}
.shopping-cart-count i span {
  color: white;
  position: absolute;
  top: -11px;
  bottom: none;
  right: -8px;
  left: none;
  z-index: none;
  display: block;
  height: 14px;
  width: 14px;
  font-size: 10px;
  text-align: center;
  align-content: center;
  color: white;
  border-radius: 50%;
  background-color: #FFC107;
}

.categories-section {
  padding: clamp(10px, 3%, 55px) clamp(10px, 6%, 120px) 20px clamp(10px, 6%, 120px);
}
.categories-section .categories .nav {
  list-style-type: none;
  padding-left: 0;
  display: block;
  border-bottom: none;
}
.categories-section .categories .nav li .nav-link {
  color: #4C5671 !important;
  width: 100%;
  font-weight: normal !important;
  text-align: start;
  border-radius: 0 !important;
  color: #4C5671;
  background-color: transparent !important;
  padding: 10px;
  border: 0.1px solid rgba(0, 0, 0, 0.1);
  border-bottom: none;
  font-size: clamp(13px, 1vw, 15px);
  text-transform: capitalize;
  transition: background-color 0.5s ease;
}
.categories-section .categories .nav li .nav-link:last-child {
  border-bottom: 0.1px solid rgba(0, 0, 0, 0.1);
}
.categories-section .categories .nav li .nav-link.active {
  background-color: #0774FF !important;
  color: white !important;
}
.categories-section .categories .nav li:first-child {
  border-radius: 5px 5px 0px 0px;
  background-color: rgba(0, 0, 0, 0.05);
  color: #0774FF;
  font-weight: bold;
  padding: 10px;
  text-transform: capitalize;
}
.categories-section .details h1 {
  font-size: clamp(24px, 3.2vw, 35px);
  font-weight: bold;
  text-transform: capitalize;
  color: black;
  margin-bottom: 5px;
}
.categories-section .details .paragraph-hd {
  font-size: clamp(13px, 1vw, 15px);
  text-transform: capitalize;
  margin-bottom: 25px;
}
.categories-section .details .order {
  padding: 3vw 2vw;
  background: linear-gradient(180deg, #F3F5FF 0%, rgba(231, 235, 255, 0) 100%);
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.categories-section .details .order a {
  text-decoration: none;
  display: inline-block;
  height: 100%;
  align-content: center;
  text-align: center;
  text-transform: capitalize;
  text-decoration: none;
  transition: all 0.5s ease-in-out;
  font-size: clamp(13px, 1vw, 15px);
  width: clamp(150px, 10vw, 10.2vw);
  height: clamp(30px, 3vw, 48px);
  font-weight: bold;
  color: white;
  border-radius: 2rem;
  border: none;
  margin: 8px 0px;
  background-color: #0774FF;
}
.categories-section .details .order a i {
  padding-right: 7px;
}
.categories-section .details .order a:hover {
  background-color: #FFC107;
}
.categories-section .details .order p {
  margin: 0;
  font-size: clamp(13px, 1vw, 15px);
  text-transform: capitalize;
}
.categories-section .details .order h3 {
  font-size: clamp(18px, 1.4vw, 21px);
  text-transform: capitalize;
  color: rgba(0, 0, 0, 0.75);
  margin-bottom: 15px;
}
.categories-section .details .order h4 {
  text-transform: capitalize;
  color: rgba(0, 0, 0, 0.75);
  font-size: clamp(10px, 0.9vw, 14px);
  margin-bottom: 5px;
}
.categories-section .details .order h1 {
  font-size: clamp(18px, 1.4vw, 21px);
  font-weight: bold;
  color: #0774FF;
  margin-bottom: 5px;
}
.categories-section .details .order small {
  font-size: clamp(8px, 0.8vw, 14px);
  margin-bottom: 15px;
}
.categories-section .details .order ul {
  padding-left: 0;
  list-style-type: none;
}
.categories-section .details .order ul li {
  font-size: clamp(13px, 1vw, 15px);
  text-transform: capitalize;
  padding: 4px;
}
.categories-section .details .order ul li i {
  padding-right: 5px;
  color: rgba(0, 128, 0, 0.7);
}
.categories-section .details .order:hover {
  border-color: #0774FF;
}
.categories-section .plan-section h3 {
  font-size: clamp(18px, 1.4vw, 21px);
  text-transform: capitalize;
  font-weight: bold;
  color: black;
  margin: 40px 0px 20px 0px;
}
.categories-section .plan-section ul {
  padding-left: 0;
  list-style-type: none;
}
.categories-section .plan-section ul li {
  font-size: clamp(13px, 1vw, 15px);
}
.categories-section .plan-section ul li i {
  padding-right: 8px;
}

@media only screen and (max-width: 1015px) {
  .Top-Banner .absolute-desc-box,
  .Top-Banner .absolute-desc-box-getstarted {
    width: 60vw;
  }
}
@media only screen and (max-width: 996px) {
  .login-section .login {
    width: 55vw;
  }
  .login-section .login input[type=text],
  .login-section .login input[type=password],
  .login-section .login input[type=email] {
    width: 60%;
  }
}
@media only screen and (max-width: 880px) {
  .Top-Banner .absolute-desc-box,
  .Top-Banner .absolute-desc-box-getstarted {
    width: 70vw;
  }
}
@media only screen and (max-width: 754px) {
  .Top-Banner .absolute-desc-box,
  .Top-Banner .absolute-desc-box-getstarted {
    width: 80vw;
  }
  .login-section .login {
    width: 65vw;
  }
  .login-section .login input[type=text],
  .login-section .login input[type=password],
  .login-section .login input[type=email] {
    width: 70%;
  }
}
@media only screen and (max-width: 660px) {
  .Top-Banner .absolute-desc-box,
  .Top-Banner .absolute-desc-box-getstarted {
    width: 90vw;
  }
}
@media only screen and (max-width: 545px) {
  .Top-Banner .absolute-desc-box,
  .Top-Banner .absolute-desc-box-getstarted {
    width: 95vw;
  }
  .login-section .login {
    width: 90vw;
  }
  .login-section .login input[type=text],
  .login-section .login input[type=password],
  .login-section .login input[type=email] {
    width: 90%;
  }
  .sign-up-banner-section-knowledgebase .sign-now-banner a {
    position: absolute;
    top: 80%;
    bottom: none;
    right: none;
    left: 5%;
    z-index: none;
  }
  .sign-up-banner-section-knowledgebase .sign-now-banner .popular-domains {
    top: 13%;
  }
  .sign-up-banner-section-knowledgebase .sign-now-banner h1 {
    top: 51%;
  }
}
@media only screen and (max-width: 345px) {
  .best-services-banner .hosting-services-btn span {
    background-color: transparent;
  }
}/*# sourceMappingURL=stylesheet.css.map */