* {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  box-sizing: border-box;
  text-decoration: none;
  list-style-type: none;
}

img {
  width: 100%;
}

.header__container {
  width: 90%;
  max-width: 1140px;
  margin-top: 46px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__container-title {
  width: 148px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header__title {
  color: #0b132a;
  font-family: "Rubik";
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.header__title-detail {
  color: #0b132a;
  font-family: "Rubik";
  font-size: 20px;
  font-weight: 700;
}

.header__logo-image {
  width: 35px;
}

.header__menu {
  width: 451px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
}

.header__menu-link {
  color: #4f5665;
  font-family: "Rubik";
  font-size: 16px;
  font-weight: 400;
}

.header__links-button {
  width: 233px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__links-button-in {
  color: #0b132a;
  font-family: "Rubik";
  font-size: 16px;
  font-weight: 500;
}

.header__link-button-up {
  width: 150px;
  height: 45px;
  line-height: 45px;
  border-radius: 50px;
  border: 1px solid #f53855;
  text-align: center;
  color: #f53855;
  font-family: "Rubik";
  font-size: 16px;
  font-weight: 500;
  transition: 300ms ease all;
}

.hero__container {
  width: 90%;
  max-width: 1140px;
  margin-top: 111px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hero__content {
  width: 48%;
  padding-bottom: 100px;
}

.hero__title {
  color: #0b132a;
  font-family: "Rubik";
  font-size: 50px;
  font-weight: 500;
}

.hero__title-detail {
  color: #f53838;
  font-family: "Rubik";
  font-size: 50px;
  font-weight: 700;
}

.hero__title-description {
  margin-top: 20px;
  color: #4f5665;
  font-family: "Rubik";
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 50px;
}

.hero__title-description-detail {
  color: #4f5665;
  font-family: "Rubik";
  font-size: 16px;
  font-weight: 500;
}

.hero__content-button-link {
  max-width: 250px;
  display: block;
  text-align: center;
  line-height: 60px;
  border-radius: 10px;
  background-color: #f53838;
  color: #fff;
  font-family: "Rubik";
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0px 30px 50px rgba(245, 56, 56, 0.35);
}

.hero__image {
  width: 50%;
}

.topics__container {
  width: 90%;
  max-width: 1140px;
  display: flex;
  justify-content: space-between;
  margin-top: 123px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 37px;
  padding-bottom: 37px;
  padding-left: 90px;
  padding-right: 90px;
  border-radius: 10px;
  border: 1px solid #eee;
  background: #fff;
  box-shadow: 0px 30px 50px 0px rgba(13, 16, 37, 0.08);
}

.topics__container-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
}

.topics__image-detail {
  width: 55px;
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  background-color: #ffecec;
}

.topics__image {
  width: 24px;
}

.topics__container-title {
  color: #0b132a;
  font-family: "Rubik";
  font-size: 25px;
  font-weight: 700;
}

.topics__container-title-description {
  padding-top: 5px;
  color: #4f5665;
  font-family: "Rubik";
  font-size: 20px;
  font-weight: 400;
}

.topics__line {
  width: 1px;
  height: 125px;
  background-color: #eeeff2;
}

.feature__header {
  width: 90%;
  max-width: 1087px;
  margin-top: 96px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.feature__image {
  width: 46%;
}

.feature__content {
  width: 40%;
}

.feature__title {
  color: #0b132a;
  font-family: "Rubik";
  font-size: 35px;
  font-weight: 500;
}

.feature__title-description {
  margin-top: 20px;
  color: #4f5665;
  font-family: "Rubik";
  font-size: 16px;
  font-weight: 400;
}

.feature__list {
  width: 214px;
  display: flex;
  justify-content: space-between;
}

.feature__list-image {
  width: 24px;
}

.feture__list-text {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  margin-bottom: 15px;
  color: #4f5665;
  font-family: "Rubik";
  font-size: 14px;
  font-weight: 400;
}

.plans__card-container {
  margin-top: 60px;
  margin-left: auto;
  margin-right: auto;
  max-width: 1140px;
  width: 90%;
  display: flex;
  gap: 60px;
}

.plans__container {
  margin-top: 96px;
  padding-top: 85px;
  padding-bottom: 85px;
  background: linear-gradient(
    180deg,
    #f8f8f8 -45.04%,
    rgba(248, 248, 248, 0) 88.56%
  );
}

.plans__title {
  text-align: center;
  color: #0b132a;
  text-align: center;
  font-family: "Rubik";
  font-size: 35px;
  font-weight: 500;
}

.plans__title-description {
  margin-top: 20px;
  color: #4f5665;
  text-align: center;
  font-family: "Rubik";
  font-size: 16px;
  font-weight: 400;
}

.plans__card {
  width: calc(33.33% - 40px);
  padding-top: 80px;
  padding-bottom: 50px;
  padding-left: 70px;
  padding-right: 70px;
  border-radius: 10px;
  border: 2px solid #ddd;
  background-color: #fff;
}

.plans__card-image {
  width: 144px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.plans__card-title {
  margin-top: 30px;
  margin-bottom: 30px;
  color: #0b132a;
  text-align: center;
  font-family: "Rubik";
  font-size: 18px;
  font-weight: 500;
}

.plan__cards-text {
  display: flex;
  margin-bottom: 10px;
  gap: 20px;
  color: #4f5665;
  font-family: "Rubik";
  font-size: 14px;
  font-weight: 400;
}

.plan__cards-image-check {
  width: 24px;
}

.plan__type {
  margin-top: 130px;
  text-align: center;
  color: #0b132a;
  font-family: "Rubik";
  font-size: 25px;
  font-weight: 500;
}

.plan__type-detail {
  color: #4f5665;
  font-family: "Rubik";
  font-size: 25px;
  font-weight: 400;
}

.button-select {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 177.876px;
  height: 45px;
  border-radius: 50px;
  border: 2px solid #f53838;
  text-align: center;
  line-height: 45px;
  color: #f53838;
  font-family: "Rubik";
  font-size: 16px;
  font-weight: 700;
  transition: all 300ms ease;
}

.button-select:hover,
.header__link-button-up:hover {
  background-color: #f53838;
  color: #fff;
}

.location__container {
  margin-top: 94px;
  margin-left: auto;
  margin-right: auto;
  width: 1060px;
}

.location__title {
  color: #0b132a;
  text-align: center;
  font-family: "Rubik";
  font-size: 35px;
  font-weight: 500;
}

.location__description {
  margin-top: 20px;
  color: #4f5665;
  text-align: center;
  font-family: "Rubik";
  font-size: 16px;
  font-weight: 400;
}

.location__description-detail {
  color: #4f5665;
  font-family: "Rubik";
  font-size: 16px;
  font-weight: 500;
}

.location__image {
  margin-top: 55px;
  margin-left: auto;
  margin-right: auto;
  width: 1060px;
}

.sponsored__container {
  max-width: 1135px;
  width: 90%;
  margin-top: 141px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sponsored__image {
  width: 190px;
  display: flex;
  justify-content: space-between;
}

.testimonials__container {
  max-width: 1140px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  gap: 30px;
}

.testimonial__head {
  margin-top: 170px;
  margin-left: auto;
  margin-right: auto;
}

.testimonials__title {
  color: #0b132a;
  text-align: center;
  font-family: "Rubik";
  font-size: 35px;
  font-weight: 500;
}

.testimonials__description {
  margin-top: 20px;
  color: #4f5665;
  text-align: center;
  font-family: "Rubik";
  font-size: 16px;
  font-weight: 400;
}

.testimonails__box {
  width: calc(33.33% - 20px);
  max-width: 359px;
  margin-top: 60px;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 30px;
  padding-right: 30px;
  border-radius: 10px;
  border: 2px solid #f53838;
  background-color: #fff;
}

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

.testimonials__content {
  width: 182px;
  margin-left: 20px;
}

.testimonials__profiles-image {
  width: 50px;
}

.testimonials__content-title {
  color: #0b132a;
  font-family: "Rubik";
  font-size: 18px;
  font-weight: 500;
}

.testimonials__content-title-country {
  color: #4f5665;
  font-family: "Rubik";
  font-size: 14px;
  font-weight: 400;
}

.testimonials__avaliation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.testimonials__avaliation-number {
  color: #0b132a;
  font-family: "Rubik";
  font-size: 16px;
  font-weight: 400;
}

.testimonials__avaliation-image {
  width: 16px;
}

.testimonials__avaliation-text {
  margin-top: 27px;
  color: #0b132a;
  font-family: "Rubik";
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
}

.subscribe__container {
  width: 90%;
  max-width: 1140px;
  position: absolute;
  top: -120px;
  left: 0px;
  right: 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  padding-top: 58px;
  padding-bottom: 58px;
  padding-left: 70px;
  padding-right: 70px;
  border-radius: 10px;
  border: 1px solid #ddd;
  background: #fff;
  box-shadow: 0px 30px 50px 0px rgba(13, 16, 37, 0.08);
}

.subscribe__text {
  width: 40%;
}

.subcsribe__title {
  color: #0b132a;
  font-family: "Rubik";
  font-size: 35px;
  font-weight: 500;
}

.subscribe__title-description {
  margin-top: 20px;
  color: #4f5665;
  font-family: "Rubik";
  font-size: 16px;
  font-weight: 400;
}

.button__subscribe {
  width: 250px;
  height: 60px;
  color: #fff;
  font-family: "Rubik";
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  line-height: 60px;
  border-radius: 10px;
  background-color: #f53838;
  border: 1px solid #ddd;
  box-shadow: 0px 30px 50px rgba(245, 56, 56, 0.35);
}

.footer {
  position: relative;
  margin-top: 260px;
  padding-bottom: 100px;
  padding-left: 150px;
  padding-right: 150px;
  background-color: #f8f8f8;
}

.footer__container-menuinfo {
  padding-top: 180px;
  width: 90%;
  max-width: 1140px;
  display: flex;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
}

.footer__info {
  width: 23%;
}

.footer__container-title {
  width: 148px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer__title {
  color: #0b132a;
  font-family: "Rubik";
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.footer__title-detail {
  color: #0b132a;
  font-family: "Rubik";
  font-size: 20px;
  font-weight: 700;
}

.footer__logo-image {
  width: 35px;
}

.footer__info-title-description {
  width: 340px;
  margin-top: 26px;
  color: #4f5665;
  font-family: "Rubik";
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
}

.footer__info-title-description-detail {
  color: #4f5665;
  font-family: "Rubik";
  font-size: 16px;
  font-weight: 500;
}

.footer__social {
  margin-top: 30px;
  width: 140px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer__image-social {
  width: 35px;
  height: 35px;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 9px 11px 0px rgb(38 44 68 / 12%);
}

.footer__image-social img {
  width: 16px;
  fill: #f53838;
}

.footer__menu {
  width: 45%;
  display: flex;
  justify-content: space-between;
}

.footer__menu-title {
  color: #0b132a;
  margin-bottom: 20px;
  font-family: "Rubik";
  font-size: 18px;
  font-weight: 500;
}

.footer__menu-detail {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 10px;
}

.footer__menu-list {
  color: #4f5665;
  font-family: "Rubik";
  font-size: 16px;
  font-weight: 400;
}

@media only screen and (max-width: 1100px) {
  .header__container {
    width: 100%;
    flex-direction: column;
  }

  .header__menu {
    width: 100%;
    flex-direction: column;
    display: none;
  }

  .header__links-button {
    display: none;
  }

  .hero__container {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero__content {
    width: 100%;
    padding-bottom: 20px;
  }

  .hero__title {
    width: 100%;
    font-size: 32px;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    line-height: 50px;
  }

  .hero__title-detail {
    font-size: 32px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero__title-description {
    font-size: 16px;
    line-height: 30px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero__content-button-link {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 52px;
  }
  .hero__image {
    width: 100%;
    margin-bottom: 94px;
  }

  .topics__container {
    display: flex;
    flex-direction: column;
    margin-top: 0;
    padding-bottom: 0px;
    padding-right: 0px;
    padding-left: 0px;
  }
  .topics__container-item {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
  }

  .topics__line {
    width: 190px;
    height: 1px;
    margin-left: auto;
    margin-right: auto;
    background-color: #eeeff2;
    margin-bottom: 30px;
  }

  .feature__header {
    margin-top: 72px;
    display: flex;
    width: 90%;
    flex-direction: column-reverse;
  }

  .feature__image {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 83px;
  }

  .feature__content {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .feature__title {
    margin-left: auto;
    margin-right: auto;
    font-size: 28px;
    line-height: 50px;
  }

  .feature__title-description {
    margin-top: 26px;
    margin-bottom: 26px;

    font-size: 16px;
    line-height: 30px;
  }

  .plans__card {
    width: 100%;
    max-width: 330px;
    padding-top: 45px;
    padding-bottom: 45px;
  }

  .plans__container {
    width: 100%;
    padding-top: 51px;
    padding-bottom: 123px;
  }
  .plans__title {
    font-size: 32px;
  }

  .plans__title-description {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    line-height: 30px;
  }

  .plans__card-container {
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 50px;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
  }

  .plan__type {
    margin-top: 50px;
  }

  .location__container {
    margin-top: 0;
    width: 90%;
  }
  .location__title {
    font-size: 28px;
    line-height: 50px;
  }

  .location__description {
    font-size: 16px;
    line-height: 30px;
    margin-top: 20px;
    margin-top: 46px;
  }
  .location__image {
    width: 100%;
  }

  .sponsored__container {
    margin-top: 111px;
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 60px;
  }

  .testimonials {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .testimonial__head {
    margin-top: 136px;
  }

  .testimonials__title {
    font-size: 28px;
    line-height: 50px;
  }

  .testimonials__description {
    font-size: 16px;
    line-height: 30px;
    margin-bottom: 40px;
  }

  .testimonials__container {
    width: 100%;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    gap: 30px;
    margin-top: 0;
    flex-direction: column;
    align-items: center;
  }

  .testimonails__box {
    margin-top: 0px;
    width: 100%;
  }
  .footer {
    margin-top: 300px;
    padding: 0;
    margin-top: 200px;
  }

  .subscribe__container {
    left: 0;
    right: 0;
    width: 90%;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    padding-top: 46px;
    padding-bottom: 56px;
    padding-left: 31px;
    padding-right: 31px;
  }

  .subcsribe__title {
    font-size: 26px;
    line-height: 38px;
  }

  .subscribe__text {
    width: 100%;
  }

  .subscribe__title-description {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 30px;
  }

  .footer__container-menuinfo {
    flex-direction: column;
    width: 100%;
  }

  .footer__info {
    width: 90%;
    margin-top: 80px;
    margin-left: auto;
    margin-right: auto;
  }

  .footer__container-title {
    font-size: 20px;
    margin-bottom: 20px;
  }

  .footer__info-title-description {
    font-size: 16px;
    margin-bottom: 30px;
  }

  .footer__menu {
    margin-top: 52px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
  }

  .footer__menu-detail {
    display: none;
  }
}