@import url("https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700;800;900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Public Sans", sans-serif;
}

:root {
  --main-color: #008080;
  --black-fade: #414141;
  --black-color: #272727;
  --grey-color: #606060;
  --grey-fade: #888;
  --secondory-black: #14142b;
  --secondory-grey: #979797;
  --white-color: #fff;
  --white-shade: #f1f7f7;
  --white-smoke: #eff0f6;
  --black-text: #1c1c1c;
  --secondory-white: #e8e8e8;
  --green-fade: #c4e3e3;
  --light-green: #bad5d5;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0 !important;
}

h3 {
  color: var(--black-fade);
}

a {
  text-decoration: none !important;
}

input:focus {
  outline: none;
}

.is-font-12 {
  font-size: 13px !important;
}

.is-font-15 {
  font-size: 15px !important;
}

.green_btn {
  background: var(--main-color);
  color: var(--white-color);
  border: none;
  outline: none;
  border-radius: 6px;
}

.header_top {
  padding: 12px 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--main-color);
  color: var(--white-color);
}

.header_contact {
  display: flex;
  gap: 22px;
  align-items: center;
}

.header_contact a {
  color: var(--white-color);
}

.header_contact a:hover {
  color: var(--white-color);
}

.header_contact a img {
  margin-right: 8px;
}

.header_llinks {
  display: flex;
  gap: 22px;
  align-items: center;
}

.header_llinks a {
  color: var(--white-color);
  text-transform: capitalize;
}

.header_llinks a:hover {
  color: var(--white-color);
}

.header_llinks a img {
  margin-right: 8px;
}

.sign-up {
  position: relative;
  margin-left: 12px;
}

.sign-up::before {
  content: "/";
  position: absolute;
  left: -20px;
  top: 0;
}

.myNav {
  padding: 30px 50px;
}

.myNav_menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  /* gap: 247px; */
}

.menu_wrapper {
  display: flex;
  gap: 20px;
}

.menu_wrapper a {
  text-transform: capitalize;
  max-width: max-content;
  color: var(--secondory-black);
}

.menu_wrapper a img {
  margin-left: 10px;
}

.menu_wrapper a:hover img {
  transform: rotate(180deg);
  transition: 0.3s ease-in;
}

.menu_wrapper a:hover {
  color: var(--main-color);
}

.dropdown-links {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  margin-top: 2px;
}

.dropdown-links:hover .dropdown-content {
  display: block;
  z-index: 100;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  margin-right: 0px !important;
  position: relative;
}

.dropdown-content a:first-child {
  display: none;
}

.get_btn a {
  padding: 1rem 30px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.get_btn a:hover {
  color: var(--white-color);
}

.menu_icon {
  display: none;
}

.close_icon {
  display: none;
}

.responsive_logo {
  display: none;
}

.responsive_nav {
  display: none;
}

.cart--btn {
  display: none;
}

.header_right {
  display: none;
}

/* responsive css start */

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

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

  .cart--btn {
    display: block;
  }

  .cart--btn a {
    padding: 12px 24px;
    gap: 8px;
  }

  .cart--btn a:hover {
    color: var(--white-color);
  }

  .header_right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }

  .menu_icon {
    display: block;
  }

  .menu_icon i {
    font-size: 40px;
  }

  .dropdown-links a {
    max-width: max-content;
  }

  .myNav {
    padding: 16px;
    position: fixed;
    width: 100%;
    left: 0;
    background: white;
    z-index: 999;
    box-shadow: 0 0 9px rgba(0, 0, 0, 0.2);
  }

  .responsive_nav {
    width: 100%;
    display: block;
    background: var(--white-smoke);
    height: 100%;
    position: fixed;
    z-index: 999;
    top: 0;
    right: -100%;
    padding-top: 100px;
    padding-left: 1rem;
    display: flex;
    transition: 0.3s ease-in-out;
    flex-direction: column;
  }

  .responsive_nav.active {
    right: 0;
    transition: 0.3s ease-in-out;
  }

  .close_icon {
    display: block;
    position: absolute;
    top: 1.5rem;
    right: 1.2rem;
  }

  .responsive_logo {
    display: block;
  }

  .responsive_logo img {
    position: absolute;
    left: 1rem;
    top: 1rem;
  }

  .close_icon img {
    width: 20px;
  }

  .responsive_nav .accordion {
    padding-right: 1rem;
  }

  .responsive_nav .accordion-button {
    padding: 6px 0 0 0 !important;
    font-size: 16px !important;
    text-transform: capitalize;
  }

  .responsive_nav .accordion-body {
    display: flex;
    flex-direction: column;
  }

  .responsive_nav .accordion-body {
    padding: 10px 0 !important;
  }

  .responsive_nav .accordion-body a {
    color: var(--black-color);
    margin-bottom: 0;
    margin-top: 10px;
    font-size: 14px;
    color: var(--main-color);
  }

  .responsive_nav .accordion-body a:hover {
    color: var(--main-color);
  }

  .accordion-button:not(.collapsed)::after {
    margin-top: 1.4rem !important;
  }

  .responsive_nav .accordion-item {
    border-bottom: 1px solid transparent !important;
    border: 1px solid transparent !important;
  }

  .responsive_nav a {
    color: var(--main-color);
    text-transform: capitalize;
    margin-top: 10px;
    font-size: 1rem;
    font-weight: 400;
  }

  .responsive_nav a:hover {
    color: var(--main-color);
  }

  .responsive_nav .accordion-button:not(.collapsed) {
    box-shadow: inherit;
  }

  .get-btn {
    margin-top: 2rem;
  }

  .get-btn a {
    color: var(--white-color);
    padding: 1rem 30px;
  }

  .get-btn a:hover {
    color: var(--main-color);
    background: transparent;
    border: 1px solid var(--main-color);
  }

  .header_top {
    display: none;
  }
}

@media (max-width: 576px) {
  section,
  .footer_wrapper {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .is-font-12 {
    font-size: 9px !important;
  }
}

@media (max-width: 430px) {
  .header_right {
    gap: 10px;
  }

  .cart--btn a {
    padding: 12px;
  }

  .logo a img {
    width: 110px;
  }
}

/* accordion button */
.accordion-button::after {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  content: "";
  background-image: url("../images/svg/plus.svg") !important;
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: 0.3s ease-in;
  transition: transform 0.2s ease-in-out;
}

.accordion-button:not(.collapsed)::after {
  transform: rotate(0deg) !important;
  background-image: url("../images/svg/minus.svg") !important;
  transition: 0.3s ease-in;
  margin-top: 1rem;
}

/* about css start */
.hosting_support {
  background: var(--white-shade);
  padding: 92px 0;
}

.hosting_bg {
  position: relative;
  z-index: 11;
}

.hosting_support__bg img {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  z-index: -1;
}

.hosting_support__img img {
  width: 100%;
}

.hosting_support__content {
  padding-left: 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.hosting_support__content h3 {
  font-size: 40px;
  font-weight: 600;
  line-height: 3.125rem;
}

.hosting_support__content h3 span {
  color: var(--main-color);
}

.hosting_support__content p {
  margin-top: 30px;
  color: var(--grey-color);
  font-size: 1.125rem;
  line-height: 30px;
}

.hosting_support__type {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  margin-top: 66px;
}

.hosting--box h3 {
  font-size: 22px;
  color: var(--main-color);
  line-height: normal;
  font-weight: 600;
}

.hosting--box p {
  margin-top: 1rem;
}

/* learn_wrapper css start */
.learn_wrapper {
  padding: 172px 0 90px 0;
  background-image: url("../images/svg/safe-bg.svg");
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  /* background: linear-gradient(73deg, #000 0.29%, rgba(0, 0, 0, 0.00) 63.36%), url("../images/svg/learn-banner.svg"); */
}

.learn_wrapper__content h3 {
  font-size: 3.75rem;
  font-weight: 700;
  color: var(--white-color);
  text-transform: capitalize;
  margin-top: 35px;
}

.learn_wrapper__content p {
  margin-top: 35px;
  color: var(--white-color);
  font-size: 22px;
  line-height: 35px;
  max-width: 560px;
}

.learn--more {
  margin-top: 40px;
}

.learn--more a {
  border: 1px solid var(--white-color);
  border-radius: 6px;
  font-size: 18px;
  font-weight: 500;
  color: var(--white-color);
  padding: 1rem 35px;
}

.learn--more a:hover {
  background: var(--white-color);
  color: var(--black-color);
  transition: 0.3s ease-in;
}

/* learn_wrapper css end */

/* about_wrapper css start */
.about_wrapper {
  padding: 100px 0;
}

.about_wrapper__heading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.about_wrapper__heading h3 {
  font-size: 40px;
  font-weight: 700;
}

.about_wrapper__heading h3 span {
  color: var(--main-color);
}

.about_wrapper__heading p {
  margin-top: 35px;
  font-size: 18px;
  line-height: 30px;
  color: var(--grey-color);
}

.about_wrapper__img img {
  width: 100%;
}

/* about_wrapper css end */

/* trust_wrapper css start */
.trust_wrapper {
  background: var(--white-shade);
  padding: 106px 0;
}

.trust_wrapper__content {
  margin-top: 70px;
}

.trust--box {
  background: var(--white-color);
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 20px;
}

.trust--box h3 {
  font-size: 30px;
  font-weight: 600;
  line-height: 35px;
}

.trust--box h3 span {
  color: var(--main-color);
}

.trust--box p {
  margin-top: 25px;
  font-size: 18px;
  color: var(--grey-color);
  line-height: 30px;
}

/* trust_wrapper css end */

.result_box__flex {
  display: flex;
  align-items: start;
  gap: 1rem;
}

.result_box__flex p {
  margin-top: 0;
  color: var(--black-fade);
  font-size: 20px;
  font-style: italic;
}

.address-box {
  padding: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.address-box:first-child {
  border-bottom: 1px solid var(--white-smoke);
}

.address-box:nth-child(2) {
  border-bottom: 1px solid var(--white-smoke);
}

.address-box:last-child {
  align-items: start;
}

.address_container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-radius: 24px;
  border: 1px solid #eff0f6;
  background: #fff;
  box-shadow: 0px 2px 5px 0px rgba(120, 120, 120, 0.1),
    0px 8px 8px 0px rgba(120, 120, 120, 0.09),
    0px 19px 11px 0px rgba(120, 120, 120, 0.05),
    0px 34px 14px 0px rgba(120, 120, 120, 0.01),
    0px 53px 15px 0px rgba(120, 120, 120, 0);
}

.address-box h6 {
  color: var(--main-color);
  font-size: 30px;
  font-weight: 600;
}

.result_box__flex a {
  color: var(--black-fade);
  font-size: 20px;
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.result_box__flex {
  margin-bottom: 1rem;
}

/* help_wrapper css start */
.help_wrapper {
  background: #000;
  padding: 100px 0;
  position: relative;
  z-index: 1;
}

.help--dot img {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 300px;
}

.help_wrapper__heading {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.help_wrapper__heading h3 {
  font-size: 40px;
  font-weight: 700;
  color: var(--white-color);
}

.help_wrapper__heading p {
  color: var(--white-color);
  margin-top: 30px;
  max-width: 800px;
  font-size: 18px;
}

.help_wrapper__content {
  margin-top: 127px;
}

.help_container {
  display: flex;
  gap: 55px;
}

.help--box {
  width: 100%;
  padding: 34px;
  border-radius: 20px;
  background: rgba(130, 130, 130, 0.15);
}

.help--box h3 {
  margin-top: 30px;
  color: var(--white-color);
  font-size: 25px;
  font-weight: 600;
}

.help--box p {
  margin-top: 30px;
  color: var(--secondory-grey);
  font-size: 18px;
  line-height: 30px;
}

.help--box_link {
  margin-top: 80px;
}

.help--box_link a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--white-color);
  font-size: 18px;
  font-weight: 600;
  text-transform: capitalize;
  max-width: max-content;
}

.help--box_link a:hover {
  color: var(--main-color);
}

.help--box_link a:hover img {
  transform: translateX(5px);
  transition: 0.4s ease-in;
}

/* responsive css start */
@media (max-width: 1200px) {
  .help--dot img {
    width: 200px;
  }

  .hosting_support__content {
    padding-left: 36px;
  }

  .learn_wrapper {
    padding: 110px 0 90px 0;
  }

  .learn_wrapper__content h3 {
    font-size: 2.5rem;
  }

  .learn_wrapper__content p {
    font-size: 18px;
    line-height: 30px;
  }

  .address-box {
    padding: 30px;
  }

  .trust--box h3 {
    font-size: 28px;
  }
}

@media (max-width: 992px) {
  .hosting_support__bg img {
    width: 264px;
    height: inherit;
    top: 73px;
  }

  .hosting_support__img img {
    width: 500px;
    aspect-ratio: 400/400;
    object-fit: contain;
  }

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

  .hosting_support__content {
    padding-left: 0;
    margin-top: 3rem;
  }

  .learn_wrapper {
    padding: 90px 0 90px 0;
  }

  .about_flex {
    display: flex;
    flex-direction: column-reverse;
  }

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

  .about_wrapper__img img {
    width: 500px;
    aspect-ratio: 400/400;
    object-fit: contain;
  }

  .trust--box h3 {
    font-size: 22px;
  }

  .trust--box p {
    font-size: 1rem;
  }

  .address_wrapper__right {
    margin-top: 36px;
  }

  .trust_wrapper {
    padding: 100px 0 0 0;
  }

  .help_container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .help_wrapper__content {
    margin-top: 80px;
  }

  .help--box_link {
    margin-top: 24px;
  }
}

@media (max-width: 768px) {
  .learn_wrapper {
    background-attachment: local;
  }

  .hosting_support__content h3 {
    font-size: 34px;
    line-height: 35px;
  }

  .hosting_support__content p {
    margin-top: 16px;
  }

  .hosting_support__type {
    gap: 2rem;
  }

  .hosting--box h3 {
    font-size: 1.25rem;
  }

  .hosting--box p {
    margin-top: 10px;
  }

  .hosting_support__type {
    margin-top: 35px;
  }

  .learn_wrapper__content h3 {
    font-size: 2.125rem;
    margin-top: 20px;
  }

  .learn_wrapper__content p {
    margin-top: 1rem;
  }

  .about_wrapper__heading h3 {
    font-size: 34px;
  }

  .about_wrapper__heading p {
    margin-top: 1rem;
    font-size: 1rem;
  }

  .about_wrapper {
    padding: 50px 0;
  }

  .trust_wrapper {
    padding: 50px 0 0 0;
  }

  .trust_wrapper__content {
    margin-top: 50px;
  }

  .address-box h6 {
    font-size: 22px;
  }

  .address-box p {
    font-size: 1rem;
  }

  .address-box {
    padding: 1rem;
  }

  .address-box a {
    font-size: 1rem;
  }

  .help_wrapper__heading h3 {
    font-size: 30px;
  }

  .help_wrapper__heading p {
    margin-top: 1rem;
    font-size: 1rem;
  }

  .help_container {
    grid-template-columns: repeat(1, 1fr);
  }

  .help--box h3 {
    margin-top: 22px;
    font-size: 22px;
  }

  .help_wrapper {
    padding: 50px 0;
  }

  .help--box p {
    margin-top: 12px;
  }
}

@media (max-width: 576px) {
  .hosting_support__content p {
    font-size: 1rem;
    line-height: 25px;
  }

  .hosting_support__content h3 {
    line-height: 25px;
  }

  .hosting_support__type {
    margin-top: 18px;
  }

  .help_wrapper__heading h3 {
    font-size: 24px;
  }

  .help_wrapper__heading p {
    font-size: 14px;
    line-height: 25px;
  }

  .help--box_link a {
    font-size: 1rem;
  }

  .help--box h3 {
    font-size: 20px;
    margin-top: 1rem;
  }

  .help_wrapper__content {
    margin-top: 50px;
  }

  .help--box {
    padding: 1rem;
  }

  .help--box img {
    width: 40px;
  }

  .help--box_link a img {
    width: 20px;
  }

  .hosting_support__content h3 {
    font-size: 1.5rem;
  }

  .hosting_support__img img {
    width: 400px;
  }

  .hosting_support__content {
    margin-top: 2rem;
  }

  .hosting--box h3 {
    font-size: 18px;
  }

  .hosting--box p {
    font-size: 1rem;
  }

  .hosting_support__type {
    gap: 1rem;
  }

  .learn_wrapper__content img {
    width: 60px;
  }

  .learn_wrapper__content h3 {
    font-size: 1.5rem;
  }

  .learn_wrapper__content p {
    font-size: 1rem;
  }

  .learn--more a {
    font-size: 1rem;
  }

  .about_wrapper__heading h3 {
    font-size: 1.5rem;
  }

  .about_wrapper__heading p {
    line-height: 25px;
    font-size: 14px;
  }

  .trust--box p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 25px;
  }

  .trust--box h3 {
    font-size: 20px;
  }

  .address_container {
    grid-template-columns: repeat(1, 1fr);
  }

  .address-box {
    align-items: start;
    padding: 1rem 0 0 1rem;
    justify-content: start;
  }

  .address_wrapper__right {
    margin-top: 24px;
  }

  .address-box h6 {
    font-size: 1.125rem;
  }

  .result_box__flex {
    gap: 7px;
  }

  .address-box p {
    font-size: 14px;
  }

  .address_section {
    padding: 16px 0 50px 0;
  }

  .address-box a {
    font-size: 14px;
  }

  .address-box:first-child {
    border-bottom: 0;
  }
}

/* contact css start */
.contact--bg {
  position: relative;
  z-index: 0;
}

.contact_dot img {
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
  width: 400px;
}

.map_wrapper {
  padding: 100px 0;
}

.map_wrapper__right iframe {
  width: 100%;
  border-radius: 15px;

  box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.06),
    0px 17px 17px 0px rgba(0, 0, 0, 0.05), 0px 38px 23px 0px rgba(0, 0, 0, 0.03),
    0px 67px 27px 0px rgba(0, 0, 0, 0.01), 0px 105px 29px 0px rgba(0, 0, 0, 0);
}

.map_wrapper__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.map_wrapper__content h3 {
  font-size: 40px;
  font-weight: 600;
}

.map_wrapper__content h3 span {
  color: var(--main-color);
}

.address--container {
  margin-top: 38px;
}

.map_address {
  display: flex;
  gap: 1rem;
  align-items: start;
  margin-bottom: 34px;
}

.map_address img {
  margin-top: 3px;
}

.map_text p {
  color: var(--black-fade);
  font-style: italic;
  font-size: 20px;
  line-height: 30px;
}

.map_text a {
  color: var(--black-fade);
  font-style: italic;
  font-size: 20px;
  line-height: 30px;
}

.map_text a:hover {
  color: var(--main-color);
}

/* contact_form css start */
.contact_form {
  padding: 100px 0;
  background: var(--white-shade);
}

.contact_form__bg {
  border-radius: 20px;
  background: var(--white-color);
  padding: 70px 93px;
}

.contact_input {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 30px;
}

.contact_input label {
  font-size: 20px;
  color: var(--black-fade);
  font-weight: 500;
}

.contact_input label span {
  color: var(--grey-color);
  font-style: italic;
  font-weight: 300;
}

.contact_input input {
  border-radius: 8px;
  border: 1px solid var(--main-color);
  padding: 7px 12px;
}

.contact_input textarea {
  border-radius: 8px;
  border: 1px solid var(--main-color);
  padding: 7px 12px;
}

.contact_form input:focus,
.contact_form textarea:focus {
  border: 1px solid var(--main-color);
  outline: none;
}

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

.send--msg button {
  width: 100%;
  padding: 1rem 0;
  font-size: 18px;
  font-weight: 500;
}

.contact_form__right {
  padding-left: 90px;
}

.contact_form__right h3 {
  font-size: 40px;
  font-weight: 600;
  text-transform: capitalize;
}

.contact_form__right h3 span {
  color: var(--main-color);
}

.contact_form__right p {
  font-size: 18px;
  color: var(--grey-color);
  margin-top: 35px;
  line-height: 30px;
}

@media (max-width: 1200px) {
  .contact_form__bg {
    padding: 50px 35px;
  }

  .contact_form__right {
    padding-left: 50px;
  }

  .contact_dot img {
    width: 250px;
  }
}

@media (max-width: 992px) {
  .contact_form__bg {
    display: flex;
    flex-direction: column-reverse;
  }

  .contact_form__right {
    padding-left: 0;
  }

  .contact--page {
    margin-top: 2rem;
  }

  .modal-body .contact--page {
    margin-top: 0;
  }
}

@media (max-width: 768px) {
  .contact_dot img {
    top: 0;
    right: inherit;
    left: 0;
    transform: rotate(180deg);
  }

  .contact_form__right h3 {
    font-size: 30px;
  }

  .map_wrapper__right {
    margin-top: 1.5rem;
  }

  .map_wrapper {
    padding: 50px 0;
  }

  .map_wrapper__content h3 {
    font-size: 30px;
  }

  .address--container {
    margin-top: 20px;
  }

  .map_address {
    margin-bottom: 20px;
  }

  .map_text p {
    font-size: 18px;
  }

  .map_text a {
    font-size: 18px;
  }

  .contact_form__right p {
    margin-top: 1rem;
  }

  .contact_input {
    margin-bottom: 14px;
    gap: 8px;
  }

  .contact_input label {
    font-size: 18px;
  }

  .contact_form {
    padding: 50px 0;
  }
}

@media (max-width: 576px) {
  .contact_form__right p {
    font-size: 1rem;
    line-height: 25px;
  }

  .send--msg button {
    font-size: 1rem;
  }

  .contact_form__right h3 {
    font-size: 24px;
  }

  .map_wrapper__content h3 {
    font-size: 24px;
  }

  .map_text p {
    font-size: 1rem;
  }

  .map_text a {
    font-size: 1rem;
  }

  .map_address {
    margin-bottom: 10px;
  }

  .address--container {
    margin-top: 14px;
  }

  .contact_form__bg {
    padding: 25px 10px;
  }
}

/* footer css start */
.footer_wrapper {
  background-color: var(--main-color);
  padding-top: 80px;
  padding-bottom: 60px;
  border-bottom: 24px solid var(--main-color);
}

.footer_logo p {
  margin-top: 1.3rem;
  color: var(--secondory-white);
  font-size: 1.125rem;
}

.footer_content {
  margin-top: 66px;
}

.footer_box h3 {
  color: var(--white-color);
  font-size: 22px;
  font-weight: 500;
}

.footer_links {
  margin-top: 35px;
  display: flex;
  flex-direction: column;
}

.footer_links a {
  margin-bottom: 15px;
  color: var(--secondory-white);
  font-size: 18px;
  max-width: max-content;
  font-weight: 400;
}

.footer_links p {
  margin-bottom: 15px !important;
  color: var(--secondory-white);
  font-size: 18px;
  max-width: max-content;
  font-weight: 400;
}

.footer_links p:hover {
  color: var(--white-color);
}

.footer_links p span {
  font-size: 12px;
  text-transform: capitalize;
}

.footer_links a:hover {
  color: var(--white-color);
}

.company_details {
  display: flex;
  align-items: start;
  gap: 14px;
  margin-bottom: 1rem;
}

.company_details img {
  margin-top: 3px;
}

.company_details a {
  margin-top: 0;
  font-size: 18px;
  color: var(--secondory-white);
  margin-bottom: 0;
}

.company_details p {
  color: var(--secondory-white);
  font-size: 18px;
}

.follow-us {
  margin-top: 58px;
  padding-right: 110px;
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: end;
}

.follow-us h3 {
  font-size: 22px;
  color: var(--white-color);
}

.social_link {
  display: flex;
  gap: 14px;
  justify-content: end;
}

.copy-bg {
  background: var(--main-color);
}

.copyright {
  border-top: 1px solid var(--white-color);
  padding-top: 45px;
  padding-bottom: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.copyright p {
  color: var(--white-color);
  font-size: 18px;
}

.copyright p a {
  color: var(--white-color);
}

.copyright_links {
  display: flex;
  gap: 2rem;
}

.copyright_links a {
  color: var(--white-color);
  font-size: 18px;
  position: relative;
}

.copyright_links a:hover {
  color: var(--white-color);
}

.copyright_links a::before {
  content: "";
  position: absolute;
  bottom: -1rem;
  width: 100%;
  background: var(--secondory-white);
  left: 0;
  height: 1px;
}

@media (max-width: 992px) {
  #footer_margin {
    margin-top: 2rem;
  }

  .footer_links {
    margin-top: 20px;
  }

  .footer_content {
    margin-top: 44px;
  }

  .copyright {
    flex-direction: column;
    gap: 12px;
    padding-top: 1rem;
    padding-bottom: 1.4rem;
  }

  .copyright_links a::before {
    bottom: -5px;
  }

  .follow-us {
    margin-top: 18px;
    justify-content: start;
    align-items: start;
    padding-right: 0;
  }
}

@media (max-width: 768px) {
  .footer_wrapper {
    padding-top: 50px;
    padding-bottom: 30px;
  }

  .footer_box h3 {
    font-size: 20px;
  }

  .footer_links a {
    font-size: 1rem;
  }

  .footer_links p {
    font-size: 1rem;
  }

  .company_details p {
    font-size: 1rem;
  }

  .copyright p {
    font-size: 1rem;
  }

  .copyright_links a {
    font-size: 14px;
  }

  .follow-us h3 {
    font-size: 20px;
  }

  .social_link a img {
    width: 20px;
  }

  .footer_logo img {
    width: 140px;
  }

  .footer_logo p {
    font-size: 1rem;
  }
}

@media (max-width: 576px) {
  .company_details {
    gap: 7px;
  }

  .footer_links a {
    margin-bottom: 10px;
  }

  .follow-us {
    gap: 1rem;
  }
}

@media (max-width: 400px) {
  .company_details {
    gap: 5px;
  }

  .footer_links a {
    font-size: 12px;
  }

  .company_details p {
    font-size: 12px;
  }

  .footer_links {
    margin-top: 14px;
  }

  .footer_links p {
    font-size: 12px;
  }

  .footer_box h3 {
    font-size: 1rem;
  }

  .copyright p {
    font-size: 14px;
  }

  .copyright_links a {
    font-size: 12px;
  }

  .footer_logo p {
    font-size: 14px;
  }

  .company_details img {
    width: 14px;
  }

  .follow-us {
    align-items: center;
  }

  .social_link a img {
    width: 14px;
  }

  .follow-us h3 {
    font-size: 1rem;
  }

  .footer_wrapper {
    padding-top: 30px;
    padding-bottom: 12px;
  }
}

@media (max-width: 380px) {
  .copyright_links {
    gap: 10px;
  }

  .copyright {
    align-items: start;
  }

  .company_details:nth-child(3) {
    flex-wrap: wrap;
  }
}

/* home css start */
.banner_wrapper {
  padding: 94px 0 134px 0;
}

.banner_bg {
  position: relative;
}

.banner_bg::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  background: rgba(186, 213, 213, 0.2);
  width: 700px;
  z-index: -1;
  height: 100%;
}

.banner_wrapper__left {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

.banner_wrapper__right {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

.banner_wrapper__left h3 {
  font-size: 3.125rem;
  /* max-width: 550px; */
  font-weight: 700;
  line-height: 70px;
  text-transform: capitalize;
}

.banner_wrapper__left h3 span {
  color: var(--main-color);
}

.banner_wrapper__left p {
  margin-top: 30px;
  font-size: 1.125rem;
  color: var(--grey-fade);
  max-width: 575px;
  line-height: 30px;
}

.banner_wrapper__right img {
  width: 100%;
}

.price {
  margin-top: 30px;
  display: flex;
  gap: 30px;
  flex-direction: column-reverse;
}

.price a {
  max-width: max-content;
  height: max-content;
  padding: 1rem 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 500;
}

.price a:hover {
  color: var(--white-color);
}

.price p {
  margin-top: 0;
  line-height: 40px;
  font-size: 18px;
}

.price p b {
  color: var(--black-color);
  font-weight: 700;
  font-size: 2.5rem;
}

/* hosting css start */
.hosting_wrapper {
  background: var(--white-shade);
  padding: 50px 0;
}

.hosting_wrapper__card {
  padding: 34px 20px 56px 20px;
  border-radius: 8px;
  cursor: pointer;
  border-bottom: 14px solid transparent;
}

.hosting_wrapper__card:hover {
  background: var(--white-color);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
  border-bottom: 14px solid var(--main-color);
}

.hosting_wrapper__card span {
  border-radius: 120px;
  background: rgba(186, 213, 213, 0.4);
  padding: 11px 15px;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--main-color);
  line-height: 30px;
}

.hosting_wrapper__card h3 {
  margin-top: 20px;
  font-size: 22px;
  font-weight: 600;
  color: var(--black-text);
}

.hosting_wrapper__card p {
  margin-top: 12px;
  color: var(--grey-color);
  font-size: 14px;
}

@media (max-width: 1400px) {
  .hosting_wrapper__card p {
    font-size: 12px;
  }
}

/* choose_wrapper css start */
.choose_wrapper {
  padding: 110px 0;
}

.main--heading {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.main--heading h3 {
  font-size: 40px;
  line-height: 70px;
  text-transform: capitalize;
  font-weight: 700;
}

.main--heading h3 span {
  color: var(--main-color);
}

.main--heading p {
  margin-top: 30px;
  max-width: 831px;
  line-height: 30px;
  font-size: 18px;
  text-align: center;
  color: var(--grey-color);
}

.choose_wrapper__content {
  margin-top: 57px;
}

.choose_box {
  margin-bottom: 46px;
}

.choose_box h3 {
  margin-top: 17px;
  color: var(--main-color);
  font-size: 30px;
  font-weight: 600;
  position: relative;
}

.choose_box h3::before {
  content: "";
  position: absolute;
  width: 40%;
  background: linear-gradient(90deg, #008080 0%, rgba(229, 229, 229, 0) 97.3%);
  height: 1px;
  bottom: -1rem;
  left: 0;
}

.choose_box p {
  margin-top: 44px;
  color: var(--grey-color);
  line-height: 35px;
  max-width: 550px;
}

/* choose_wrapper css end */

/* result_wrapper css start */
.result_wrapper {
  padding: 110px 0;
  position: relative;
  z-index: 1;
}

.result_wrapper::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  background: rgba(186, 213, 213, 0.2);
  width: 1000px;
  z-index: -1;
  height: 100%;
}

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

.result_wrapper__left h3 {
  font-size: 40px;
  line-height: 50px;
  font-weight: 600;
  text-align: center;
}

.result_container {
  border-radius: 24px;
  border: 1px solid #eff0f6;
  background: #fff;
  box-shadow: 0px 2px 5px 0px rgba(120, 120, 120, 0.1),
    0px 8px 8px 0px rgba(120, 120, 120, 0.09),
    0px 19px 11px 0px rgba(120, 120, 120, 0.05),
    0px 34px 14px 0px rgba(120, 120, 120, 0.01),
    0px 53px 15px 0px rgba(120, 120, 120, 0);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.result_box {
  padding: 53px 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.result_box:first-child {
  border-right: 1px solid var(--white-smoke);
  border-bottom: 1px solid var(--white-smoke);
}

.result_box:nth-child(2) {
  border-bottom: 1px solid var(--white-smoke);
}

.result_box:nth-child(3) {
  border-right: 1px solid var(--white-smoke);
  border-bottom: 1px solid var(--white-smoke);
}

.result_box h3 {
  font-size: 70px;
  font-weight: 600;
}

.result_box p {
  margin-top: 30px;
  font-style: italic;
  font-size: 20px;
  color: var(--black-fade);
}

.result_box h3 span {
  color: var(--main-color);
}

.result_wrapper__left h3 span {
  color: var(--main-color);
}

/* result_wrapper css end */

/* findMore_wrapper css start */
.findMore_wrapper {
  background: rgba(186, 213, 213, 0.2);
  padding: 110px 0;
}

.findMore_wrapper-content::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  background-color: var(--light-green);
  border-radius: 621px 40px 40px 621px;
  width: 44%;
  /* z-index: -1; */
}

.findMore_wrapper-content {
  background: var(--white-color);
  padding: 88px 50px;
  border-radius: 40px;
  position: relative;
}

.findMore_wrapper__heading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.findMore_wrapper__heading h3 {
  font-size: 40px;
  line-height: 55px;
  max-width: 590px;
}

.findMore_wrapper__heading p {
  margin-top: 27px;
  color: var(--grey-color);
  line-height: 30px;
  font-size: 18px;
  max-width: 640px;
}

.logo_box img {
  aspect-ratio: 3/2;
  object-fit: contain;
  width: 120px;
}

.find-btn {
  margin-top: 35px;
}

.find-btn button {
  padding: 1rem 40px;
  border-radius: 308px;
  border: 1px solid var(--main-color);
}

.find-btn button:hover {
  border: 1px solid var(--main-color);
  background: transparent;
  color: var(--main-color);
  transition: 0.2s;
}

.findMore_wrapper__img {
  position: relative;
  z-index: 100;
}

.findMore_wrapper__img img {
  width: 100%;
}

/* findMore_wrapper css end */

/* testimonial_wrapper css start */
.testimonial_wrapper {
  padding: 110px 0;
}

.testimonial_line {
  position: relative;
}

.testimonial_line__img img {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
}

.testimonial_slider {
  margin-top: 121px;
}

.testimonial_card {
  border-radius: 8px;
  border: 1px solid #a6a6a6;
  background: var(--white-color);
  margin: 0 24px;
  padding: 43px 20px;
}

.testimonial_card p {
  font-size: 20px;
  color: var(--grey-color);
  line-height: 40px;
}

.customer_details {
  display: flex;
  margin-top: 55px;
  gap: 17px;
}

.customer_details img {
  width: 54px;
  height: 54px;
  object-fit: cover;
}

.customer_name h3 {
  font-size: 25px;
  color: var(--black-color);
}

.testimonial_slider .slick-prev {
  left: inherit;
  bottom: -16%;
  right: 51%;
  top: inherit;
}

.testimonial_slider .slick-next {
  left: inherit;
  bottom: -16%;
  right: 47%;
  top: inherit;
}

/* .testimonial_slider.prev-hovered .slick-next:before {
  content: url("../images/svg/right-small-arrow.svg") !important;
  bottom: -26%;
  opacity: 0.7;
  position: absolute;
  left: 0;
} */

.testimonial_slider .slick-prev:before {
  content: url("../images/svg/leftarrow.svg") !important;
}

/* .testimonial_slider .slick-prev:hover {
  bottom: -15%;
} */

/* .testimonial_slider .slick-next:hover {
  bottom: -15%;
} */

/* .testimonial_slider .slick-prev:hover::before {
  content: url("../images/svg/leftarrow.svg") !important;
} */

.testimonial_slider .slick-next:before {
  content: url("../images/svg/arrow-right.svg");
  /* content: url("../images/svg/right-small-arrow.svg") !important; */
}
.testimonial_slider .slick-next.slick-disabled:before {
  opacity: 0.25;
  content: url("../images/svg/arrow-right.svg");
}

.testimonial_slider .slick-prev.slick-disabled:before {
  content: url("../images/svg/leftarrow.svg") !important;
}
/* .testimonial_slider .slick-next:hover::before {
  content: url("../images/svg/arrow-right.svg") !important;
} */

/* .testimonial_slider .slick-prev:hover .slick-next:before {

  content: url("../images/svg/right-small-arrow.svg") !important;
} */

/* .testimonial_slider .slick-prev:hover .testimonial_slider .slick-next:before {
  content: url("../images/svg/left-arrow.svg") !important;
} */

/* testimonial_wrapper css end */

/* faq_wrapper css start */
.faq_wrapper {
  background: var(--white-shade);
  padding: 110px 0;
}

.faq_content {
  margin-top: 70px;
}

.accordion-button {
  background: transparent !important;
  font-size: 25px !important;
  font-weight: 500 !important;
  line-height: 35px !important;
  color: var(--main-color) !important;
  padding: 2rem 0 !important;
}

.accordion-button:focus {
  border-color: inherit !important;
  box-shadow: inherit !important;
}

.accordion-body {
  font-size: 18px !important;
  line-height: 35px !important;
  color: var(--grey-color) !important;
  padding-right: 5rem !important;
  padding: 2rem 0 !important;
}

.accordion-item {
  background: transparent !important;
  border-bottom: 1px solid var(--green-fade) !important;
}

/* responsive css start */

/* company_wrapper css start */
.company_wrapper {
  padding: 110px 0;
}

.company_slider {
  margin-top: 70px;
}

.logo_box {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.logo_box img {
  width: 150px;
}

/* responsive css start */

@media (max-width: 1400px) {
  .result_wrapper::after {
    width: 500px;
  }
}

@media (max-width: 1200px) {
  .price p {
    line-height: 36px;
  }
}

@media (max-width: 1200px) {
  .banner_wrapper::after {
    width: 375px;
  }

  .result_box {
    padding: 53px;
  }

  .banner_wrapper__left h3 {
    font-size: 40px;
    line-height: 54px;
  }

  .testimonial_slider .slick-next {
    right: 44%;
    bottom: -16%;
  }

  .banner_wrapper {
    padding: 140px 0;
  }
}

@media (max-width: 992px) {
  .findMore_wrapper-content::after {
    position: inherit;
  }

  .findMore_wrapper__img {
    text-align: center;
  }

  .findMore_wrapper__img img {
    aspect-ratio: 3/2;
    width: 550px;
    object-fit: contain;
  }

  .banner_flex {
    display: flex;
    flex-direction: column-reverse;
  }

  .result_wrapper::after {
    width: 100%;
  }

  .banner_wrapper {
    padding: 100px 0 70px 0;
  }

  .banner_wrapper::after {
    display: none;
  }

  .banner_wrapper__left {
    margin-top: 40px;
  }

  .banner_wrapper__left h3 {
    max-width: 100%;
  }

  .banner_wrapper__left p {
    max-width: 100%;
  }

  .banner_wrapper__right {
    align-items: center;
  }

  .banner_wrapper__right img {
    width: 450px;
    aspect-ratio: 500/400;
    object-fit: contain;
  }

  .result_wrapper__right {
    margin-top: 36px;
  }

  .result_box h3 {
    font-size: 3.125rem;
  }

  .result_box p {
    margin-top: 10px;
  }

  /* .testimonial_slider .slick-prev:hover {
    bottom: -15%;
  } */

  .findMore_wrapper__heading {
    margin-top: 2rem;
  }

  .findMore_wrapper {
    padding: 20px 0 110px 0;
  }

  .findMore_wrapper-content {
    padding: 50px;
    display: flex;
    flex-direction: column-reverse;
  }

  .findMore_wrapper__heading h3 {
    font-size: 30px;
    line-height: 40px;
  }
}

@media (max-width: 768px) {
  .banner_wrapper__left h3 {
    font-size: 30px;
    line-height: 45px;
  }

  .banner_wrapper {
    padding: 100px 0 70px 0;
  }

  .banner_wrapper__right img {
    width: 400px;
  }

  .price {
    margin-top: 30px;
  }

  .banner_wrapper__left p {
    margin-top: 18px;
  }

  .price p {
    margin-top: 0;
  }

  .price p b {
    font-size: 25px;
  }

  .hosting_wrapper__card h3 {
    font-size: 20px;
  }

  .hosting_wrapper__card p {
    margin-top: 6px;
  }

  .hosting_wrapper__card {
    padding: 34px 20px 20px 20px;
  }

  .result_container {
    grid-template-columns: repeat(2, 1fr);
  }

  .result_box {
    padding: 20px;
  }

  .result_box p {
    margin-top: 12px;
    font-size: 1rem;
    text-align: center;
  }

  .result_wrapper__right {
    margin-top: 50px;
  }

  .result_wrapper__left h3 {
    font-size: 32px;
  }

  .result_box h3 {
    font-size: 50px;
  }

  .result_wrapper {
    padding: 50px 0;
  }

  .choose_wrapper {
    padding: 50px 0;
  }

  .main--heading h3 {
    font-size: 30px;
    line-height: 44px;
  }

  .main--heading p {
    font-size: 1rem;
  }

  .choose_box {
    margin-bottom: 22px;
  }

  .choose_box h3 {
    font-size: 22px;
  }

  .choose_box p {
    margin-top: 32px;
    max-width: 100%;
  }

  .findMore_wrapper {
    padding: 50px 0;
  }

  .findMore_wrapper__heading h3 {
    font-size: 24px;
    line-height: 35px;
  }

  .findMore_wrapper-content {
    padding: 40px;
  }

  .findMore_wrapper__heading {
    margin-top: 30px;
  }

  .findMore_wrapper__heading p {
    margin-top: 14px;
    font-size: 1rem;
    line-height: 25px;
  }

  .faq_wrapper {
    padding: 50px 0;
  }

  .faq_content {
    margin-top: 30px;
  }

  .accordion-button {
    font-size: 20px !important;
    padding: 1rem 0 !important;
  }

  .accordion-body {
    padding: 1rem 0 !important;
  }

  .testimonial_wrapper {
    padding: 50px 0 100px 0;
  }

  .testimonial_slider {
    margin-top: 44px;
  }

  .main--heading p {
    margin-top: 1rem;
  }

  .testimonial_card {
    padding: 1rem;
  }

  .customer_details {
    margin-top: 1rem;
  }

  .testimonial_card p {
    font-size: 1rem;
    line-height: 30px;
  }

  .customer_name h3 {
    font-size: 18px;
  }

  .customer_name p {
    font-size: 14px;
  }

  .company_wrapper {
    padding: 50px 0;
  }

  .testimonial_slider .slick-next {
    bottom: -23%;
  }

  .testimonial_slider .slick-prev {
    bottom: -23%;
    right: 52%;
  }
  /* 
  .testimonial_slider .slick-prev:hover {
    bottom: -22%;
  }

  .testimonial_slider .slick-next:hover {
    bottom: -22%;
  } */

  .logo_box img {
    width: 110px;
  }
}

@media (max-width: 576px) {
  .result_box h3 {
    font-size: 30px;
  }

  .findMore_wrapper__heading h3 {
    font-size: 20px;
    line-height: 30px;
  }

  .findMore_wrapper__heading {
    margin-top: 20px;
  }

  .findMore_wrapper__heading p {
    font-size: 14px;
  }

  .findMore_wrapper-content {
    padding: 40px 1rem;
  }

  .main--heading h3 {
    font-size: 24px;
  }

  .testimonial_slider .slick-next {
    right: 40%;
  }

  .banner_wrapper__left {
    margin-top: 18px;
  }

  .banner_wrapper__left h3 {
    font-size: 1.5625rem;
    line-height: 30px;
  }

  .price a {
    padding: 1rem;
  }

  .price {
    gap: 1rem;
    margin-top: 0;
  }

  .price p b {
    font-size: 18px;
  }

  .price p {
    font-size: 14px;
  }

  .banner_wrapper__left p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 25px;
  }

  .main--heading p {
    font-size: 14px;
    line-height: 25px;
  }

  .choose_box p {
    font-size: 14px;
    line-height: 25px;
  }

  .choose_box img {
    width: 50px;
  }

  .choose_box h3 {
    font-size: 18px;
  }

  .accordion-button {
    font-size: 1rem !important;
    line-height: 30px !important;
  }

  .accordion-body {
    font-size: 14px !important;
    line-height: 25px !important;
  }

  .findMore_wrapper {
    padding: 10px 0 50px 0;
  }

  .company_slider {
    margin-top: 40px;
  }

  /* .testimonial_slider .slick-prev {
    bottom: -24%;
  } */

  .price a {
    font-size: 14px;
  }

  .result_wrapper__left h3 {
    font-size: 24px;
  }

  .result_wrapper__right {
    margin-top: 24px;
  }
}

@media (max-width: 510px) {
  .hosting_wrapper__card {
    padding: 30px 10px;
  }

  .testimonial_card {
    margin: 0 10px;
  }

  .hosting_wrapper__card span {
    font-size: 0.875rem;
  }

  .hosting_wrapper__card h3 {
    font-size: 16px;
  }

  .hosting_wrapper__card p {
    font-size: 14px;
  }

  .testimonial_slider .slick-prev {
    right: 55%;
  }
}

@media (max-width: 410px) {
  .hosting_wrapper__card {
    padding: 20px 10px 30px 10px;
  }

  .hosting_wrapper__card span {
    font-size: 12px;
  }

  .hosting_wrapper__card h3 {
    font-size: 12px;
  }

  .hosting_wrapper__card p {
    font-size: 10px;
  }

  .choose_box h3 {
    font-size: 14px;
  }

  .choose_box p {
    font-size: 10px;
    line-height: 18px;
  }

  .choose_box img {
    width: 36px;
  }

  .banner_wrapper__left h3 {
    font-size: 20px;
  }
}

@media (max-width: 360px) {
  .testimonial_slider .slick-prev {
    bottom: -20%;
    right: 59%;
  }
  /* 
  .testimonial_slider .slick-prev:hover {
    bottom: -19%;
  } */

  /* .testimonial_slider .slick-next:hover {
    bottom: -19%;
  } */

  .testimonial_slider .slick-next {
    bottom: -20%;
  }
}

/* price css start */
.header--logo {
  padding: 15px 0;
}

.plan_type {
  padding: 50px 0;
  position: relative;
}

.plan_container {
  background: var(--white-color);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.price__type .form-check-input:checked {
  background-color: var(--main-color);
  border-color: var(--main-color);
}

.plan_container__step {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10rem;
  position: relative;
  z-index: 1;
}

.step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  background: var(--white-color);
}

.step p {
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #a4a5a6;
  border-radius: 50%;
  font-weight: 600;
  font-size: 0.875rem;
  color: #a4a5a6;
  position: relative;
  background: var(--white-color);
  font-weight: 600;
}

.step p.active {
  background: var(--main-color);
  color: var(--white-color);
  border: 1px solid var(--main-color);
}

.step span.active {
  color: var(--main-color);
  font-weight: 600;
}

.step span {
  font-size: 14px;
}

.plan_container__step::after {
  content: "";
  position: absolute;
  right: 0;
  top: 34%;
  background-color: #a4a5a6;
  height: 2px;
  width: 90%;
  z-index: -1;
}

.form--hosting {
  padding: 70px 0;
}

.form__heading h3 {
  font-size: 30px;
  font-weight: 600;
  color: var(--main-color);
}

.form__heading p {
  font-size: 18px;
  color: var(--grey-color);
  margin-top: 25px;
}

.form--hosting_flex {
  margin-top: 35px;
}

.price__type {
  border-radius: 5px;
  border: 1px solid #cacaca;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 20px;
  margin-bottom: 25px;
  cursor: pointer;
  position: relative;
}

.price__type:hover {
  border: 1px solid var(--main-color);
}

.price--flex {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.price__type-left p {
  font-size: 18px;
  color: var(--grey-color);
}

.price__type-left h6 {
  border: 1px solid var(--main-color);
  color: var(--main-color);
  border-radius: 5px;
  padding: 7px 10px;
  font-size: 18px;
  font-weight: 600;
}

.price__type-right p {
  padding: 12px 30px;
  font-size: 18px;
  border-radius: 10px;
  background: #f2f3f6;
  color: var(--grey-color);
}

.price__type-right del {
  color: var(--grey-color);
  font-size: 18px;
  font-weight: 500;
}

.price__type-right p span {
  color: var(--black-fade);
  font-weight: 500;
}

/* checkbox css */
/* Customize the label (the container) */
.check_box {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  user-select: none;
}

/* Hide the browser's default radio button */
.check_box input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: -6px;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: var(--white-color);
  border: 1px solid var(--main-color);
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.check_box:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a green background */
.check_box input:checked ~ .checkmark {
  background-color: var(--main-color) !important;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.check_box input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.check_box .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

.right_form {
  background: var(--white-shade);
  border-radius: 5px;
  padding: 30px;
}

.right_form__flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}

.right_form__flex h6 {
  font-size: 18px;
  color: var(--black-fade);
  font-weight: 500;
}

.right_form__flex p {
  font-size: 18px;
  color: var(--grey-color);
}

.form_apply h3 {
  font-size: 18px;
  font-weight: 500;
  display: flex;
  gap: 15px;
}

.form_apply h3 span {
  color: var(--main-color);
}

.form_apply__input {
  margin-top: 20px;
  position: relative;
}

.form_apply__input input {
  width: 100%;
  border-radius: 5px;
  border: 1px solid #cacaca;
  background: #fff;
  padding: 10px 6px 10px 22px;
}

.apply--btn {
  position: absolute;
  right: 10px;
  top: 6px;
  padding: 5px 30px;
}

.form_apply p {
  margin-top: 50px;
  font-size: 1rem;
  line-height: 30px;
  color: var(--grey-color);
}

.form_apply p span {
  color: var(--main-color);
}

.hosting_plane {
  margin-top: 30px;
}

.hosting_plane p {
  font-size: 18px;
  color: var(--grey-color);
}

.payment--method {
  margin-top: 35px;
  display: flex;
  gap: 27px;
  align-items: center;
}

.payment_btn {
  padding: 22px;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  background: var(--main-color) !important;
  /* cursor: not-allowed !important; */
}

.payment_btn:disabled {
  background: rgba(0, 0, 0, 0.1) !important;

  cursor: pointer !important;
}

.payment--method p {
  color: var(--main-color);
  font-size: 18px;
  font-weight: 600;
  padding-right: 12px;
}

/* second step css */

.plan_type__second.display {
  display: block;
}

.first_step.hide {
  display: none;
}

.payment_img img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.input--padding {
  padding: 1.4rem 20px;
}

.payment_btn.submit {
  background: var(--main-color) !important;
  cursor: pointer !important;
}

.plan_type__third {
  /* display: none; */
  padding-bottom: 50px;
}

/* thankyou_wrapper css start */
.thankyou_wrapper {
  margin-top: 120px;
}

.thankyou_wrapper__left h3 {
  font-size: 40px;
  font-weight: 700;
  margin-top: 33px;
  max-width: 360px;
  line-height: 55px;
}

.thankyou_order {
  margin-top: 20px;
}

.thankyou_order p {
  color: var(--main-color) !important;
  font-size: 18px;
  font-weight: 600;
}

.thankyou_order p span {
  color: var(--black-fade);
}

.thankyou_wrapper__left p {
  font-size: 18px;
  color: var(--grey-color);
  line-height: 30px;
  margin-top: 30px;
}

.order--btn {
  margin-top: 35px;
}

.order--btn button {
  border: 1px solid var(--main-color);
  outline: none;
  padding: 12px 30px;
  background: transparent;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--main-color);
}

.thankyou_wrapper__right img {
  width: 100%;
}

/* .form--hosting_left {
      display: none !important;
  } */

/* responsive css start */

@media (max-width: 1400px) {
  .price__type-left p {
    font-size: 1rem;
  }

  .price--flex {
    gap: 10px;
  }

  .price__type-right p {
    padding: 12px;
    font-size: 1rem;
  }

  .price__type-right del {
    font-size: 1rem;
  }

  .price__type-left h6 {
    font-size: 1rem;
  }
}

@media (max-width: 1200px) {
  .thankyou_wrapper__right {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
}

@media (max-width: 992px) {
  .thankyou_wrapper__left {
    margin-top: 1rem;
  }

  .thankyou_flex {
    display: flex;
    flex-direction: column-reverse;
  }

  .thankyou_wrapper__right img {
    aspect-ratio: 400/350;
    width: 400px;
    object-fit: contain;
  }
}

@media (max-width: 768px) {
  .plan_container__step::after {
    width: 84%;
  }

  .form--hosting {
    padding: 42px 0;
  }

  .form--hosting h3 {
    font-size: 24px;
  }

  .form_apply h3 {
    font-size: 20px;
  }

  .right_form__flex {
    margin-bottom: 1rem;
  }

  .right_form__flex p {
    font-size: 1rem;
  }

  .right_form__flex h6 {
    font-size: 1rem;
  }

  .form_apply p {
    margin-top: 20px;
  }

  .form__heading p {
    margin-top: 1rem;
  }

  .plan_container__step {
    gap: 5rem;
  }

  .hosting_plane {
    margin-top: 20px;
  }

  .payment_btn {
    padding: 12px;
    font-size: 1rem;
  }

  .payment--method {
    margin-top: 14px;
  }

  .thankyou_wrapper__left h3 {
    font-size: 32px;
    line-height: 40px;
  }

  .thankyou_wrapper__left p {
    margin-top: 1rem;
  }
}

@media (max-width: 576px) {
  .thankyou_wrapper__left h3 {
    font-size: 24px;
    line-height: 30px;
  }

  .thankyou_wrapper__left p {
    font-size: 14px;
    line-height: 25px;
    margin-top: 7px;
  }

  .order--btn button {
    font-size: 1rem;
  }

  .thankyou_wrapper__left h3 {
    margin-top: 20px;
  }

  .header--logo {
    padding: 15px 16px;
  }

  .price__type {
    padding: 1rem 7px;
    margin-bottom: 1rem;
  }

  .form--hosting_right {
    margin-top: 1rem;
  }

  .form--hosting_flex {
    margin-top: 1rem;
  }

  .form_apply p {
    line-height: 25px;
  }

  .right_form {
    padding: 12px;
  }

  .form_apply h3 {
    font-size: 1rem;
  }

  .hosting_plane p {
    font-size: 1rem;
  }

  .price__type-left h6 {
    font-size: 14px;
  }

  .price__type-left p {
    font-size: 14px;
  }

  .price__type-right del {
    font-size: 14px;
  }

  .price__type-right p {
    font-size: 14px;
  }

  .form__heading p {
    font-size: 14px;
    line-height: 25px;
  }

  .price--flex {
    gap: 5px;
  }

  .payment_img img {
    width: 75px;
  }
}

@media (max-width: 450px) {
  .price__type-left h6 {
    font-size: 12px;
  }

  .price__type-left p {
    font-size: 12px;
  }

  .price__type-right del {
    font-size: 12px;
  }

  .price__type-right p {
    font-size: 12px;
  }

  .form__heading p {
    font-size: 12px;
  }

  .price__type-left h6 {
    padding: 7px 4px;
  }
}

@media (max-width: 400px) {
  .price__type-left h6 {
    font-size: 10px;
  }

  .price__type-left p {
    font-size: 10px;
  }

  .price__type-right del {
    font-size: 10px;
  }

  .price__type-right p {
    font-size: 10px;
    padding: 7px;
  }

  .form__heading p {
    font-size: 10px;
  }

  .form_apply__input input {
    font-size: 10px;
    padding: 10px 6px 10px 8px;
  }

  .apply--btn {
    font-size: 10px;
    padding: 5px 20px;
  }

  .form_apply p {
    font-size: 14px;
  }

  .payment_btn {
    font-size: 12px;
  }

  .step p {
    height: 25px;
    width: 25px;
  }

  .step span {
    font-size: 12px;
  }

  .plan_container__step::after {
    top: 25%;
  }
}

.tabnone {
  display: none;
}

.tabnone.active {
  display: block;
}

/* product css start */

.hosting_banner {
  padding: 87px 0;
}

.hosting_banner__heading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.hosting_banner__heading h3 {
  font-size: 3.125rem;
  font-weight: 700;
  line-height: 70px;
}

.hosting_banner__heading h3 span {
  color: var(--main-color);
}

.hosting_banner__content {
  margin-top: 35px;
}

.hosting_banner__content p {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-bottom: 15px !important;
  font-size: 18px;
  color: var(--grey-color);
}

.start-now {
  margin-top: 36px;
}

.start-now a {
  padding: 1rem 44px;
  font-size: 1.125rem;
  font-weight: 500;
}

.start-now a:hover {
  border: 1px solid var(--main-color);
  color: var(--main-color);
  background: transparent;
}

/* feature_wrapper css start */

.feature_wrapper {
  background: var(--white-shade);
  padding: 110px 0;
}

.feature_heading h3 {
  max-width: 644px;
  line-height: 60px;
  text-align: center;
}

.feature_content {
  margin-top: 110px;
}

.feature_card {
  margin-bottom: 2rem;
}

.feature_card img {
  width: 100%;
}

.feature_card h3 {
  margin-top: 35px;
  font-size: 1.375rem;
  color: var(--main-color);
}

.feature_card p {
  margin-top: 25px;
  color: var(--grey-color);
  font-size: 18px;
  line-height: 30px;
}

/* plan_wrapper css start */
.plan_wrapper {
  padding: 110px 0;
}

.plan_wrapper__content {
  margin-top: 70px;
  display: flex;
  width: 100%;
  gap: 21px;
}

.hosting_box {
  width: 100%;
  padding: 35px 24px;
  border: 1px solid var(--light-green);
  border-radius: 20px;
  text-align: center;
  position: relative;
}

.best_value span {
  position: absolute;
  left: 50%;
  top: -5px;
  transform: translate(-50%, -50%);
  background: #ff8b7b;
  color: var(--white-color);
  border-radius: 5px;
  padding: 5px 1rem;
}

.hosting_box:hover {
  background: var(--main-color);
  transition: 0.3s ease-in;
}

.hosting_box:hover h3,
.hosting_box:hover h6,
.hosting_box:hover p,
.hosting_box:hover span,
.hosting_box:hover del {
  color: var(--white-color);
}

.hosting_box h3 {
  font-size: 1.5625rem;
  color: var(--main-color);
}

.hosting_box h6 {
  margin-top: 25px;
  font-size: 3.4375rem;
  color: var(--main-color);
  font-weight: 700;
}

.hosting_box h6 span {
  font-size: 22px;
  color: var(--black-color);
}

.hosting_box del {
  margin-top: 9px;
  font-size: 18px;
  color: var(--grey-color);
}

.plane-price {
  margin-top: 12px;
}

.plane-price p {
  font-size: 14px;
  color: var(--grey-color);
}

.plane-price p span {
  color: var(--main-color);
  /* font-size: 12px; */
  font-weight: 600;
}

.plan_feature {
  margin-top: 35px;
  text-align: left;
  margin-left: 1rem;
}

.plan_feature h3 {
  font-size: 1.25rem;
  color: var(--black-color);
  margin-bottom: 26px !important;
}

.plan_feature p {
  color: var(--grey-color);
  font-size: 18px;
  margin-top: 10px;
}

.plan_feature p span {
  color: var(--main-color);
  font-weight: 600;
}

.buy_now-btn {
  margin-top: 32px;
}

.buy_now-btn a {
  border: 1px solid var(--main-color);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
  border-radius: 15px;
  color: var(--main-color);
  font-size: 1.375rem;
  font-weight: 600;
}

.hosting_box:hover .buy_now-btn a {
  border: 1px solid var(--white-color);
  background: var(--white-color);
  color: var(--main-color);
}

.testimonial_bg {
  background: var(--white-shade) !important;
}

/* plan_wrapper css end */

/* support_wrapper css start */
.support_wrapper {
  background-image: url("../images/svg/supportBg.svg");
  background-size: cover;
  background-repeat: no-repeat;
}

.support_wrapper__content {
  padding: 83px 0;
}

.support_wrapper__content h3 {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 70px;
}

.support_wrapper__content p {
  margin-top: 30px;
  color: var(--black-color);
  font-size: 18px;
  line-height: 30px;
}

.support_contact {
  margin-top: 36px;
}

.support_contact a {
  color: var(--black-color);
  font-size: 25px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 15px;
}

.support_contact a:hover {
  color: var(--main-color);
}

.try-now {
  margin-top: 36px;
}

.try-now a {
  border: 1px solid var(--black-color);
  padding: 16px 44px;
  border-radius: 6px;
  color: var(--black-color);
  font-size: 18px;
  font-weight: 600;
}

.try-now a:hover {
  background: var(--main-color);
  color: var(--white-color);
  border: 1px solid var(--main-color);
}

/* support_wrapper css end */

/* technology_wrapper css start */
.technology_wrapper {
  padding: 110px 0;
}

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

.technology_wrapper__heading h3 {
  font-size: 40px;
  line-height: 70px;
  max-width: 300px;
  font-weight: 700;
  text-align: center;
  text-transform: capitalize;
}

.technology_wrapper__heading h3 span {
  color: var(--main-color);
}

.technology_wrapper__content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* technology_wrapper css end */

/* responsive css start */

@media (max-width: 1400px) {
  .support_wrapper {
    background-position: right;
  }
}

@media (max-width: 1200px) {
  .hosting_banner__heading h3 {
    font-size: 2.375rem;
    line-height: 3.125rem;
  }

  .hosting_banner__content {
    margin-top: 20px;
  }

  .hosting_banner {
    padding: 30px 0 70px 0;
  }

  .hosting_box h6 {
    font-size: 2.2rem;
  }

  .hosting_box h3 {
    font-size: 1.2rem;
  }

  .support_wrapper {
    background-position: bottom;
  }
}

@media (max-width: 992px) {
  .hosting_banner__heading {
    margin-top: 2.5rem;
  }

  .hosting_banner {
    padding: 100px 0 70px 0;
  }

  .feature_wrapper {
    padding: 50px 0;
  }

  .feature_heading h3 {
    line-height: inherit;
  }

  .feature_content {
    margin-top: 36px;
  }

  .feature_card {
    margin-bottom: 2rem;
  }

  .feature_card h3 {
    font-size: 20px;
    margin-top: 1rem;
  }

  .feature_card p {
    margin-top: 1rem;
  }

  .plan_wrapper__content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  .plan_wrapper {
    padding: 50px 0;
  }

  .technology_wrapper__heading h3 {
    line-height: 50px;
  }

  .technology_wrapper__content {
    margin-top: 3rem;
  }
}

@media (max-width: 768px) {
  .hosting_banner {
    padding: 100px 0 70px 0;
  }

  .hosting_banner__heading h3 {
    font-size: 2.125rem;
  }

  .plan_wrapper__content {
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
    margin-top: 35px;
  }

  .support_wrapper__content h3 {
    font-size: 30px;
    line-height: 30px;
  }

  .support_wrapper__content p {
    font-size: 1rem;
    line-height: 26px;
  }

  .support_contact {
    margin-top: 1rem;
  }

  .support_wrapper {
    background-image: url("../images/svg/mobile-bg.svg");
    background-size: cover;
    background-repeat: no-repeat;
  }

  .support_contact a {
    font-size: 20px;
  }

  .technology_wrapper {
    padding: 50px 0;
  }

  .technology_wrapper__heading h3 {
    font-size: 30px;
  }
}

@media (max-width: 576px) {
  .hosting_box {
    padding: 20px 1rem;
  }

  .hosting_banner__heading h3 {
    font-size: 1.5rem;
    line-height: 36px;
  }

  .hosting_banner__heading p {
    font-size: 14px;
    line-height: 25px;
  }

  .hosting_banner__content {
    margin-top: 10px;
  }

  .hosting_banner__content p {
    margin-bottom: 5px !important;
    font-size: 14px;
  }

  .feature_card p {
    line-height: 25px;
    font-size: 1rem;
    margin-top: 7px;
  }

  .plan_feature h3 {
    margin-bottom: 12px !important;
  }

  .plan_feature {
    margin-top: 20px;
  }

  .plane-price p {
    font-size: 1rem;
  }

  .buy_now-btn a {
    font-size: 18px;
  }

  .plan_feature p {
    font-size: 1rem;
  }

  .support_wrapper__content {
    padding: 54px 0;
  }

  .support_wrapper__content h3 {
    font-size: 24px;
  }

  .support_wrapper__content p {
    margin-top: 1rem;
    font-size: 14px;
  }

  .support_contact {
    margin-top: 1rem;
  }

  .support_contact a {
    font-size: 18px;
  }

  .try-now a {
    font-size: 1rem;
  }

  .technology_wrapper__content {
    margin-top: 2rem;
  }

  .technology_wrapper__heading h3 {
    font-size: 24px;
  }
}

@media (max-width: 410px) {
  .hosting_banner__heading h3 {
    font-size: 20px;
    line-height: 30px;
  }

  .feature_card h3 {
    font-size: 1rem;
  }

  .feature_card p {
    font-size: 14px;
  }
}

.myInput input,
.myInput textarea {
  border-radius: 10px;
  width: 100%;
  padding: 12px;
  border: none;
  outline: none;
  border: 1px solid var(--main-color);
}

.myInput {
  margin-bottom: 20px;
}

/* 404 page css */
.page_wrapper {
  padding: 100px 0;
}

.page_wrapper__content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* .page_wrapper__content h3{
  font-size: 90px;
  color: var(--main-color);
  font-weight: 600;
} */
.page_img img {
  width: 500px;
  aspect-ratio: 2/1;
  object-fit: contain;
}

.page_wrapper__content h6 {
  margin-top: 1.5rem;
  font-size: 24px;
  text-transform: uppercase;
  color: var(--black-color);
}

.page_wrapper__content p {
  margin-top: 1rem;
  font-size: 18px;
  color: var(--grey-color);
  text-align: center;
}

.home_btn {
  margin-top: 2rem;
}

.home_btn a {
  padding: 14px 40px;
  font-size: 20px;
  font-weight: 600;
  text-transform: capitalize;
}

.home_btn a:hover {
  color: var(--main-color);
  border: 1px solid var(--main-color);
  background: transparent;
  transition: 0.3s ease;
}

@media (max-width: 768px) {
  .page_wrapper__content h6 {
    font-size: 20px;
  }

  .page_wrapper__content p {
    font-size: 1rem;
  }

  .home_btn a {
    font-size: 1rem;
  }
}

/* term_wrapper css start */
.term_wrapper {
  padding: 40px 0;
}

.term--heading h3 {
  font-size: 28px;
}

.term_container h3 {
  font-size: 18px;
  font-weight: 600;
  margin-top: 3rem;
  margin-bottom: 1rem !important;
}

.term_container p {
  margin-top: 1rem;
  font-size: 1rem;
}

@media (max-width: 1280px) {
  .term_wrapper {
    padding: 110px 0 40px 0;
  }

  .term--heading h3 {
    font-size: 20px;
  }

  .term_container h3 {
    font-size: 1rem;
    margin-top: 2rem;
  }

  .term_container p {
    font-size: 14px;
    line-height: 25px;
  }
}