Your IP : 18.188.78.86

Current Path : /var/www/www-root/data/www/monolith-realty.ru/local/templates/landing_form/
Upload File :
Current File : /var/www/www-root/data/www/monolith-realty.ru/local/templates/landing_form/template_styles.scss

@charset "UTF-8";
@import "sass";

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,600;0,700;1,400&display=swap');

* {
  padding: 0;
  margin: 0;
  border: 0;
}

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

:focus, :active {
  outline: none;
  text-decoration: none;
}

a {
  color: $black;
  @include animation_0_25;
}

a:focus {
  outline: none;
  text-decoration: none;
}

a, a:visited {
  text-decoration: none;
}

a:hover {
  color: $green;
  text-decoration: none;
}

a:active {
  outline: none;
  text-decoration: none;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]:hover,
input[type="number"]:focus {
  -moz-appearance: number-input;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type='submit'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

header, nav, section, article, aside, footer, video, figure {
  display: block;
  width: 100%;
}

html, body {
  width: 100%;
  line-height: 1.5;
  font-size: 20px;
  color: $black;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-family: $mainFont;
  background-color: $white;
}

/*body {
  display: grid;
  min-height: 100vh;
  grid-template-areas: "content";
  grid-template-rows: 1fr;
}*/

input, button, textarea {
  font-family: inherit;
  //-webkit-appearance: none;
  outline: 0;
}

input::-ms-clear {
  display: none;
}

input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration {
  display: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

button {
  cursor: pointer;
}

ul li {
  list-style: none;
}

img {
  vertical-align: top;
}

p {
  margin-bottom: 15px;

  &:last-child {
    margin-bottom: 0;
  }
}

h1, h2, h3, h4, h5 {
  font-weight: 700;
}

.container {
  max-width: 100vw;
  height: 100%;
  //padding: 0 15px;
  margin: 0 auto;
}

.ibg {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.btn {
  display: inline-flex;
  justify-content: center;
  padding: 41px 137px;
  border-radius: 122px;
  background: transparent;
  color: $black;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  @include animation_0_25;
}

.btn1 {
  background: $yellow;

  &:hover {
    color: $black;
    box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.15);
  }

  &:active {
    color: $black;
    background: $yellow;
    box-shadow: none;
  }
}

.btn2 {
  color: $white;
  background: $green;
  padding: 23px 52px;

  &:hover {
    color: $white;
    background: #01c3a2;
    box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.15);
  }
}

.lock {
  overflow: hidden !important;
}

main.main {
  width: 100%;
  max-width: 1920px;
  min-height: 100vh;
  padding-right: 97px;
  overflow-x: hidden;
}

.content_wave__mob,
.content_right__mob {
  display: none;
}

// Aside
aside.aside {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: fixed;
  top: 0;
  left: 0;
  max-width: 460px;
  height: 100vh;
  background: $green2;
  z-index: 20;
  overflow-y: auto;
  padding: 50px 0;
  @include animation_0_25;
}

.aside_close {
  display: none;
}

.mob_menu_btn {
  display: none;
  @include animation_0_25;
}

.mob_menu_btn._hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.aside_logo {
  width: 100%;
  max-width: 280px;
  margin: 0 auto 120px;

  img {
    max-width: 100%;
  }
}

.aside_menu {
  margin-bottom: 40px;
}

.aside_social {
  margin-top: auto;
}

.social_list {
  display: flex;
  justify-content: center;
  gap: 30px;
}

.social_link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  position: relative;

  &:hover {
    .social_img_hover {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      z-index: 3;
    }
  }
}

.social_img,
.social_img_hover {
  position: absolute;
  top: 0;
  left: 0;
}

.social_img {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

.social_img_hover {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
  @include animation_0_25;
}

// Content
.content {
  //overflow: hidden;
  padding: 50px 0 0 calc(460px + 115px);
}

.content_header {
  display: flex;
  justify-content: flex-end;
}

.header_left {
  display: none;
}

.header_phone {
  display: flex;
}

.header_phone__icon {
  display: flex;
  margin-right: 10px;
}

.header_phone__number {
  font-weight: 600;
  line-height: 1;
}

// Content_body__left
.tab_body__wrapper {
  display: flex;
  width: 100%;
}

.tab_body__wrapper_res {
  display: none;
}

.tab_body__wrapper._hide,
.tab_body__wrapper_res {
  display: none;
}

.tab_body__wrapper._show,
.tab_body__wrapper_res._show {
  display: flex;
}

.content_left {
  width: 100%;
  max-width: 548px;
  position: relative;
  z-index: 1;
}

.content_title {
  width: 100%;
  max-width: 562px;
  font-size: 55px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 64px 0 10px;
}

.content_subtitle {
  font-size: 30px;
  margin-bottom: 40px;

  b {
    font-weight: 600;
  }
}

.content_subtitle._res {
  font-size: 20px;
}

.content_btn_container {
  margin-bottom: 40px;
}

.content_note {
  position: relative;
  padding-left: 20px;
  margin-bottom: 40px;

  b {
    font-weight: 600;
  }

  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 1px;
    background: $green;
  }
}

.content_badge {
  padding-left: 394px;
}

.content_badge__inner {
  width: 246px;
}

.badge_title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 13px 32px;
  margin-bottom: 10px;
  border-radius: 10px;
  background: rgba(228, 243, 242, 0.70);
  backdrop-filter: blur(5px);
}

.badge_description {
  font-size: 16px;
}

// Content_body__right
.content_right {
  position: relative;
}

.content_main_image {
  display: flex;
  width: 540px;
  margin-top: -27px;

  img {
    max-width: 100%;
  }
}

.content_main_image._res {
  display: none;
}

.content_quote {
  width: 270px;
  height: 176px;
  position: absolute;
  top: 140px;
  right: -149px;
  z-index: 1;
}

.content_quote__bubble {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.content_quote__text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% + 4px), calc(-50% - 12px));
  width: 100%;
  max-width: 191px;
  font-size: 16px;
  z-index: 3;
}

.content_wave {
  position: absolute;
  z-index: -1;
}

.content_wave__top {
  top: 102px;
  left: -40px;
}

.content_wave__bot {
  bottom: 174px;
  right: -97%;
}

// Tabs
.tabs {
  display: flex;
  position: relative;
}

.tab_btn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 20px 50px;
  cursor: pointer;
  border-bottom: 1px solid $green;
  position: relative;
  @include animation_0_25;

  &:first-child {
    border-top: 1px solid $green;
  }

  &:hover {
    color: $white;
    background: $green;
  }
}

.tab_btn._active {
  background: $green;
  color: $white;
}

.tab_content {
  position: relative;
  width: 100%;
  //min-height: calc(100vh - 70px);
  //overflow: hidden;
  z-index: 10;
}

.tab_body {
  position: absolute;
  width: 100%;
  height: 100%;
  top: -200%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  user-select: none;
  transform: translateX(40px);
}

.tab_body._active {
  top: 0;
  opacity: 1;
  visibility: visible;
  user-select: auto;
  transform: translateX(0);
  transition: opacity .25s ease-out, visibility .25s ease-out, transform .25s ease-out;
}

.tab_description {
  padding: 40px 40px 20px;
}

.tab_link {
  padding: 0 40px;

  a {
    font-weight: 500;
    font-size: 17px;
    text-decoration: underline;

    &:hover {
      text-decoration: underline;
      color: red;
    }
  }
}

// Form
.modal {
  width: 100%;
  max-width: 540px;
}

.modal_inner {
  width: 100%;
}

.modal_title {
  font-weight: 700;
  font-size: 30px;
  text-align: center;
  margin-bottom: 10px;
}

.form_message__error {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  font-size: 14px;
  font-weight: 600;
  color: #f25830;
  text-align: center;
  margin-bottom: 10px;
  @include animation_0_25;
}

.form_message__error._show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal_form {
  width: 100%;
}

.form__item {
  margin-bottom: 15px;
  position: relative;

  &:last-child {
    margin-bottom: 0;
  }
}

.form__item._filled {
  .form__label {
    font-size: 14px;
    top: 30%;
  }
}

.form__label {
  font-size: 15px;
  color: #a9a9a9;
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  @include animation_0_25;

  span {
    color: #f25830;
  }
}

.form__input {
  border-radius: 4px;
  height: 52px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0)));
  background-image: -o-linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 100%);
  border: 1px solid #ebebeb;
  background-color: #f5f5f5;
  width: 100%;
  font-size: 17px;
  padding: 17px 10px 0;
  @include animation_0_25;
}

.form__input._error {
  border: 1px solid #f25830;
}

.form__cta {
  margin-top: 15px;

  button {
    display: inline-flex;
    align-content: center;
    justify-content: center;
    background: #00ab8e;
    border: 1px solid #00ab8e;
    color: #ffffff;
    line-height: 1;
    font-size: 15px;
    font-weight: 600;
    border-radius: 4px;
    padding: 13px 24px 14px;
    @include animation_0_25;

    &:hover {
      background: rgba(0, 174, 160, 0.7);
      border: 1px solid rgba(0, 174, 160, 0.7);
    }
  }
}

// checkbox
.checkbox_container {
  display: flex;
  align-items: center;
  position: relative;

  .check {
    cursor: pointer;
    position: relative;
    width: 24px;
    height: 24px;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(0, 0, 0);
  }

  .check:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    opacity: 1;
    transition: opacity 0.2s ease;
  }

  .check svg {
    position: relative;
    z-index: 1;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: #c8ccd4;
    stroke-width: 1.5;
    transform: translate3d(0, 0, 0);
    transition: all 0.2s ease;
  }

  .check svg path {
    stroke-dasharray: 60;
    stroke-dashoffset: 0;
  }

  .check svg polyline {
    stroke-dasharray: 22;
    stroke-dashoffset: 66;
  }

  .check:hover:before {
    opacity: 1;
  }

  .check:hover svg {
    stroke: #00aea0;
  }

  input[id^="cbx_"]:checked + .check svg {
    stroke: #00aea0;
  }

  input[id^="cbx_"]:checked + .check svg path {
    stroke-dashoffset: 60;
    transition: all 0.3s linear;
  }

  input[id^="cbx_"]:checked + .check svg polyline {
    stroke-dashoffset: 42;
    transition: all 0.2s linear;
    transition-delay: 0.15s;
  }
}

.checkbox_container._error {
  .check {
    svg {
      stroke: #f25830;
    }
  }
}

.label_desc {
  margin-left: 15px;
  padding-top: 5px;
  cursor: pointer;
  font-size: 14px;

  a {
    color: #00ab8e;

    &:hover {
      text-decoration: underline;
    }
  }
}

// fancybox
.fancybox__backdrop {
  opacity: .7 !important;
}

.fancybox__content {
  padding: 40px 20px!important;
}

// RESULT_BLOCK
.content_result_block {
  width: 100%;
  max-width: 458px;
  margin: 85px 0 0 auto;
  position: relative;

  .content_wave__bot {
    top: auto;
    bottom: 0;
    left: 220px;
    right: auto;
    transform: translateY(calc(100% + 30px));
  }
}

.result_sign_message {
  font-size: 16px;
  font-weight: 600;
  background: rgba(228, 243, 242, 0.7);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 30px;
}

.result_message {
  font-size: 16px;
  margin-bottom: 55px;
}


// result_social_block
.result_social {

}

.result_social__item {
  display: flex;
  align-items: center;
  margin-bottom: 48px;

  &:last-child {
    margin-bottom: 0;
  }

  .item_icon {
    width: 94px;
    margin-right: 92px;

    img {
      width: 100%;
    }
  }

  .item_btn {

  }
}


@media (max-width: 1840px) {
  .content {
    padding: 50px 0 0 calc(460px + 60px);
  }
}

@media (max-width: 1760px) {
  .content_header {
    margin-bottom: 28px;
  }
  .content_quote {
    display: none;
  }

  .content_main_image {
    margin-top: 0;
  }
}

@media (max-width: 1680px) {
  aside.aside {
    max-width: 323px;
  }

  .aside_logo {
    width: 200px;
    margin: 0 auto 100px;
  }

  .content {
    padding: 50px 0 0 calc(323px + 60px);
  }

  .tab_btn {
    font-size: 16px;
    padding: 20px;
  }
}

@media (max-width: 1540px) {
  .btn {
    width: 100%;
    max-width: 318px;
    font-size: 16px;
    padding: 33px 30px;
    //padding: 33px 94px;
  }

  .btn2 {
    padding: 23px 52px;
  }

  .content_title {
    font-size: 35px;
  }

  .content_subtitle {
    font-size: 20px;
    margin-bottom: 50px;
  }

  .content_btn_container {
    margin-bottom: 60px;
  }

  .content_badge {
    padding-left: 354px;
  }

  .content_main_image {
    width: 430px;
  }

  .content_left {
    max-width: 515px;
  }
}

@media (max-width: 1360px) {
  .tab_body__wrapper_res {
    flex-wrap: wrap;
    width: 100%;

    .content_right {
      transform: translateX(90px);
    }
  }
  .content_main_image._res {
    display: block;
  }

  .res__left {
    display: flex;
    width: 100%;
  }

  .content_result_block {
    max-width: 100%;
    transform: translateX(97px);
    margin: 0;
  }

  .result_message,
  .result_social {
    max-width: 458px;
  }

  .result_sign_message {
    border-radius: 10px 0 0 10px;
  }
}

@media (max-width: 1300px) {
  .aside_logo {
    width: 200px;
  }

  .content_left {
    min-width: 344px;
    max-width: 430px;
  }

  .content_badge {
    padding-left: 100px;
  }

  main.main {
    padding-right: 60px;
  }

  .content {
    padding: 40px 0 0 calc(323px + 60px);
  }

  .content_note {
    font-size: 18px;
  }

  .content_right {
    margin-left: -26px;
  }

  .content_main_image {
    width: 414px;
  }

  .content_wave__top {
    top: 87px;
    left: -2px;
  }

  .content_badge {
    padding-left: 62px;
  }

  .tab_body__wrapper_res .content_right {
    transform: translateX(60px);
  }

  .content_result_block {
    transform: translateX(0);
    padding-top: 108px;
  }

  .result_sign_message {
    position: absolute;
    top: 0;
    left: 0;
    width: 120%;

    .inner {
      max-width: 497px;
    }
  }

  .result_social__item .item_icon {
    width: 74px;
    margin-right: 70px;
  }

  .btn2 {
    padding: 18px 42px;
  }
}

@media (max-width: 1100px) {
  .content_right {
    display: flex;
    align-items: flex-end;
  }

  .content_main_image._res {
    width: 287px;
  }

  .content_result_block .content_wave__bot {
    position: static;
    transform: translateY(0);
    padding-left: 144px;
  }

  .content_result_block {
    padding-bottom: 23px;
  }

  .result_social {
    margin-bottom: 25px;
  }
}

@media (max-width: 1023px) {
  aside.aside {
    max-width: 324px;
    left: -324px;
  }

  aside.aside._active {
    left: 0;
    width: 324px;
  }

  .mob_menu_btn {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 100%;
    background: $green2;
    cursor: pointer;
    @include animation_0_25;
  }

  .content {
    padding: 40px 0 0 calc(70px + 40px);
  }

  .content_header {
    align-items: center;
    justify-content: space-between;
  }

  .header_left {
    display: flex;
    width: 200px;

    img {
      max-width: 100%;
    }
  }

  .aside_close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 10px;
    right: 10px;

    img {
      max-width: 100%;
    }
  }
}

@media (max-width: 920px) {
  .btn {
    //padding: 23px 71px;
    padding: 27px 30px;
  }

  .btn2 {
    padding: 18px 42px;
  }

  .content_title {
    font-size: 30px;
    margin: 36px 0 25px;
  }

  .content_subtitle {
    font-size: 18px;
    margin-bottom: 25px;
  }

  .content_btn_container {
    margin-bottom: 25px;
  }

  .content_main_image {
    width: 350px;
  }

  .content_wave__top {
    top: 50px;
  }

  .content_left {
    max-width: 345px;
  }
}

@media (max-width: 860px) {
  .content_right {
    margin-left: 0;
  }
  .content_main_image {
    width: 340px;
  }

  .content_wave__top {
    left: -29px;
  }
}

@media (max-width: 720px) {
  .content_left {
    min-width: auto;
    max-width: 272px;
  }

  .badge_title {
    font-size: 14px;
    min-height: 40px;
  }

  .badge_description {
    font-size: 14px;
  }

  .content_main_image {
    width: 335px;
  }

  .content_note {
    margin-bottom: 30px;
  }

  .content_wave__bot {
    display: none;
  }

  .content_result_block {
    .content_wave__bot {
      display: block;
    }
  }

  .content_subtitle._res {
    font-size: 16px;
  }
}

@media (max-width: 680px) {
  .content_main_image._res {
    width: 249px;
  }
}

@media (max-width: 639px) {
  .mob_menu_btn {
    width: 60px;
    height: 70px;
  }

  .tab_btn {
    font-size: 14px;
  }

  .content {
    padding: 18px 0 0 23px;
  }

  .content_header {
    padding-left: 62px;
  }

  .header_left {
    width: 165px;
  }

  .header_phone__number {
    font-size: 14px;
  }

  .header_phone__icon {
    width: 15px;

    img {
      max-width: 100%;
    }
  }

  .content_title {
    font-size: 25px;
  }

  .content_subtitle {
    font-size: 16px;
  }

  .btn {
    font-size: 14px;
  }

  .content_note {
    font-size: 14px;
    padding-left: 10px;
  }

  .badge_title {
    font-size: 12px;
    min-height: 35px;
    padding: 12px 29px;
  }

  .badge_description {
    font-size: 12px;
  }

  .content_badge {
    padding-left: 40px;
  }

  .content_header {
    margin-bottom: 18px;
  }

  .content_wave__top {
    img {
      height: 100px;
    }
  }

  .content_subtitle._res {
    font-size: 14px;
  }
}

@media (max-width: 560px) {
  main.main {
    padding-right: 15px;
  }
  .content_main_image {
    width: 295px;
  }

  .btn {
    padding: 23px 58px;
  }

  .btn2 {
    padding: 18px 42px;
  }

  .aside_logo {
    margin: 0 auto 45px;
  }
}

@media (max-width: 520px) {
  .content_main_image {
    width: 288px;
  }

  .content_right {
    margin-left: -20px;
  }
}

@media (max-width: 479px) {
  main.main {
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0;
  }

  .btn2 {
    padding: 12px 24px;
  }

  .content {
    padding: 18px 0 0 0;
  }

  .tab_body__wrapper,
  .tab_body__wrapper_res {
    flex-direction: column;
    align-items: center;
    //padding-left: 7px;
  }

  .res__left {
    flex-direction: column;
    align-items: center;
  }

  .content_header {
    flex-direction: column;
    align-items: center;
    padding-top: 7px;
    margin-bottom: 11px;
    padding-left: 0;
  }

  .header_left {
    margin-bottom: 10px;
  }

  .mob_menu_btn {
    position: absolute;
    height: 106px;
  }

  .content_title {
    font-size: 20px;
    padding-left: 58px;
    margin: 16px 0 10px;
  }

  .content_subtitle {
    font-size: 14px;
    margin-bottom: 0;
  }

  .content_wave__mob {
    display: block;
    top: 29px;
    left: -52px;

    img {
      height: 76px;
    }
  }

  .content_left {
    margin-bottom: 18px;

    .content_btn_container,
    .content_note,
    .content_badge {
      display: none;
    }
  }

  .content_right {
    display: none;
  }

  .tab_body__wrapper_res {
    .content_right__mob {
      margin-bottom: 30px;
    }
  }

  .content_result_block {
    padding: 0 0 25px 23px;

    .content_wave__bot {
      padding-left: 113px;
    }

    .content_wave__bot img {
      height: 99px;
    }
  }

  .content_main_image._res {
    width: 288px;
  }

  .result_sign_message {
    position: static;
    width: 100%;
  }

  .result_message {
    padding-right: 23px;
  }

  .result_social__item {
    padding-right: 23px;
    margin-bottom: 18px;

    .item_icon {
      width: 56px;
      margin-right: 55px;
    }
  }

  .result_sign_message {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .content_right__mob {
    display: block;
    position: relative;
    margin-bottom: 60px;
  }

  .content_wave__mob_bot {
    position: absolute;
    top: 70px;
    left: 0;
  }

  .content_right__mob_wrapper {
    position: relative;
    margin-bottom: 60px;
  }

  .content_main_image {
    height: 490px;
    overflow: hidden;
  }

  .content_btn_container {
    margin: 0;
  }

  .content_btn {
    width: 100%;
    min-height: 70px;
  }

  .content_badge__mob {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 193px;
    text-align: center;
    line-height: 1;
    padding: 10px 18px;
    border-radius: 10px;
    background: rgba(228, 243, 242, 0.70);
    backdrop-filter: blur(5px);
    margin: 0 auto 10px;
  }

  .badge_title__mob {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 3px;
  }

  .badge_description__mob {
    font-size: 11px;
    font-weight: 400;

    br {
      display: none;
    }
  }

  .content_right__mob_inner {
    position: absolute;
    bottom: -35px;
    left: 0;
    margin: 0;
    width: 100%;
  }

  .content_note_container {
    display: flex;
    justify-content: center;
  }

  .content_note {
    font-size: 14px;
    margin-bottom: 0;
  }

  .result_message {
    font-size: 14px;
    margin-bottom: 40px;
  }
}