@import url('loader.css');
:root {
  --bgcolor: #edeef2;
  --greenColor: #8fc740;
  --blueApp: #384f78;
  --lightBlue: #58c1ee;
  --white: #ffffff;
  --darkGray: #6E6D6D;
  --silverGray: #c0c0c0;
  --footer_bg: #dfe3f1;
  --modal_bg: #edeef2;
  --otp-digits: 5;
  --otc-ls: 6ch;
  --otc-gap: 1;
  --_otp-bgsz: calc(var(--otc-ls) + 1ch);
  --bs-green: #8fc740 !important;
}

.takanon ol {
    font-size: 1.75rem;
    font-weight: bold;
}

body {
  background-color: var(--bgcolor);
}
.btn-outline-success {
  color: var(--greenColor);
  border-color: var(--greenColor);
}
.btn-outline-success:hover {
  background-color: var(--greenColor);
  border-color: var(--greenColor);
}
.btn-check:active + .btn-outline-success, .btn-check:checked + .btn-outline-success, .btn-outline-success.active, .btn-outline-success.dropdown-toggle.show, .btn-outline-success:active {
  background-color: var(--greenColor);
  border-color: var(--greenColor);
}
.btn-outline-secondary {
  font-weight: 600;
  color: var(--blueApp);
  border-color: var(--darkGray);
}
.btn-outline-secondary:hover {
  background-color: var(--darkGray);
  border-color: var(--darkGray);
}
.btn-check:active + .btn-outline-secondary, .btn-check:checked + .btn-outline-secondary, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show, .btn-outline-secondary:active {
  background-color: var(--darkGray);
  border-color: var(--darkGray);
}
.btn-silver {
  background-color: var(--silverGray) !important;
}
.bg-white {
  background-color: #fff;
}
.stretched-link {
  color: inherit;
  text-decoration: none;
}
.nav.fixed-top {
  background-image: linear-gradient(var(--bgcolor), #edeef2cc, #edeef299);
  padding: 0;
}
.brnodisplay {
  display: none;
}
.faq-q img {
  transform: rotate(45deg);
  transition: all .5s;
}
.faq-q.collapsed img {
  transform: rotate(0deg);
}
.nav_container {
  width: 100%;
  max-width: 1600px;
  white-space: nowrap;
}
.rounded-5 {
  border-radius: 1.5rem !important;
}
.modal-dialog {
  max-width: 688px;
}
.modal-content {
  border-radius: 20px;
  background-color: var(--modal_bg);
  color: var(--blueApp);
}
.modal-content h2 {
  color: var(--blueApp);
  font-size: 35px;
  line-height: 35px;
  font-weight: 500;
}
.modal-content label {
  color: var(--blueApp);
  font-size: 22px;
  line-height: normal;
  font-weight: 500;
}
nav {
  /*background-color: var(--bgcolor);*/
  font-size: 21px;
  font-family: "Rubik";
  font-weight: 400;
}
.navbar-collapse {
  /*background-color: var(--bgcolor);*/
}
.dropdown-menu {
  background-color: var(--bgcolor);
  direction: rtl;
  text-align: start;
}
.dropdown-toggle::after {
  margin-right: .255em;
}
.nav-link {
  /*background-color: var(--bgcolor);*/
  color: var(--blueApp);
  font-size: 21px;
  font-family: "Rubik";
  font-weight: 400;
}
.nav-link.active {
  color: var(--greenColor);
}
.carousel-caption {
  top: 5%;
  bottom: auto;
}
.img_logo_nav {
  width: 164px;
  height: 84px;
}
.lang_in_nav_text {
  font-size: 19px;
  font-family: "Rubik";
  font-weight: 400;
  color: var(--blueApp);
}
.lang_in_nav {
  font-size: 19px;
  font-family: "Rubik";
  font-weight: 400;
  color: var(--blueApp);
  margin-right: 20px;
}
.main_div_home {
  margin-top: 118px;
}
#voucher-slider .carousel-control-next, #voucher-slider .carousel-control-prev {
  align-items: flex-start;
  width: 3%;
  min-width: 32px;
  top: 200px;
}
#voucher-slider .carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
#voucher-slider .carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
#voucher-slider .carousel-item {
  min-height: 410px;
}
#voucher-slider .carousel-item .dream_card_tilte {
  min-height: 85px;
}
.equal-height-survey-cards{
    height: 120px;
}
.survey-points{
    display: block;
    font-size: 180%;
    white-space: nowrap;
}
.main_image {
  position: relative;
  text-align: center;
}
.main_image .main_btn_image {
  position: absolute;
  top: 30.35%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.main_image .title_text_on_image {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.main_image .second_title_text_on_image {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* Carousel */
.carousel-inner {
  position: relative;
}
.carousel-inner .main_btn_carousel {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -200%);
}
.carousel-inner .title_text_on_carousel {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -350%);
}
.carousel-inner .second_title_text_on_carousel {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -300%);
}
/* End of Carousel */
.main_image .title_text_on_image_reco {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.main_image .second_title_text_on_image_reco {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.main_image .main_btn_image_reco {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.title_text_on_image, .title_text_on_carousel, .title_text_on_image_reco {
  color: var(--white);
  font-size: 50px;
  font-family: "Rubik";
  font-weight: 600;
}
.second_title_text_on_image, .second_title_text_on_carousel, .second_title_text_on_image_reco {
  color: var(--white);
  font-size: 41px;
  font-family: "Rubik";
  font-weight: 600;
}
.carousel-caption h4 {
  font-size: 50px;
  font-family: "Rubik";
  font-weight: 500;
}
.carousel-caption h5 {
  font-size: 41px;
  font-family: "Rubik";
  font-weight: 500;
}
.main_btn_image, .main_btn_image_reco, .main_btn_carousel {
  text-align: center;
  font-family: "Rubik";
  font-weight: 500;
  font-size: 25px;
  border-radius: 50px;
  background-color: var(--greenColor);
  color: var(--blueApp);
  border: none;
  padding: 10px 20px;
}
.firstp {
  color: var(--blueApp);
  font-size: 26px;
  font-family: "Rubik";
  font-weight: 500;
  margin-top: 50px;
}
.how_it_works_text {
  color: var(--blueApp);
  font-size: 35px;
  font-family: "Rubik";
  font-weight: 600;
  margin-top: 80px;
}
label, .txt {
  color: var(--blueApp);
  font-size: 19px;
  font-family: "Rubik";
  font-weight: 300;
}
form-check-label {
  color: var(--blueApp);
  font-size: 17px;
  font-family: "Rubik";
  font-weight: 300;
}
form-check-input {
  direction: rtl;
  text-align: right;
}
.txt_medium {
  color: var(--blueApp);
  font-size: 19px;
  font-family: "Rubik";
  font-weight: 500;
}
input::-webkit-input-placeholder {
  font-weight: 300;
}
select:invalid, select option[value=""] {
  font-weight: 300;
  color: #747d84 !important;
}
textarea::-webkit-input-placeholder {
  color: var(--blueApp);
  font-size: 17px;
  font-family: "Rubik";
  font-weight: 300;
}
.delete-account {
  pointer-events: none;
  opacity: 50%;
}
.delete-account.shown {
  pointer-events: auto;
  opacity: 100%;
}
.date-picker {
  position: relative;
  width: 100%;
  height: 48px;
  color: red;
}
.date-picker:before {
  position: absolute;
  top: 3px;
  left: 3px;
  content: attr(data-date);
  display: inline-block;
  color: black;
}
.date-picker::-webkit-datetime-edit, input::-webkit-inner-spin-button, input::-webkit-clear-button {
  display: none;
}
.date-picker::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 3px;
  left: 0;
  color: black;
  opacity: 1;
}
.placeholder_txt {
  color: var(--blueApp);
  font-size: 17px;
  font-family: "Rubik";
  font-weight: 300;
}
.txt_bold {
  color: var(--blueApp);
  font-size: 19px;
  font-family: "Rubik";
  font-weight: 600;
}
.txt_title {
  color: var(--blueApp);
  font-size: 19px;
  font-family: "Rubik";
  font-weight: 500;
  vertical-align: middle;
}
.txt_under_icon {
  color: var(--blueApp);
  font-size: 22px;
  font-family: "Rubik";
  font-weight: 600;
  margin-top: 20px;
}
hr {
  display: block;
  border: 0;
  border-top: 2px solid #000000;
  padding: 0;
}
.vl {
  border-left: 2px solid #afafaf;
  height: 50px;
}
.vl_hazmanat_tavim {
  border-left: 1px solid #afafaf;
  height: 100px;
}
.dream_card_tilte {
  color: var(--blueApp);
  font-size: 28px;
  font-family: "Rubik";
  font-weight: 600;
  text-align: right;
  margin-bottom: 20px;
}
.dcard_text {
  color: var(--blueApp);
  font-size: 19px;
  font-family: "Rubik";
  font-weight: 300;
  text-align: right;
}
.more_info_button {
  color: var(--blueApp);
  font-size: 22px;
  font-family: "Rubik";
  font-weight: 500;
  text-align: center;
  background-color: var(--bgcolor);
  border: 1px solid var(--greenColor);
  border-radius: 20px;
  padding: 5px;
  width: 191px;
  margin-top: 20px;
}
.txt_demands {
  color: var(--blueApp);
  font-size: 26px;
  font-family: "Rubik";
  font-weight: 600;
  text-align: center;
}
.icon_txt_square_container {
  background-color: #ffffff;
  border-radius: 20px;
}
html[data-template="faq"] .icon_txt_square_container {
  border: 3px solid transparent;
}
html[data-template="faq"] .icon_txt_square_container[aria-expanded="true"] {
  border: 3px solid var(--greenColor);
}
.white_text {
  color: var(--white);
}
.five_stars {
  display: flex;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.checkedstar {
  color: orange;
}
.recomend_item {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 20px;
  padding: 20px;
  margin: 20px;
  min-width: 320px;
}
.recom_item_title {
  color: var(--blueApp);
  font-size: 22px;
  font-family: "Rubik";
  font-weight: 500;
}
.recom_item_second_title {
  color: var(--blueApp);
  font-size: 19px;
  font-family: "Rubik";
  font-weight: 400;
  height: 60px;
  overflow: hidden;
}
.text_in_reco_item {
  color: var(--blueApp);
  font-size: 19px;
  font-family: "Rubik";
  font-weight: 300;
  height: 60px;
  overflow: hidden;
}
.disction_btn {
  font-size: 21px;
  font-weight: 500;
  color: var(--blueApp);
  background-color: var(--greenColor);
  border-radius: 30px;
  border: none;
  padding: 10px 20px;
  margin-top: 10px;
  margin-bottom: 20px;
}
.card_item_info_title {
  color: var(--blueApp);
  font-size: 22px;
  font-family: "Rubik";
  font-weight: 600;
}
.card_item_info_txt {
  color: var(--blueApp);
  font-size: 19px;
  font-family: "Rubik";
  font-weight: 300;
}
.right_side_companies_names {
  display: flex;
  flex-direction: column;
}
.two_sides_companies {
  display: flex;
  justify-content: space-between;
}
.next_btn {
  font-size: 20px;
  font-weight: 700;
  color: var(--blueApp);
  background-color: var(--greenColor);
  border-radius: 20px;
  border: none;
  padding: 5px;
  margin-top: 10px;
  margin-bottom: 20px;
  width: 150px;
}
.login_nav_btn {
  border: 1px solid var(--greenColor);
  font-size: 21px;
  font-weight: 500;
  color: var(--blueApp);
  background-color: var(--greenColor);
  border-radius: 20px;
  padding: 10px 20px;
}
table {
  text-align: center;
}
.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #ffffff;
  color: var(--blueApp);
}
.table-striped > tbody > tr:nth-child(even) > td, .table-striped > tbody > tr:nth-child(even) > th {
  background-color: F5F6F7;
  color: var(--blueApp);
}
td, .txt_servey_table {
  color: var(--blueApp);
  font-size: 20px;
  font-family: "Rubik";
  font-weight: 400;
  vertical-align: middle;
}
.table-striped > thead > tr > th {
  background-color: var(--blueApp);
  color: #ffffff;
  font-size: 20px;
  font-family: "Rubik";
  font-weight: 400;
  vertical-align: middle;
}
.two_butons {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
.left_button {
  border-radius: 20px 0px 0px 20px;
  background-color: #ffffff;
  color: var(--blueApp);
  font-size: 22px;
  font-weight: 500;
  text-align: center;
  flex: 1;
  margin: 2px;
  border: none;
  padding-top: 15px;
  padding-bottom: 15px;
}
.left_button_completed, .left_button.active {
  border-radius: 20px 0px 0px 20px;
  background-color: var(--greenColor);
  color: var(--blueApp);
  font-size: 22px;
  font-weight: 500;
  text-align: center;
  flex: 1;
  margin: 2px;
  border: none;
}
.right_button_completed, .right_button {
  border-radius: 0px 20px 20px 0px;
  background-color: white;
  color: var(--blueApp);
  font-size: 22px;
  font-weight: 500;
  text-align: center;
  flex: 1;
  margin: 2px;
  border: none;
  padding-top: 15px;
  padding-bottom: 15px;
}
.right_button.active {
  border-radius: 0px 20px 20px 0px;
  background-color: var(--greenColor);
  color: var(--blueApp);
  font-size: 22px;
  font-weight: 500;
  text-align: center;
  flex: 1;
  margin: 2px;
  border: none;
}
.romove_bullets {
  list-style-type: none;
}
.modal_title {
  color: var(--blueApp);
  font-size: 22px;
  font-family: "Rubik";
  font-weight: 600;
  margin-top: 30px;
}
.modal_title_big {
  color: var(--blueApp);
  font-size: 38px;
  font-family: "Rubik";
  font-weight: 600;
  margin-top: 30px;
}
.modal_txt {
  color: var(--blueApp);
  font-size: 19px;
  font-family: "Rubik";
  font-weight: 300;
}
.modal_label {
  height: 34px;
  border: 1px solid #ccc;
  border-radius: 50px;
  text-align: center;
  margin-top: 10px;
  align-items: center;
}
.modal_btn {
  font-size: 18px;
  font-weight: 600;
  color: var(--blueApp);
  background-color: var(--greenColor);
  border-radius: 20px;
  border: none;
  padding: 5px;
  margin-top: 10px;
  margin-bottom: 20px;
  width: 150px;
}
/*
.modal.custom .modal-dialog {
  width: 356px;
  margin: 0 auto;
  background-color: var(--bgcolor);
  border-radius: 50px;
}
*/
.moda_header_tavim {
  background-color: var(--bgcolor);
  border-radius: 40px;
}
.modal_tavim {
  max-width: 596px;
  margin: 0 auto;
  background-color: var(--bgcolor);
  /*border-radius: 40px;*/
}
.modal_txt_tavim {
  color: var(--blueApp);
  font-size: 19px;
  font-family: "Rubik";
  font-weight: 400;
  margin-top: 10px;
}
.modal_txt_tavim_big {
  color: var(--blueApp);
  font-size: 22px;
  font-family: "Rubik";
  font-weight: 500;
  margin-top: 10px;
}
.icon_near_txt {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #ffffff;
  border-radius: 25px;
  height: 100%;
  padding: 10px;
  border: 3px solid transparent;
  box-shadow: 3px 3px 3px silver;
}
.icon_near_txt.active {
  border: 3px solid #8fc740;
}
.txt_near_icon {
  color: var(--blueApp);
  font-size: 22px;
  font-family: "Rubik";
  font-weight: 600;
  margin-right: 2px;
  justify-content: center;
  align-self: center;
  align-content: center;
}
.txt_under_txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
  align-content: center;
}
.txt_under_txt p {
  margin: 0;
}
.new-order-icons .icon_image1 {
  background-color: #fff;
  border-radius: 40px;
}
.points_number {
  color: var(--blueApp);
  font-size: 40px;
  font-family: "Rubik";
  font-weight: 500;
}
.points_number_hide {
  color: white;
  font-size: 40px;
  font-family: "Rubik";
  font-weight: 500;
}
.icon_points_image {
  border-radius: 50;
  width: 112px;
  height: 112px;
}
.hide_this_white {
  background-color: white;
}
.text_in_table_cell {
  color: var(--blueApp);
  font-size: 20px;
  font-family: "Rubik";
  font-weight: 700;
}
.status_of_tavim_btn {
  font-size: 20px;
  font-weight: 700;
  color: var(--blueApp);
  background-color: var(--greenColor);
  border-radius: 20px;
  border: none;
  padding: 5px;
  margin-top: 10px;
  font-family: "Rubik";
  margin-bottom: 20px;
}
.tavim_icon_text_container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 10%;
}
.line {
  border: 1px solid #afafaf;
  margin: 0 2%;
  flex: 1 0;
}
.select_tav_card_btn {
  font-size: 20px;
  font-weight: 700;
  color: var(--blueApp);
  background-color: var(--bgcolor);
  border-radius: 20px;
  padding: 5px;
  font-family: "Rubik";
  /*text-align: right;*/
  border: 1px solid var(--blueApp);
}
.select_tav_card_txt {
  font-size: 22px;
  font-weight: 700;
  color: var(--blueApp);
  text-align: center;
}
.button_and_icon {
  display: flex;
  align-items: center;
  justify-content: space-around;
  vertical-align: middle;
  margin-top: 10px;
}
.select-container {
  border: none;
  appearance: none;
  width: 80px;
  color: white;
  background-color: var(--blueApp);
  font-size: 20px;
  font-family: "Rubik";
}
.select-container .icon-container {
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  color: black;
}
.icon-container {
  font-size: 30;
  color: white;
}
.checkbox_tav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.label_small_txt {
  font-size: 17px;
  font-weight: 300;
  color: var(--blueApp);
  text-align: right;
}
.icon22 {
  padding-left: -15px;
  margin-left: 5px;
  background: url("../images/upload_file_icon.png") no-repeat left;
  background-size: 18px;
  background-color: white;
}
.icon22::placeholder {
  color: #515252;
  font-size: 17px;
  font-weight: 300;
  text-align: right;
}
.input_tav::placeholder {
  color: #515252;
  font-size: 17px;
  font-weight: 300;
  text-align: right;
}
.tav_checkbox {
  border: 1px solid var(--blueApp);
}
.div_footer {
  background-color: var(--footer_bg);
}
.footer_item_txt {
  font-size: 18px;
  color: #000000;
  font-family: "Rubik";
  font-weight: 400;
}
.footer_copyright {
  font-size: 18px;
  color: #000000;
  font-family: "Rubik";
  font-weight: 400;
}
.footer_elements {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}
ul.navbar-nav {
  justify-content: space-between;
}
ul {
  list-style-type: none;
}
a.footer_item_txt {
  text-decoration: none;
  text-align: center;
}
.face_img {
  width: 25px;
  height: 25px;
}
.update_details_field input::placeholder {
  color: #515252;
  font-size: 17px;
  font-family: "Rubik";
  font-weight: 300;
}
.update_details_field select {
  color: #515252;
  font-size: 17px;
  font-family: "Rubik";
  font-weight: 300;
}
.form-1000 {
  max-width: 1000px;
  margin: auto;
}
input#copyinput:focus {
  outline: none !important;
}
img#copyicon {
  position: absolute;
}
#label-for-file {
  cursor: pointer;
  overflow-y: hidden;
  height: 48px;
}
.new-order-file {
  width: 1px;
  height: 1px;
  position: absolute;
  bottom: 24px;
  right: 50%;
}
.red {
  color: #ff0000;
}
.carousel-item {
  max-height: 330px;
}
[data-template="home"] .carousel-item {
  max-height:600px;/*852px;*/
}
.transfer-click {
  cursor: pointer;
}
.flatpickr-YearDropdown {
  appearance: menulist;
  background: transparent;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  height: auto;
  line-height: inherit;
  margin: -1px 0 0 0;
  outline: none;
  padding: 0 0 0 .5ch;
  position: relative;
  vertical-align: initial;
  -webkit-box-sizing: border-box;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  width: auto;
}
.flatpickr-YearDropdown:focus, .flatpickr-YearDropdown:active {
  outline: none;
}
.flatpickr-YearDropdown:hover {
  background: rgba(0, 0, 0, 0.05);
}
.fa-calendar {
  position: absolute;
  top: 15px;
  left: 33px;
  cursor: pointer;
}
  .new-order-form .form-control {
    display: inline-block;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
    width: 300px;
  }
  .new-order-form .backnext_btn {
    font-size: 21px;
    margin: auto;
    font-weight: 500 !important;
    padding: 10px 20px;
    line-height: normal;
  }
  .new-order-form .backnext_btn:hover span {
    color: #ffffff;
  }
  .new-order-form .backnext_btn {
    width: 140px !important;
  }
  .new-order-form .backnext_btn.login_nav_btn {
    border: 1px solid var(--greenColor) !important;
  }
  .new-order-form .backnext_btn span {
    display: block;
  }
  .new-order-form .form-switch {
    padding: 0;
    text-align: justify;
  }



@media (min-width: 768px) {
  .offset-md-3 {
    margin-right: 25% !important;
  }
}
@media screen and (min-width: 1000px) and (max-width: 1200px) {
  .nav-link {
    background-color: var(--bgcolor);
    color: #515252;
    font-size: 17px;
    font-family: "Rubik";
    font-weight: 400;
  }
  .main_image .main_btn_image {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .main_image .title_text_on_image {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .main_image .second_title_text_on_image {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .title_text_on_image, .title_text_on_carousel {
    color: var(--white);
    font-size: 42px;
    font-family: "Rubik";
    font-weight: 600;
  }
  .second_title_text_on_image, .second_title_text_on_carousel {
    color: var(--white);
    font-size: 37px;
    font-family: "Rubik";
    font-weight: 600;
  }
  .main_btn_image, .main_btn_carousel {
    text-align: center;
    font-family: "Rubik";
    font-weight: 500;
    font-size: 28px;
    border-radius: 50px;
    padding: 10px;
    background-color: var(--greenColor);
    color: var(--blueApp);
    border: none;
  }
  /* recommendation image */
  .main_image .main_btn_image_reco {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .main_image .title_text_on_image_reco {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .main_image .second_title_text_on_image_reco {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .title_text_on_image_reco {
    color: var(--white);
    font-size: 30px;
    font-family: "Rubik";
    font-weight: 600;
    text-align: center;
    line-height: 90%;
  }
  .second_title_text_on_image_reco {
    color: var(--white);
    font-size: 28px;
    font-family: "Rubik";
    font-weight: 600;
    text-align: center;
    line-height: 90%;
  }
  .main_btn_image_reco {
    text-align: center;
    font-family: "Rubik";
    font-weight: 500;
    font-size: 25px;
    border-radius: 20px;
    padding: 5px;
    background-color: var(--greenColor);
    color: var(--blueApp);
    border: none;
  }
  /* end of recommendation */
  .login_nav_btn {
    font-size: 18px;
    font-weight: 700;
    color: var(--blueApp);
    background-color: var(--greenColor);
    border-radius: 20px;
    border: none;
    padding: 5px;
    margin-top: 10px;
    margin: 5px;
    width: 140px;
    height: 43px;
  }
  .img_logo_nav {
    width: 132px;
    height: 68px;
  }
  h3[for="delete-account"] {
    margin-top: -5px;
  }
}
@media (max-width: 992px) {
  .carousel-caption {
    top: 3%;
  }
  .carousel-caption h4 {
    font-size: 23px;
  }
  .carousel-caption h5 {
    font-size: 20px;
  }
  .carousel-caption .main_btn_image {
    width: 100%;
  }
  .navbar-collapse {
    background-color: var(--bgcolor);
    margin-left: -15px;
    margin-right: -15px;
  }
  .txt_under_icon {
    color: var(--blueApp);
    font-size: 18px;
    font-family: "Rubik";
    font-weight: 600;
    margin-top: 20px;
  }
  .nav-link {
    background-color: var(--bgcolor);
    color: var(--blueApp);
    font-size: 17px;
    font-family: "Rubik";
    font-weight: 400;
  }
  .lang_in_nav_text {
    /*background-color: var(--bgcolor);*/
    color: var(--blueApp);
    font-size: 17px;
    font-family: "Rubik";
    font-weight: 400;
  }
  .login_nav_btn {
    font-size: 18px;
    font-weight: 700;
    color: var(--blueApp);
    background-color: var(--greenColor);
    border-radius: 20px;
    border: none;
    padding: 5px;
    margin-top: 10px;
    margin: 5px;
    width: 140px;
    height: 43px;
  }
  /* recommendation image */
  .main_image .main_btn_image_reco {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .main_image .title_text_on_image_reco {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .main_image .second_title_text_on_image_reco {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .title_text_on_image_reco {
    color: var(--white);
    font-size: 25px;
    font-family: "Rubik";
    font-weight: 600;
    text-align: center;
    line-height: 90%;
  }
  .second_title_text_on_image_reco {
    color: var(--white);
    font-size: 22px;
    font-family: "Rubik";
    font-weight: 600;
    text-align: center;
    line-height: 90%;
  }
  .main_btn_image_reco {
    text-align: center;
    font-family: "Rubik";
    font-weight: 500;
    font-size: 17px;
    border-radius: 20px;
    padding: 5px;
    background-color: var(--greenColor);
    color: var(--blueApp);
    border: none;
  }
  /* end of recommendation */
  /* Carousel */
  .carousel-inner {
    position: relative;
  }
  .carousel-inner .main_btn_carousel {
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -150%);
  }
  .carousel-inner .title_text_on_carousel {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -300%);
  }
  .carousel-inner .second_title_text_on_carousel {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -250%);
  }
  /* End of Carousel */
  .main_image .main_btn_image {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .main_image .title_text_on_image {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .main_image .second_title_text_on_image {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .main_image .title_text_on_image_reco {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .main_image .second_title_text_on_image_reco {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .title_text_on_image, .title_text_on_carousel {
    color: var(--white);
    font-size: 35px;
    font-family: "Rubik";
    font-weight: 600;
  }
  .second_title_text_on_image, .second_title_text_on_carousel {
    color: var(--white);
    font-size: 30px;
    font-family: "Rubik";
    font-weight: 600;
  }
  .main_btn_image, .main_btn_carousel {
    text-align: center;
    font-family: "Rubik";
    font-weight: 500;
    font-size: 25px;
    border-radius: 50px;
    padding: 10px;
    background-color: var(--greenColor);
    color: var(--blueApp);
    border: none;
  }
  .moda_header_tavim {
    background-color: var(--bgcolor);
    border-radius: 40px;
  }
  .modal_tavim {
    width: 320px;
    margin: 0 auto;
    background-color: var(--bgcolor);
    border-radius: 40px;
  }
  .modal_txt_tavim {
    color: var(--blueApp);
    font-size: 17px;
    font-family: "Rubik";
    font-weight: 400;
    margin-top: 10px;
  }
  .img_logo_nav {
    width: 132px;
    height: 68px;
  }
}
@media (max-width: 768px) {
  .brnodisplay {
    display: block;
  }
  hr {
    display: block;
    border: 0;
    border-top: 2px solid #515252;
    padding: 0;
  }
  .friend_text {
    text-align: center;
  }
  .mobile_servey_num {
    color: var(--blueApp);
    font-size: 22px;
    font-family: "Rubik";
    font-weight: 600;
  }
  .icon_mobile_table {
    width: 38px;
    height: 38px;
    align-self: center;
    align-items: center;
    text-align: center;
  }
  .mobile_servey_icon_div {
    padding: 5px;
  }
  .mobile_servey_item {
    display: flex;
    background-color: white;
    border-radius: 20px;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    position: relative;
  }
  .mobile_servey_item_tavim_status {
    display: flex;
    background-color: white;
    border-radius: 20px;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
  }
  .mobile_servey_item_points_history {
    display: flex;
    background-color: white;
    border-radius: 20px;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    position: relative;
  }
  .mobile_servey_item_tavim_points {
    display: flex;
    background-color: white;
    border-radius: 20px;
    justify-content: space-around;
    align-items: center;
    margin-top: 10px;
  }
  .in_smal_screens {
    display: flex;
    flex-direction: column;
    justify-content: start;
  }
  .date_mobile_survey {
    display: flex;
    color: var(--blueApp);
    font-size: 17px;
    font-family: "Rubik";
    font-weight: 300;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
  }
  .date_mobile_survey_status_hazmanat_tavim {
    display: flex;
    color: var(--blueApp);
    font-size: 17px;
    font-family: "Rubik";
    font-weight: 300;
    align-self: start;
    align-items: center;
    margin-right: 10px;
    text-align: right;
  }
  .mobile_date_time_icon {
    width: 10px;
    height: 10px;
  }
  .container_date_time_mobile {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
  }
  .container_date_time_mobile_completed {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
  }
  .container_date_time_mobile_tavim_points {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .mobile_points_item {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    margin-right: 20px;
  }
  .mobile_digit_point {
    color: var(--blueApp);
    font-size: 31px;
    font-family: "Rubik";
    font-weight: 400;
    margin-top: 0px;
    max-height: 80%;
  }
  .mobile_digit_point_tavim_points {
    color: var(--blueApp);
    font-size: 28px;
    font-family: "Rubik";
    font-weight: 400;
    margin-top: 0px;
    max-height: 80%;
  }
  .mobile_word_digit {
    color: var(--blueApp);
    font-size: 15px;
    font-family: "Rubik";
    font-weight: 300;
    margin-top: 0px;
  }
  .icon_image1 {
    width: 75px;
    height: 75px;
  }
  .date_time_txt_mobile {
    color: var(--blueApp);
    font-size: 13px;
    font-family: "Rubik";
    font-weight: 400;
  }
  .arrow_image {
    margin-left: 5px;
  }
  .first_item_container {
    border-radius: 0px 15px 15px 0px;
    top: 0;
    bottom: 0;
    margin-left: 10px;
  }
  .div_for_button_in_update {
    text-align: center;
  }
  /* Carousel */
  .carousel-inner {
    position: relative;
  }
  .carousel-inner .main_btn_carousel {
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .carousel-inner .title_text_on_carousel {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -300%);
  }
  .carousel-inner .second_title_text_on_carousel {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -250%);
  }
  /* End of Carousel */
  .lang_in_nav_text {
    font-size: 17px;
    font-family: "Rubik";
    font-weight: 400;
    color: var(--blueApp);
  }
  .lang_in_nav {
    font-size: 17px;
    font-family: "Rubik";
    font-weight: 400;
    color: var(--blueApp);
  }
  .nav-link {
    background-color: var(--bgcolor);
    color: var(--blueApp);
    font-size: 20px;
    font-family: "Rubik";
    font-weight: 400;
  }
  .login_nav_btn {
    font-size: 16px;
    font-weight: 700;
    color: var(--blueApp);
    background-color: var(--greenColor);
    border-radius: 20px;
    border: none;
    padding: 5px;
    margin-top: 10px;
    margin: 5px;
    width: 140px;
    height: 43px;
  }
  .new-order-form .form-control {
    display: inline-block;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
    width: 300px;
  }
  .new-order-form .backnext_btn {
    font-size: 21px;
    margin: auto;
    font-weight: 500 !important;
    padding: 10px 20px;
    line-height: normal;
  }
  .new-order-form .backnext_btn:hover span {
    color: #ffffff;
  }
  .new-order-form .backnext_btn {
    width: 140px !important;
  }
  .new-order-form .backnext_btn.login_nav_btn {
    border: 1px solid var(--greenColor) !important;
  }
  .new-order-form .backnext_btn span {
    display: block;
  }
  .new-order-form .form-switch {
    padding: 0;
    text-align: justify;
  }
  .img_logo_nav {
    width: 90px;
    height: 46px;
    content: url("../images/logo_mobile.png");
  }
  .main_image .main_btn_image {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .main_image .title_text_on_image {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .main_image .second_title_text_on_image {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .title_text_on_image {
    color: var(--white);
    font-size: 16px;
    font-family: "Rubik";
    font-weight: 600;
    text-align: center;
  }
  .second_title_text_on_image {
    color: var(--white);
    font-size: 14px;
    font-family: "Rubik";
    font-weight: 600;
    text-align: center;
  }
  .main_btn_image {
    text-align: center;
    font-family: "Rubik";
    font-weight: 500;
    font-size: 14px;
    border-radius: 20px;
    padding: 5px;
    background-color: var(--greenColor);
    color: var(--blueApp);
    border: none;
    width: 191px;
  }
  .title_text_on_carousel {
    color: var(--white);
    font-size: 16px;
    font-family: "Rubik";
    font-weight: 600;
    text-align: center;
  }
  .second_title_text_on_carousel {
    color: var(--white);
    font-size: 14px;
    font-family: "Rubik";
    font-weight: 600;
    text-align: center;
  }
  .main_btn_carousel {
    text-align: center;
    font-family: "Rubik";
    font-weight: 500;
    font-size: 14px;
    border-radius: 20px;
    padding: 5px;
    background-color: var(--greenColor);
    color: var(--blueApp);
    border: none;
    width: 191px;
  }
  /* end of Carousel */
  /* recommendation image */
  .main_image .main_btn_image_reco {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .main_image .title_text_on_image_reco {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .main_image .second_title_text_on_image_reco {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .title_text_on_image_reco {
    color: var(--white);
    font-size: 24px;
    font-family: "Rubik";
    font-weight: 600;
    text-align: center;
    line-height: 90%;
  }
  .second_title_text_on_image_reco {
    color: var(--white);
    font-size: 22px;
    font-family: "Rubik";
    font-weight: 600;
    text-align: center;
    line-height: 90%;
  }
  .main_btn_image_reco {
    text-align: center;
    font-family: "Rubik";
    font-weight: 500;
    font-size: 20px;
    border-radius: 20px;
    background-color: var(--greenColor);
    color: var(--blueApp);
    border: none;
    padding: 10px;
  }
  /* end of recommendation */
  .two_butons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
  }
  .left_button {
    border-radius: 20px 0px 0px 20px;
    background-color: #ffffff;
    color: var(--blueApp);
    font-size: 22px;
    font-weight: 500;
    text-align: center;
    flex: 1;
    margin: 2px;
    border: none;
    width: 40%;
    height: 72px;
    line-height: 130%;
    padding: 5px 15px;
  }
  .left_button_completed {
    border-radius: 20px 0px 0px 20px;
    background-color: var(--greenColor);
    color: var(--blueApp);
    font-size: 22px;
    font-weight: 500;
    text-align: center;
    flex: 1;
    margin: 2px;
    border: none;
    width: 40%;
    height: 90%;
    line-height: 95%;
    padding: 5px;
  }
  .right_button {
    border-radius: 0px 20px 20px 0px;
    /*background-color: var(--greenColor);*/
    color: var(--blueApp);
    font-size: 22px;
    font-weight: 500;
    text-align: center;
    flex: 1;
    margin: 2px;
    border: none;
    width: 40%;
    height: 72px;
    line-height: 95%;
    padding: 5px;
  }
  .right_button_completed {
    border-radius: 0px 20px 20px 0px;
    background-color: white;
    color: var(--blueApp);
    font-size: 22px;
    font-weight: 500;
    text-align: center;
    flex: 1;
    margin: 2px;
    border: none;
    width: 40%;
    height: 90%;
    line-height: 95%;
    padding: 5px;
  }
  .servey_table_large {
    display: none;
  }
  td, .txt_servey_table {
    color: var(--blueApp);
    font-size: 13px;
    font-family: "Rubik";
    font-weight: 400;
    vertical-align: middle;
  }
  .card td, .card .txt_servey_table {
    font-size: inherit;
  }
  /*
  .bootstrap-table:before {
    content: '';
    width: 150px;
    height: 19px;
    float: left;
    background-image: url('../images/swipe.png?1');
    margin: 10px;
  }
	*/
  .main_div_home {
    margin-top: 75px;
  }
  .navbar-brand img {
    max-width: 22vw;
  }
  .dropdown-menu {
    border: none;
    margin-right: 0px;
    margin-top: -15px !important;
  }
  .table-striped > thead > tr > th {
    background-color: var(--blueApp);
    color: #ffffff;
    font-size: 13px;
    font-family: "Rubik";
    font-weight: 400;
    vertical-align: middle;
  }
  .table-striped > tbody > tr > td > img {
    max-width: 25px;
  }
  .how_it_works_text {
    color: var(--blueApp);
    font-size: 24px;
    font-family: "Rubik";
    font-weight: 600;
    margin-top: 20px;
  }
  .firstp {
    color: var(--blueApp);
    font-size: 17px;
    font-family: "Rubik";
    font-weight: 500;
    margin-top: 40px;
    margin-right: 3px;
    margin-left: 3px;
  }
  .txt {
    color: var(--blueApp);
    font-size: 14px;
    font-family: "Rubik";
    font-weight: 300;
  }
  .txt_bold {
    color: var(--blueApp);
    font-size: 14px;
    font-family: "Rubik";
    font-weight: 600;
  }
  .txt_medium {
    color: var(--blueApp);
    font-size: 14px;
    font-family: "Rubik";
    font-weight: 500;
  }
  .icon_image {
    width: 150px;
    height: 150px;
  }
  .txt_under_icon {
    color: var(--blueApp);
    font-size: 15px;
    font-family: "Rubik";
    font-weight: 600;
    margin-top: 5px;
    margin-bottom: 10px;
    min-height: 44px;
  }
  .icon_table {
    width: 40px;
    height: 40px;
  }
  .icon_table_below {
    width: 25px;
    height: 25px;
    margin: 5px;
  }
  .dream_card_div {
    width: 90%;
    margin: 0 auto;
  }
  .modal_title {
    color: var(--blueApp);
    font-size: 17px;
    font-family: "Rubik";
    font-weight: 600;
    margin-top: 30px;
  }
  .modal_txt {
    color: var(--blueApp);
    font-size: 15px;
    font-family: "Rubik";
    font-weight: 400;
    margin-top: 10px;
  }
  .modal_label {
    height: 28px;
    border: 1px solid #ccc;
    border-radius: 50px;
    text-align: center;
    margin-top: 10px;
    align-items: center;
  }
  .modal_btn {
    font-size: 15px;
    font-weight: 600;
    color: var(--blueApp);
    background-color: var(--greenColor);
    border-radius: 20px;
    border: none;
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 20px;
    width: 150px;
  }
  .modal.custom .modal-dialog {
    width: 250px;
    margin: 0 auto;
    background-color: var(--bgcolor);
    border-radius: 50px;
  }
  .moda_header_tavim {
    background-color: var(--bgcolor);
    border-radius: 40px;
  }
  .modal_tavim {
    width: 280px;
    margin: 0 auto;
    background-color: var(--bgcolor);
    border-radius: 40px;
  }
  .modal_txt_tavim {
    color: var(--blueApp);
    font-size: 15px;
    font-family: "Rubik";
    font-weight: 400;
    margin-top: 10px;
  }
  .modal_txt_tavim_big {
    color: var(--blueApp);
    font-size: 17px;
    font-family: "Rubik";
    font-weight: 500;
    margin-top: 10px;
  }
  .modal_title_big {
    color: var(--blueApp);
    font-size: 25px;
    font-family: "Rubik";
    font-weight: 600;
    margin-top: 30px;
  }
  .footer_item_txt {
    font-size: 14px;
    color: #000000;
    font-family: "Rubik";
    font-weight: 400;
    line-height: normal;
    display: inline-block;
  }
  .footer_copyright {
    font-size: 14px;
    color: #000000;
    font-family: "Rubik";
    font-weight: 400;
  }
  .icon_txt_square_container {
    align-self: center;
    background-color: #ffffff;
    border-radius: 20px;
    width: 25%;
    margin: 5px;
  }
  .q_image {
    max-height: 40px;
  }
  .buying_cards_main_title {
    text-align: center;
  }
  .card_item_info_title {
    margin-top: 10px;
  }
  .contact_us_in input::placeholder {
    font-size: 14px;
    font-family: "Rubik";
    font-weight: 300;
  }
  .contact_us_in textarea::placeholder {
    font-size: 14px;
    font-family: "Rubik";
    font-weight: 300;
  }
  .placeholder_txt {
    color: var(--blueApp);
    font-size: 14px;
    font-family: "Rubik";
    font-weight: 300;
  }
  .next_btn {
    font-size: 18px;
    font-weight: 700;
    color: var(--blueApp);
    background-color: var(--greenColor);
    border-radius: 20px;
    border: none;
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .icon_near_txt {
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-around;
    align-items: center;
    background-color: #ffffff;
    border-radius: 25px;
    height: 100%;
    padding: 10px;
  }
  .icon_points_image {
    border-radius: 50;
    width: 80px;
    height: 80px;
  }
  .points_number {
    color: var(--blueApp);
    font-size: 30px;
    font-family: "Rubik";
    font-weight: 500;
  }
  .points_number_hide {
    color: white;
    font-size: 30px;
    font-family: "Rubik";
    font-weight: 500;
  }
  .txt_near_icon {
    color: var(--blueApp);
    font-size: 18px;
    font-family: "Rubik";
    font-weight: 600;
    margin-right: 2px;
    align-self: center;
    justify-content: center;
    align-content: center;
  }
  .txt_points_tavim_mobile {
    color: var(--blueApp);
    font-size: 15px;
    font-family: "Rubik";
    font-weight: 500;
    margin: 5px;
    text-align: center;
  }
}
@media screen and (min-width: 451px) and (max-width: 600px) {
  /* recommendation image */
  .main_image .main_btn_image_reco {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .main_image .title_text_on_image_reco {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .main_image .second_title_text_on_image_reco {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .title_text_on_image_reco {
    color: var(--white);
    font-size: 20px;
    font-family: "Rubik";
    font-weight: 600;
    text-align: center;
    line-height: 90%;
  }
  .second_title_text_on_image_reco {
    color: var(--white);
    font-size: 18px;
    font-family: "Rubik";
    font-weight: 600;
    text-align: center;
    line-height: 90%;
  }
  .main_btn_image_reco {
    text-align: center;
    font-family: "Rubik";
    font-weight: 500;
    font-size: 14px;
    border-radius: 20px;
    padding: 5px;
    background-color: var(--greenColor);
    color: var(--blueApp);
    border: none;
  }
  /* end of recommendation */
  .buying_cards_main_title {
    text-align: center;
  }
  .card_item_info_title {
    margin-top: 10px;
  }
}
@media (max-width: 450px) {
  /*    
  .home_image {
    content: url("../images/home_mobile.png");
    margin: 0 auto;
  }
  .freq_questions_img {
    content: url("../images/freq_questions_mobile.png");
  }
  .reco_img {
    content: url("../images/reco_mobile.png");
  }
  .buying_cards {
    content: url("../images/buying_cards_mobile.png");
  }
  .one_page_img {
    content: url("../images/one_page_mobile.png");
  }
  .contact_us_img {
    content: url("../images/reco_mobile.png");
  }
  .my_servey1_img {
    content: url("../images/myservey1_mobile.png");
  }
  .history_of_points_img {
    content: url("../images/mobile_history_of_points.png");
  }
  .img_status_hazmanat_tavim {
    content: url("../images/mobile_status_hazmanat_tavim_img.png");
  }
  .hamanat_tavim_img {
    content: url("../images/mobile_hazmanat_tavim_1_image.png");
  }
  .friend_img {
    content: url("../images/mobile_friend_img.png");
  }
  .about_us_img {
    content: url("../images/about_us_mobile.png");
  }
*/
  .qa_div_mobile {
    margin-top: 100px;
  }
  .main_image .main_btn_image {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .main_image .title_text_on_image {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .main_image .second_title_text_on_image {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .main_image .main_btn_image_reco {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .main_image .title_text_on_image_reco {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .main_image .second_title_text_on_image_reco {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .title_text_on_image, .title_text_on_image_reco {
    color: var(--white);
    font-size: 22px;
    font-family: "Rubik";
    font-weight: 600;
    text-align: center;
    line-height: 90%;
  }
  .second_title_text_on_image, .second_title_text_on_image_reco {
    color: var(--white);
    font-size: 20px;
    font-family: "Rubik";
    font-weight: 600;
    text-align: center;
    line-height: 90%;
  }
  .main_btn_image, .main_btn_image_reco {
    text-align: center;
    font-family: "Rubik";
    font-weight: 500;
    font-size: 18px;
    border-radius: 20px;
    padding: 5px;
    background-color: var(--greenColor);
    color: var(--blueApp);
    border: none;
    width: 191px;
  }
  .buying_cards_main_title {
    text-align: center;
  }
  .card_item_info_title {
    margin-top: 10px;
  }
}
@media (min-width: 1200px) {
  .multi-column-count {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 3em;
    -moz-column-gap: 3em;
    column-gap: 3em;
  }
}
/*
@media (min-width: 600px) and (max-width: 1200px) {
  .multi-column-count {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 3em;
    -moz-column-gap: 3em;
    column-gap: 3em;
  }
}

@media (max-width: 600px) {
  .multi-column-count {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    -webkit-column-gap: 3em;
    -moz-column-gap: 3em;
    column-gap: 3em;
  }
}
*/
.otp-input {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0px;
  outline: none !important;
  font-weight: 600;
  text-align: center;
  max-width: 48px;
}
.otp-input:active, .otp-input:focus {
  box-shadow: none !important;
  border-bottom: 2px solid red !important;
  outline: none !important;
}
/* Chrome, Safari, Edge, Opera */
.otp-input::-webkit-outer-spin-button, .otp-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
.otp-input[type=number] {
  -moz-appearance: textfield;
}
#OTP_Div {
  display: grid;
  grid-template-columns: repeat(5, 17%);
  grid-gap: 10px;
  padding: 15px 0%;
  direction: ltr;
  max-width: 300px;
  margin: auto;
}
.one-time-code-holder {
  /*background: linear-gradient(90deg, #8BC34A calc(var(--otc-gap)* var(--otc-ls)), transparent 0) 0 0 / var(--_otp-bgsz) 100%;*/
  margin: auto;
  width: 290px;
  overflow: hidden;
  height: 50px;
  direction: ltr;
}
#otp {
  border: none !important;
  text-align: center;
  outline: none;
  width: 100%;
  height: 50px;
  /*background: transparent;*/
  font-size: 30px;
  line-height: 30px;
  letter-spacing: 30px;
}
/*OTP SINGLE LETTER IN A BOX CHEAT
:where([autocomplete=one-time-code]) {
    --otp-digits: 5;
    --otc-ls: 3.2ch;
    --otc-gap: 1;
    --_otp-bgsz: calc(var(--otc-ls) + 1ch);
    all: unset;
    background: linear-gradient(90deg, #8BC34A calc(var(--otc-gap)* var(--otc-ls)), transparent 0) 0 0 / var(--_otp-bgsz) 100%;
    caret-color: var(--otc-cc, #333);
    clip-path: inset(0% calc(var(--otc-ls) / 1.45) 10% 0%);
    font-family: ui-monospace, monospace !important;
    font-size: var(--otc-fz, 1.8em) !important;
    line-height: normal;
    inline-size: calc(var(--otc-digits)* var(--_otp-bgsz));
    letter-spacing: var(--otc-ls);
    padding-block: var(--otc-pb, 0.4ch);
    padding-inline-start: calc(((var(--otc-ls) - 5ch) / 5)* var(--otc-gap));
    padding-left: 15px;
    border-left: 41px solid #edeef2;
}

@media (max-width: 450px) {

:where([autocomplete=one-time-code]) {
    --otp-digits: 5;
    --otc-ls: 3.2ch;
    --otc-gap: 1;
    --_otp-bgsz: calc(var(--otc-ls) + 1ch);
    all: unset;
    background: linear-gradient(90deg, #8BC34A calc(var(--otc-gap)* var(--otc-ls)), transparent 0) 0 0 / var(--_otp-bgsz) 100%;
    caret-color: var(--otc-cc, #333);
    clip-path: inset(0% calc(var(--otc-ls) / 2.5) 10% 0%);
    font-family: ui-monospace, monospace !important;
    font-size: var(--otc-fz, 1.3em) !important;
    line-height: normal;
    inline-size: calc(var(--otc-digits)* var(--_otp-bgsz));
    letter-spacing: var(--otc-ls);
    padding-block: var(--otc-pb, 0.4ch);
    padding-inline-start: calc(((var(--otc-ls) - 5ch) / 5)* var(--otc-gap));
    padding-left: 14px;
    border-left: 15px solid #edeef2;
}
}
*/
.mobileOnly {
  display: none;
}
.computerOnly {
  display: inline-block;
}
@media (max-width: 768px) {
  .mobileOnly {
    display: inline-block;
  }
  .computerOnly {
    display: none;
  }
  .bootstrap-table .fixed-table-container .table tbody tr .card-view .card-view-value {
    text-align: right !important;
    margin-right: 15px;
  }
  .bootstrap-table .fixed-table-container .table tbody tr .card-view .card-view-value img {
    max-width: 32px;
  }
}
/*didi 21/10/2025*/
@media (max-width: 768px) {

	div#main-slider .carousel-indicators {
		display: none;
	}
	div#main-slider {
		max-height: 160px;
	}

    div#main-slider .qa_div_mobile {
        margin-top: 100px;
       /* max-height: 160px;
        overflow: hidden;*/
    }
	

    div#main-slider .carousel-inner {
        position: relative;
        max-height: 160px;
        overflow: hidden;
    }
	
	div#main-slider .carousel-item {
		max-height: 160px;
	}
	div#main-slider button.carousel-control-prev {
		display: none;
	}
	div#main-slider button.carousel-control-next {
		display: none;
	}
	div#main-slider .carousel-caption {
        top: 0%;
		right:2%;
		left: 2%;
        padding-top: 10px;
    
	}
	div#main-slider .carousel-caption h5 {
        font-size: 18px;
        margin-block-end: 10px !important;
    }
	div#main-slider .carousel-caption h4 {
        font-size: 20px;
        margin-block-end: 2px !important;
    }
	div#main-slider img.d-block {
    display: block !important;
    max-height: 160px;
    overflow: hidden;
	}
	div#main-slider.innerpage .carousel-inner {
        max-height: 110px!important;
    }
}