:root {
  --normal-size: 1.4rem;
  --title-large: 4rem;
  --title-small: 2.3rem;
  --body-large: 1.8rem;
}

@font-face {
  font-family: "Proxima Nova";
  src: url(./assets/fonts/Proxima\ Nova\ Regular.ttf);
}

.hero {
  background-image: url("./assets/images/icons/hero\ bg\ phone 1.png");
}

.cta .content {
  background: url("./assets/images/icons/cta-banner-small.png");
}

.contact-us {
  background: url("./assets/images/icons/contact-bg 1.png") no-repeat center
    center;
}

@media (min-width: 768px) {
  .hero {
    background-image: url("./assets/images/icons/hero bg 1.png");
  }

  .cta .content {
    background: url("./assets/images/icons/cta-banner-small.png");
  }
}

html {
  font-size: 10px;
  scroll-behavior: smooth;
  font-family: "Rubik", sans-serif;
  /* font-family: "Proxima Nova", sans-serif; */
}

body {
  /* font-family: "poppins"; */
  background-color: #f9f5ff;
  color: #202842;
  /* color: #2028429f; */
  font-size: var(--normal-size);
  font-weight: 400 !important;
  transition: 0.5s ease;
  overflow-x: hidden;
}

/* global style */

.text {
  color: #2028429f;
  line-height: 1.2;
}

.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ====== LANDING PAGE ===== */
/* HEADER */

.header-action .btn-outline {
  display: none;
}

.header .container {
  padding-inline: 16px;
  width: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  height: 60px;
  overflow: hidden;
  z-index: 1100;
}

.header .icon-btn {
  margin-top: 9px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: 0.5s ease-in-out;
}
.msg_success {
  font-size: 1rem;
  padding: 10px 5px;
  background-color: rgb(155, 177, 238);
}

.header .icon-btn .close-menu {
  display: none;
}

.header .icon-btn .close-menu {
  display: none;
}

.header .icon-btn .close-menu.active {
  display: block;
}

.header .icon-btn .open-menu.active {
  display: none;
}

.header .icon-btn:is(:hover) {
  background-color: #b6bad3b7;
}

/* .header .open-menu { margin-top: 13px; } */

.header .logo {
  margin-inline: auto;
  width: 120px;
  height: 60px;
}

.header .header-action .btn {
  height: 30px;
  border-radius: 4px;
  padding-inline: 5px;
}

.header .header-action .btn a {
  font-size: 1rem;
}

.navbar {
  position: fixed;
  background-color: #5d6eff;
  top: 60px;
  left: 0;
  width: 100%;
  padding-block: 3px 20px;
  padding-inline: 20px;
  height: auto;
  transform: translateY(calc(100% - (100% - 30px)));
  visibility: hidden;
  opacity: 0;
  scale: 0.4;
  transition: 0.5s ease-in-out;
  z-index: -92;
}

.navbar.active {
  transform: translateY(0%);
  visibility: visible;
  opacity: 1;
  scale: 1;
  z-index: 10000;
}
.navbar .menu {
  text-align: center;
  margin-block: 0 5px;
  /* gap: 15px; */
}

.navbar .menu li {
  /* position: relative; */
  cursor: pointer;
  padding-block: 10px;
  border-radius: 2px;
  padding-bottom: 3px;
  transition: 0.5s ease-in-out;
  /* margin-bottom: 3px; */
}

.navbar .menu li:hover {
  background-color: #e9ebf8ce;
}
.navbar .menu li:hover .link {
  color: #202842;
  /* transition-delay: .6s;  */
}

.navbar .menu a {
  transition: 0.5s ease-in-out;
}
.navbar .menu a,
.navbar .btn a {
  color: #fff;
  font-size: 1.3rem;
}
.navbar .btn {
  height: 45px;
  width: calc(100%);
  border-radius: 4px;
  margin-inline: auto;
  margin-top: 40px;
}
.shadow {
  position: fixed;
  top: 60px;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -2;
  transition: 0.5s linear;
  background: transparent;
}

.shadow.active {
  background-color: #0d0d0e85;
  z-index: 999;
}

/* Hero */

.hero .shapes {
  display: none;
}
.hero {
  /* background-color: #5D6EFF; */

  background-size: cover;
  background-position: 100%;
  background-repeat: no-repeat;
  width: 100%;
  z-index: 4;
}

.hero .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-inline: 0 7px !important;
  padding-block: 10px 40px;
}

.hero .content {
  color: #fff;
  /* text-align: center; */
  padding-inline: 16px;
}

.hero :where(.title, .subtitle) {
  letter-spacing: 1px;
  line-height: 0.9;
  font-weight: 900;
  text-align: center;
}

.hero .title {
  font-size: var(--title-large);
  margin-top: 25px;
}

.hero .subtitle {
  font-size: var(--title-small);
  margin-block: 10px 15px;
}

.hero .span {
  position: relative;
  z-index: 33;
  /* background-color: #0AD4C8; */
}
.hero .span:after {
  content: "";
  position: absolute;
  width: 99%;
  height: 7px;
  background: #0ad4c8;
  bottom: 8px;
  left: 1px;

  z-index: -1;
}

.hero .text {
  text-align: center;
  /* font-size: 1.4rem; */
  color: #ffffff9b;
  font-weight: 400;
  padding-top: 10px;
}

.hero .action {
  margin-block: 30px 30px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero .btn {
  height: 40px;
  border-radius: 4px;
  font-weight: 400 !important;
}

.hero .btn a {
  gap: 7px !important;
  letter-spacing: 0.3px;
  line-height: 1;
  padding-inline: 7px;
  /* font-weight: 100; */
}

.hero .btn svg {
  width: 10px;
  height: 10px;
}

/* .hero .btn-secondary { display: none; } */

.hero .btn-outline {
  border: 3px solid #0ad4c8;
  color: white;
  padding-inline: 0px;
  transition: 0.5s ease-in-out;
}

.hero .btn-outline:hover {
  background-color: #0ad4c8;
  border: 3px solid #0ad4c8;
  color: #fff;
}

.review,
.review-text,
.review-profiles,
.review-title-wrapper {
  display: flex;
  align-items: center;
  /* flex-wrap: wrap; */
}

.review-title-wrapper {
  gap: 15px;
}

.review-title-wrapper .title-medium {
  color: #ffffff9b;
}

.review-title-wrapper .title-medium span {
  color: #ffb800;
}

.review-text {
  gap: 5px;
}

/* .review-content-wrapper { max-width: fit-content!important; } */

.review {
  gap: 30px;
  position: relative;
  /* justify-content: space-between; */
  /* width: 100%; */
  font-size: 1.2rem;
}

.stars svg {
  width: 12px;
  height: 12px;
}

.review-profiles .avatar {
  position: absolute;
  width: 25px;
  height: 25px;
}
.review-profiles .avatar:nth-child(1) {
  right: 35px;
  z-index: 1;
}
.review-profiles .avatar:nth-child(2) {
  right: 25px;
  z-index: 2;
}
.review-profiles .avatar:nth-child(3) {
  right: 15px;
  z-index: 3;
}
.review-profiles .avatar:nth-child(4) {
  right: 5px;
  z-index: 4;
}
.review-profiles .avatar:nth-child(5) {
  right: 0px;
  z-index: 5;
}
/* .review-profiles .avatar:nth-child(4) { left: 30px; }  */

/* ====== ABOUT ===== */

.about {
  padding-top: 70px;
}
.about .title {
  font-size: var(--title-small);
}
.about .container {
  padding-inline: 16px;
  /* background-color: red; */
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  /* gap: 50px; */
}

.about .text {
  font-size: 1.4rem;
  padding-block: 15px 35px;
  /* padding-inline: 16px; */
}

.about .banner {
  display: none;
}

.about :is(.title, .text) {
  text-align: center;
}

.about .content {
  margin-block: 20px 30px;
  /* padding-inline: 16px; */
  display: grid;
  gap: 15px;
  background-color: #fff;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid #ece8e8;
  box-shadow: 0 53px 50px #5d6dff25;
}

.about .content li {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #2028429f;
}

.about .img-wrapper {
  min-width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #b8b8b8;
  border-radius: 50%;
}
.about .img-wrapper .leading-icon {
  width: 20px;
  height: 20px;
}

.about .action,
.about .action div {
  display: flex;
  align-items: center;
}

.about .action {
  gap: 10px;
  justify-content: space-between;
}

.about .action div {
  font-size: 1.3rem;
  color: #5d6eff;
}

.about .action div span {
  font-size: 1.5rem;
}

.about .action .btn {
  width: 45%;
  height: 45px;
  border-radius: 4px;
  /* padding-inline: 5px; */
  padding-inline: 15px;
  box-shadow: 0 37px 45px rgba(0, 0, 0, 18%);
}

/* ====== PRICE ===== */

.price {
  padding-inline: 16px !important;
  padding-top: 70px;
  margin-bottom: 30px;
  max-width: 1200px;
  width: 100%;
  position: relative;
  /*display: flex!important;*/
  /*align-items: center!important;*/
  /*justify-content: center!important;*/
}

.price {
  margin-inline: auto !important;
}

.price .title,
.price .text {
  text-align: center;
}
.price .title {
  line-height: 1.2;
  font-size: var(--title-small);
}

.price .text {
  max-width: 40ch;
  margin-inline: auto;
  margin-block: 15px 30px;
}

.price-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-inline: 16px;
  width: 100%;
  padding-top: 10px;
}

.price-list::-webkit-scrollbar {
  height: 6px;
}

.price-list::-webkit-scrollbar-track {
  background-color: #aeb4e3;
  border-radius: 4px;
}

.price-list::-webkit-scrollbar-thumb {
  background-color: #5d6eff;
  border-radius: 4px;
}
.price-list::-webkit-scrollbar-button {
  width: calc(25% - 28px);
}

.price-list .list-item {
  transition: 0.5s ease;
  min-width: fit-content;
}

.price-list .list-item:hover {
  transform: translateY(-3%);
}

.price-list .card {
  position: relative;
  /* scroll-snap-align: start; */
  cursor: pointer;
  border: 1px solid #ece8e8;
  /* background-color: red; */
  padding: 25px 20px;
  border-radius: 20px;
  overflow-x: hidden;
  scroll-snap-align: start;
  scroll-margin-inline: 16px;
  z-index: 1021;
  user-select: none;
  background-color: #fff;
  height: 400px;
  display: flex;
  flex-direction: column;
  flex: 1;

  /* justify-content: flex-start; */
}

.card-title-wrapper,
.card-price,
.card-price,
.card-content li {
  display: flex;
  align-items: center;
}

.card-title-wrapper,
.card-price {
  margin-inline: auto;
}

.card-title-wrapper {
  gap: 15px;
}

.card .title-medium {
  font-size: var(--title-small);
  font-weight: medium;
}

.card-price,
.card-content li {
  /* gap: 5px; */
}

.card-price {
  color: #202842;
  margin-block: 10px 10px;
}

.card-price p {
  font-size: 2.4em;
  color: #202842;
  font-weight: 600;
}

.card-price span {
  font-size: 1.6rem;
  color: #202842;
  font-weight: 600;
}

.card-content {
  display: grid;
  gap: 10px;
  margin-block: 20px auto;
}

.card-content li {
  gap: 10px;
}

.card .btn {
  width: max-content;
  padding-inline: 50px;
  margin-inline: auto;
  height: 45px;
  align-self: flex-end !important;
}

/* ====== CTA ===== */

.cta {
  padding-block: 95px 30px;
}

.cta .container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding-inline: 16px;
}

.cta .content {
  order: 2;

  background-size: 100% 100%;
  background-position: 100%;
  background-repeat: no-repeat;
  padding: 30px 30px;
  margin-top: 20px;
  /* width: 100%; */
}

.cta .text {
  color: #fff;
  font-size: var(--body-large);
  line-height: 1.1;
  letter-spacing: -0.7px;
  font-weight: 600;
  /* max-width: 20ch; */
}

.cta .action,
.cta .action div {
  display: flex;
  align-items: center;
  gap: 5px;
}

.cta .action {
  gap: 10px;
}

.cta .content .action .btn {
  margin-top: 30px;
  width: 45%;
  height: 45px;
}

.cta .content .action .btn a {
  color: #fff;
  font-size: 1.2rem;
}

.cta .action div {
  color: #b3fffa;
  /* font-size: 1.1rem; */
  margin-top: 20px;
}

.cta .action div span {
  font-size: 1.3rem;
}
.cta .action div p {
  font-size: 1.2rem;
}

/* .cta .banner { order: 1; } */
.cta .shapes .shape1 {
  display: block;
  width: 100%;
  height: 100%;
}

/* ====== CONTACT US ===== */

.contact-us {
  background-size: 100% 50%;
  background-position-y: 0;
  /* position: relative; */
  padding-top: 70px;
  margin-bottom: 30px;
}

.contact-us .container {
  display: flex;
  /* flex-direction: row; */
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
  padding-inline: 16px;
}

.leave-message {
  /* background-color: red; */
  /* position: absolute; */
  width: 100%;
  background-color: #fff;
  border: 1px solid #f9f5ff;
  border-radius: 15px;
  padding: 20px 15px;
  /* margin-top: 40px; */
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 25%);
  overflow: hidden;
}

.leave-message .title {
  font-size: var(--title-small);
  color: #5d6eff;
}

.leave-message .text {
  margin-block: 3px 5px;
  /* max-width: 19ch; */
  font-weight: 500;
}

.leave-message :where(.banner, .banner-center) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin-block: 30px;
}

.leave-message .message-form {
  display: grid;
  gap: 5px;
}

.leave-message .input-field {
  background-color: #f5f4fa;
  border: 0;
  color: #000;
  font: inherit;
  font-weight: 500;
}

.leave-message .input-field::placeholder {
  color: #2028428c;
  font-weight: 300;
}

.leave-message .input-field.textarea {
  height: unset;
  padding-top: 10px;
  resize: none;
}

.leave-message .btn {
  height: 45px;
  font-size: 1.5rem;
  margin-top: 20px;
}
.address .address-list {
  display: grid;
  gap: 10px;
  margin-top: 40px;
  padding-left: 20px;
}
.address .address-list li,
.address .address-list .phone {
  display: flex;
  align-items: center;
}

.address .leading-icon-wrapper {
  min-width: 40px;
  min-height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #b3c5ff;
  border-radius: 50%;
  /* width: 20%; */
  /* background-color: yellow; */
}

.address-list .leading-icon {
  width: 20px;
  height: 20px;
}

.address .address-list li {
  gap: 20px;
  font-size: var(--normal-size);
}

.address .address-list .phone {
  /* justify-content: center; */
  flex-wrap: wrap;
}

.address .banner {
  display: none;
}

.shapes :is(.shape1, .shape2) {
  display: none;
}

.social-list {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  justify-content: center;
  align-items: center;
  /* margin-inline: auto!important; */
}

.social-list .icon-btn {
  background-color: #5d6eff;
  padding: 7px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  max-width: fit-content;
}

.flex-col {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-inline: auto;
}

.social-list .icon-btn svg {
  width: 20px;
  height: 20px;
}

.social-list .icon-btn svg path {
  transition: 0.5s ease-in-out;
}

.social-list .icon-btn:hover svg path {
  fill: #52faef;
}

/* .social-list { display: none; } */

/* ====== MEDIA QUERIES ===== */

/* media query for screen above 340px */
@media (min-width: 340px) {
  /* HERO */
  .hero .text {
    /* max-width: 28ch; */
    /* margin-inline: auto; */

    text-align: center;
    margin-block: 10px;
  }
  .hero .action .btn {
    width: 100%;
  }

  .review .stars svg {
    width: 17px;
    height: 17px;
  }

  .review-profiles .avatar {
    width: 35px;
    height: 35px;
  }

  .review-title-wrapper,
  .review-text {
    font-size: 1.4rem;
  }

  /* ABOUT */

  .about .title,
  .price .title {
    font-size: 2.6rem !important;
    letter-spacing: -0.5px;
  }

  .about .action .btn {
    font-size: 1.5rem;
    padding-inline: 30px;
  }

  .about .action div span {
    font-size: 1.9rem;
  }
  .about .action div {
    font-size: 1.5rem;
  }

  /* PRICE */
  .price-list {
    flex-direction: row;
    padding-bottom: 18px;
    margin-bottom: 24px;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
    scroll-snap-stop: always;
    overscroll-behavior-x: contain;
  }

  .price .card .btn {
    width: 100%;
  }
}
/* media query for screen above 412px */
@media (min-width: 412px) {
  /* body { font-size: 1.6rem; } */
  :root {
    --title-large: 4.5rem;
    --title-small: 3.2rem;
    --body-large: 2rem;
    --normal-size: 1.5rem;
  }

  /* .hero .subtitle { font-size: 2.9rem; } */

  /* HERO */
  .hero .title {
    font-size: 4.5rem;
  }
  .review {
    font-size: 1.5rem;
  }
  .review .stars svg {
    width: 20px;
    height: 20px;
  }
  .review-profiles .avatar {
    width: 40px;
    height: 40px;
  }
  /* ABOUT */
}

/* media query for screen above 520px */
@media (min-width: 520px) {
  :root {
    --body-large: 2.4rem;
    /* --title-large: 7rem; */
  }

  .container {
    width: 100%;
    margin-inline: auto;
  }

  .header .container {
    width: 100%;
  }

  .hero .title {
    margin-top: 20px;
    /* font-size: 4.8rem; */
  }

  .hero .text {
    font-size: 1.8rem;
    max-width: unset;
  }
  .review {
    font-size: 1.8rem !important;
    margin-top: 20px;
  }

  .btn a {
    font-size: 1.6rem;
  }

  .about .action div {
    padding-right: 20px;
  }

  .about .title,
  .price .title {
    font-size: 2.8rem;
    letter-spacing: -1.5px;
  }

  .price .text {
    margin-bottom: 50px;
  }

  .cta .content {
    background-size: 100% 100%;
  }

  .cta .text {
    max-width: 25ch;
  }

  .contact-us .text {
    font-size: 1.5rem !important;
  }
}

/* media query for screen above 520px */
@media (min-width: 600px) {
  .container {
    max-width: 540px;
  }
  /* header */
  .header-action .btn:nth-child(1) {
    display: flex;
  }

  .navbar,
  .navbar .menu,
  .navbar .menu a,
  .header .logo,
  .header .container {
    all: unset;
  }

  .header .container,
  .navbar .menu,
  .header-action {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .header .container {
    /*width:100%;*/
    padding-inline: 16px !important;
    height: 75px;
  }

  .header-action {
    margin-left: auto;
  }

  .header .header-action .btn {
    height: 45px;
    padding-inline: 20px;
  }

  .header .header-action .btn a {
    font-size: 1.3rem;
  }

  .navbar .menu {
    /* flex-grow: 1; */
    gap: 10px;
    margin-inline: 10px auto;
  }

  .navbar .menu li:is(:hover) {
    background-color: unset;
    text-decoration: underline;
  }

  .navbar .menu a {
    font-size: 1.4rem;
  }
  .header .icon-btn {
    display: none;
  }

  .navbar .btn {
    display: none;
  }

  .header .btn-outline {
    background-color: #bfc5fc;
    border: 1px solid #eaecff;
    color: #5d6eff;
    display: grid;
    place-items: center;
  }

  .cta .content {
    width: 90%;
  }

  .hero .title {
    font-size: 5.4rem;
  }

  .hero .span:after {
    height: 9px;
  }
}

@media (min-width: 768px) {
  /* global */
  /* .btn { height: 45px; } */

  .container {
    max-width: 750px;
  }
  .navbar .menu {
    margin-inline: 20px auto;
  }

  .hero .banner {
    width: 50%;
    order: 2;
  }
  .hero .content {
    width: 50%;
    order: 1;
    /* margin-block: 0; */
  }

  .hero .title,
  .hero,
  .subtitle,
  .hero .text {
    text-align: left;
  }

  .hero .text,
  .hero .title-medium,
  .review-text {
    font-size: 1.6rem;
  }

  .review-profiles .avatar {
    width: 30px;
    height: 30px;
  }

  .hero .btn a {
    /* height: 45%; */
    font-size: 1.4rem !important;
  }

  .hero .btn svg {
    width: 14px !important;
    height: 14px;
  }

  .about {
    width: 100%;
  }

  .about .container {
    gap: 40px;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 100%;
  }

  .about .banner {
    display: block;
    width: 50%;
  }
  .about .left {
    width: 50%;
    font-size: 1.3rem;
    margin-right: 16px;
    /* background-color: green; */
  }

  .about .text,
  .about .title {
    text-align: left;
  }

  .about .text {
    font-size: 1.3rem;
    margin-bottom: 10px;
  }

  .about .btn {
    height: 45px !important;
    max-width: 40%;
  }

  /* .about .content {background-color: yellow; margin-top: 0; } */

  .banner-center {
    display: none;
  }

  /* PRICE */

  .price-list {
    flex-direction: row;
    width: 100%;
  }
  /* .price-list li { min-width: calc(50% - 30px); } */

  .price-list .card {
    width: 100%;
    /* background-color: red; */
  }

  .price .text {
    max-width: 55ch;
  }

  .cta .banner {
    display: none;
  }
  .cta .content {
    /* margin-top: 200px; */
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 100% 100%;
    /* background-image: none; */
    padding-left: 50px;
    padding-block: 50px;
    /* margin-top: 10px; */
    width: 100%;
  }

  .cta .content .action .btn {
    width: 25%;
  }

  .contact-us {
    background-size: 100% 80%;
    margin-bottom: 70px;
  }

  .contact-us .container {
    position: relative;
    width: calc(90% - 60px);
    background-color: #fff;
    border: 1px solid #f9f5ff;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 25%);
    /* overflow: hidden; */
    flex-wrap: nowrap;
  }

  .leave-message {
    all: unset;
    width: 50%;
    padding: 30px;
  }

  .leave-message .text {
    margin-bottom: 20px;
    max-width: unset;
  }

  .address .banner {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .address {
    width: 50%;
  }

  .social-list {
    all: unset;
    position: absolute;
    background-color: #5d6eff;
    right: -45px;
    bottom: 30px;
    padding: 15px 5px;
    border-radius: 0 0 22px 0;
  }

  .footer {
    flex-direction: row;
    justify-content: space-between;
  }
  .footer .copy-right {
    max-width: fit-content;
  }
}

/* media query for screen above 340px */
@media (min-width: 910px) {
  /* .container {
        max-width: 910px;
    } */

  .header .container {
    /* min-width: 90%; */
    max-width: 90%;
    margin-inline: auto;
    /* background-color: red; */
  }

  .header img {
    width: 100%;
    height: 100%;
    /* background-color: red; */
  }
  .navbar .menu {
    margin-inline: 30px auto;
  }

  .hero .container {
    min-width: 90%;
    padding-left: 30px;
    gap: 50px;
  }
  .hero .content {
    width: calc(50% - 25px);
  }
  .hero .banner {
    width: calc(50% - 25px);
  }

  .review-profiles .avatar {
    width: 40px;
    height: 40px;
  }

  .about .left {
    /* font-size: 1.3rem; */
    padding-right: 70px;
  }

  /* .about .title { font-size: 2.8rem!important; } */
  /* .about .text { font-size: 1.3rem; } */

  .about .btn {
    height: 55px !important;
    max-width: 40%;
  }
  .about .action div span {
    font-size: 2.2rem !important;
  }
  .about .action div p {
    font-size: 1.6rem;
  }

  .price {
    min-width: 100%;
  }

  .price::before {
    content: "";
    position: absolute;
    top: 28%;
    left: 40%;
    transform: translate(-25%, -0%);
    width: 100%;
    height: 100%;
    background: url("./assets/images/bg\ logo.png");
    background-repeat: no-repeat;
    background-size: 70% 130%;
    /* background-position: 100% 50%; */
    z-index: -1;
  }

  .price .container {
    all: unset;

    margin-inline: auto !important;
  }

  .price-list {
    margin-inline: auto;
    padding-inline: 100px;
  }
  /* .price-list li { min-width: calc(50% - 30px); } */

  .cta {
    margin-bottom: 80px;
  }
  .cta .content {
    padding-top: 100px;
  }
  .cta .text {
    font-size: 2.2rem;
  }
  .cta .btn {
    height: 55px !important;
  }
  .cta .action {
    gap: 15px;
  }
  .cta .action div span {
    font-size: 2.2rem;
  }
  .cta .action div p {
    font-size: 1.4rem;
  }
  .cta .btn a {
    font-size: 1.5rem;
  }

  .footer {
    padding-inline: 50px;
  }
}

/* media query for screen above 340px */
@media (min-width: 1200px) {
  .container {
    max-width: 1000px;
  }
  .navbar .menu {
    margin-inline: 40px auto;
  }
  /* .price-list li { min-width: calc(25% - 16px); } */

  .hero .content {
    width: calc(40% - 25px);
  }
  .hero .banner {
    width: calc(60% - 25px);
  }

  .hero .title {
    font-size: 6rem;
  }
  .hero .subtitle {
    font-size: 3.4rem;
  }

  .cta .text {
    font-size: 2.8rem;
  }

  .hero .span:after {
    height: 11px;
  }

  .price::before {
    left: 40%;
    background-size: 70% 130%;
  }
}

@media (min-width: 1300px) {
  body {
    max-width: 1350px !important;
    /*display: flex;*/
    margin-inline: auto !important;
  }
}