@font-face {
    font-family: "OpenSans";
    src:
      local("OpenSans"),
      url("OpenSans-VariableFont_wdth,wght.ttf") format("opentype");
}

:root {
  --phoni-background: rgb(239, 248, 250);
  --grey: rgb(156 194 201);
  --dark-blue: rgb(1, 62, 143);
  --dark-blue-07: rgba(1, 62, 143, 0.7);
  --dark-blue-085: rgba(1, 62, 143, 0.85);
  --light-blue: rgb(82, 134, 192);
  --light-blue-07: rgb(82, 134, 192, 0.7);
  --light-blue-05: rgb(82, 134, 192, 0.5);
  --light-blue-01: rgb(82, 134, 192, 0.1);
  --orange: rgb(232, 163, 59);
  --yellow: rgb(255, 255, 0);
  --orange-07: rgba(232, 163, 59, 0.5);
  --orange-05: rgba(232, 163, 59, 0.5);
  --orange-card: rgb(248 234 211);
  --green: rgb(126, 187, 123);
  --green-07: rgba(126, 187, 123, 0.7);
  --green-05: rgba(126, 187, 123, 0.5);
  --card-bg: rgba(1, 62, 143, 0.52);
  --red: rgb(234, 53, 70);
  --red-07: rgba(234, 53, 70, 0.7);
  --red-05: rgba(234, 53, 70, 0.5);
  --phoni-radius: 8px;
  --icon-color: rgb(54, 130, 127);
  --nav-back: rgb(193, 228, 235);
  --nav-back-05: rgba(193, 228, 235, 0.5);
}

.fake-tab {
  margin: 0;
  padding: 0;
  border: none;
}

.ml-05-rem {
  margin-left: 0.5rem !important;
}

.table-responsive {
    padding-top: 4px;
}

.dn {
  display: none;
}

/* Styles pour le rendu html2pdf */
#print-zone {
  font-size: 8px !important;
}

.video_tuto {
  width: 100%;
}

.video_coming_soon {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--phoni-background);
  border-radius: var(--phoni-radius);
  text-align: center;
}

.cookies-floating-button {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  background-color: var(--green);
  color: #FFF;
  padding: 6px 5px 4px 7px;
  border-radius: 50px;
  box-shadow: 2px 2px 3px #999;
  z-index: 99;
}

@media (min-width: 2000px) {
    .container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl {
        max-width: 1744px;
    }
}

.anim-hidden {
  opacity: 0;
  transform: translateY(50px); /* interference with clip-path */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.anim-visible {
  opacity: 1;
  transform: translateY(0); /* interference with clip-path */
}

.anim-alpha-hidden {
  opacity: 0;
}

.anim-alpha-visible {
  opacity: 1;
  animation: fadeIn 1.5s
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1.5s ease-out forwards;
}

.fade-in-hidden {
  opacity: 0;
}

.landing-medium {
  font-size: 17px !important;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*.anim-hidden-left {
  opacity: 0;
  transform: translateX(-100%);
  transition: transform 1s ease-out, opacity 1s ease-out;
}

.anim-hidden-right {
  opacity: 0;
  transform: translateX(100%);
  transition: transform 1s ease-out, opacity 1s ease-out;
}

.anim-hidden-left.visible, .anim-hidden-right.visible {
    opacity: 1;
    transform: translateX(0);
}*/

.intro-text {
  @media screen and (min-device-width: 480px) {
    padding-right: 25px;
  }
  text-align: justify;
}

.mb-40 {
  margin-bottom: 40px;
}

.my-card {
  border-radius: var(--phoni-radius);
  background-color: var(--phoni-background);
  max-width: 400px;
}

.my-card-text-left, .my-card-text-right {
  color: var(--dark-blue);
  padding-left: 70px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 20px;
}
.my-card-text-right {
  padding-left: 20px !important;
  padding-right: 50px !important;
  text-align: right;
}

.number-circle-left, .number-circle-right {
  width: 80px;
  height: 80px;
  border-radius: 40px;
  color: #ffffff;
  position: absolute;
  font-size: 3em;
  margin-left: -20px;
  margin-top: -20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 6px solid var(--phoni-background);
}
.number-circle-right {
  margin-right: -40px !important;
  float: right;
  position: relative;
}


.i_switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 25px;
}

.i_switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.i_slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: lightgrey;
  transition: .4s;
  border-radius: 34px;
}

.i_slider:before {
  position: absolute;
  content: "";
  height: 17px;
  width: 17px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .i_slider {
  background-color: var(--green);
}

input:checked + .i_slider:before {
  transform: translateX(16px);
}

.ul-no-style {
  list-style: none;
}

.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(51,51,51,0.7);
  z-index: 10;
}

.spinner-center {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #ffffff;
}

.spinner-text {
  position: relative;
  top: 56%;
  font-size: 1.2em;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
}


.msg-bubble {
  background-color: var(--light-blue-01);
  border-radius: var(--phoni-radius);
  padding: 4px;
  margin: 4px;
}

.float {
  position: fixed;
  width: 70px;
  height: 70px;
  bottom: 1rem;
  left: 1rem;
  background-color: var(--green);
  color: #FFF;
  padding: 5px;
  border-radius: 50px;
  text-align: center;
  box-shadow: 2px 2px 3px #999;
  z-index: 99;
}

.introjs-dontShowAgain input {
  margin-bottom: -3px !important;
}

.introjs-tooltip {
  min-width: 300px;
}

input[type=checkbox] {
  -webkit-appearance: none;
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 2px solid lightgray;
  margin-right: 10px;
}
input[type=checkbox]:checked {
  background-color: var(--green);
}

.ml-7 {
  margin-left: 7px;
}

.mr-7 {
  margin-right: 7px;
}

.mr-5-p {
  margin-right: 5%;
}

.arrow_icon_up {
  width: 15px;
  transform: rotate(-45deg);
}

.arrow_icon_down {
  width: 15px;
  transform: rotate(45deg);
}

.fs1 {
  font-size: 1rem !important;
}

.introCustomTooltip * {
  font-family: "OpenSans";
}

.btn-primary.show {
  background-color: var(--light-blue-07) !important;
  border-color: var(--light-blue-07) !important;
}

.btn-success.show {
  background-color: var(--green) !important;
  border-color: var(--green) !important;
}

.tooltip-inner {
  text-align: left;
}

.nav-pills {
  --bs-nav-pills-border-radius: 45px !important;
  --bs-nav-pills-link-active-color: var(--dark-blue) !important;
  --bs-nav-pills-link-active-bg: var(--nav-back) !important;
}

.nav-link-phoni {
  background-color: #ffffff !important;
  border-radius: var(--phoni-radius);
  margin-right: 12px;
  font-size: 16px;
  opacity: 50%;
  color: var(--dark-blue);
}

.nav-link-phoni:focus, .nav-link-phoni:hover, .nav-link-phoni.active {
  color: var(--dark-blue) !important;
  opacity: 100%; !important;
}

.jauge {
  height: 100px;
/*  padding: 0px !important;*/
}

.bg-red-green {
  background: linear-gradient(to right, var(--red) 0%, var(--red) 50%, var(--green) 50%, var(--green) 100%) !important;
}

.bg-green-red {
  background: linear-gradient(to right, var(--green) 0%, var(--green) 50%, var(--red) 50%, var(--red) 100%) !important;
}

.bg-green-white {
  background: linear-gradient(to right, var(--green) 0%, var(--green) 50%, #ffffff 50%, #ffffff 100%) !important;
}

.bg-red-white {
  background: linear-gradient(to right, var(--red) 0%, var(--red) 50%, #ffffff 50%, #ffffff 100%) !important;
}

.bg-white-green {
  background: linear-gradient(to right, #ffffff 0%, #ffffff 50%, var(--green) 50%, var(--green) 100%) !important;
}

.bg-white-red {
  background: linear-gradient(to right, #ffffff 0%, #ffffff 50%, var(--red) 50%, var(--red) 100%) !important;
}

.bg-red {
  background-color: var(--red) !important;
}

.bg-dark-blue {
  background-color: var(--dark-blue) !important;
}

.bg-light-blue {
  background-color: var(--light-blue) !important;
}

.bg-green {
  background-color: var(--green) !important;
}

.bg-orange {
  background-color: var(--orange) !important;
}

.white-text {
  color: #ffffff !important;
}

.k-sound-level, .k-sound-level-1, .k-sound-level-2, .k-sound-level-3, .k-sound-level-4, .k-sound-level-mid {
  color: black;
  text-align: center;
/*  font-size: 12px;*/
  border-radius: 50px;
  border: solid;
  border-color: #000000;
  margin: 1px;
  padding: 4px;
  background-color: #ffffff;
  min-width: 50px;
}

.k-sound-level-1 {
  background-color: var(--red) !important;
  color: #ffffff !important;
}

.k-sound-level-2 {
  background-color: var(--orange) !important;
  color: #ffffff !important;
}

.k-sound-level-3 {
  background-color: var(--yellow) !important;
  color: #000000 !important;
}

.k-sound-level-4 {
  background-color: var(--green) !important;
  color: #ffffff !important;
}

.p-zone {
  position: absolute;
  margin-top: 8000px;
  z-index: 999;
}

.no-br {
  border-radius: 0px;
  margin: 0px;
}

.m0 {
  margin: 0;
}

.stripes_select {
  min-width: 120px;
}

#tab_m11 {
  background-image: url('tab_m11.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-size: 100% 800px;
}

#cabine_iframe {
  width: 100%;
  height: 750px;
  border-radius: 15px !important;
}

.ok_back {
/*  background-color: var(--green) !important;*/
}

.ko_back {
/*  background-color: var(--red) !important;*/
}

.clickable-card {
  cursor: pointer;
}

.form-control {
  font-size: 0.85rem !important;
}

.clickable-card:hover {
  box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15)!important;
}

#latest_test_table {
  scroll-behavior: smooth;
}

#user_latest_test_table {
  scroll-behavior: smooth;
}

.btn {
  font-size: 0.85rem;
  border-radius: var(--phoni-radius);
}

.btn-primary:hover {
  color: #fff;
  background-color: var(--light-blue-07) !important;
  border-color: var(--light-blue-07) !important;
}

.btn-primary.focus,.btn-primary:focus {
  color: #fff;
  background-color: var(--light-blue-07) !important;
  border-color: var(--light-blue-07) !important;
  box-shadow: 0 0 0 .2rem rgba(105,136,228,.5)
}

.btn-primary.disabled,.btn-primary:disabled {
  color: #fff;
  background-color: var(--light-blue-07) !important;
  border-color: var(--light-blue-07) !important;
}

.btn-primary:not(:disabled):not(.disabled).active,.btn-primary:not(:disabled):not(.disabled):active,.show>.btn-primary.dropdown-toggle {
  color: #fff;
  background-color: var(--light-blue-07) !important;
  border-color: var(--light-blue-07) !important;
}

.mt2p {
  margin-top: 2px;
}

.dropdown-item {
  font-size: .85rem;
}

.dropdown-item:focus,.dropdown-item:hover {
  color: var(--dark-blue) !important;
  background-color: var(--bs-dropdown-link-hover-bg);
  cursor: pointer;
}

.dropdown-item.active,.dropdown-item:active {
  color: var(--bs-dropdown-link-active-color);
  text-decoration: none;
  background-color: var(--bs-dropdown-link-hover-bg)
}

#account_email {
  @media screen and (max-device-width: 480px) {
    display: none;  
  }
}

#account_icon {
  @media screen and (min-device-width: 480px) {
    display: none;  
  }
}

.input-seuil {
  max-width: 60px;
}

.icon-color {
  color: var(--icon-color);
}

.darkblue {
  color: var(--dark-blue);
}

.b-darkblue {
  color: #ffffff;
  background-color: var(--dark-blue);
}

.lightblue {
  color: var(--light-blue);
}

.green {
  color: var(--green);
}

.white {
  color: #ffffff;
}

.red {
  color: var(--red);
}

.b-green-05 {
  background-color: var(--green-05) !important;
}

.b-green {
  background-color: var(--green) !important;
}

.b-orange {
  background-color: var(--orange) !important;
}

.b-orange-05 {
  background-color: var(--orange-05) !important;
}

.b-light-blue {
  background-color: var(--light-blue) !important;
}

.b-light-blue-05 {
  background-color: var(--light-blue-05) !important;
}

.b-red-05 {
  background-color: var(--red-05) !important;
}

.b-red {
  color: #ffffff;
  background-color: var(--red);
}

.orange {
  color: var(--orange);
}

.profile_pic {
  margin-top: -65px;
  width: 100px;
  border-radius: 75px;
}

.mb-6 {
  margin-bottom: 6rem!important
}

.text-justify {
  text-align: justify !important;
}

.pad-0 {
  padding: 0px;
}

body {
  font-family: OpenSans, Verdana, sans-serif;
  font-size: 0.85rem;
  min-height: 100vh;
}

html {
  min-height: 100vh;
}

#content {
  background-color: var(--phoni-background);
}

.page-link {
  color: var(--light-blue);
  font-size: 0.85rem;
}

.page-link:hover {
  color: var(--dark-blue);
}

.tac {
  text-align: center;
}

.tdb {
/*  color: white;*/
  border-width: 1px;
  border-color: lightgrey;
}

.center {
  margin: auto;
  text-align: center;
  margin: 8px;
}

.no-data-opacity {
  opacity: 80%;
}

.v-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}

.vh-center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.topbar #sidebarToggleTop {
  color: var(--dark-blue);
}

.page-item.active .page-link {
  background-color: var(--light-blue);
  border-color: var(--light-blue);
}

.container-fluid {
  margin-right: 0px;
  background-color: var(--phoni-background);
  min-height: 100vh;
}

/*.container-fluid-toggled {
  margin-left: 6.5rem !important;
  width: calc(100% - 100px);
}*/

.pr-p {
  padding-left: 0px !important;
}

.card {
  border-radius: var(--phoni-radius);
}

.rounded-start {
  border-bottom-left-radius: var(--phoni-radius) !important;
  border-top-left-radius: var(--phoni-radius) !important;
}

.rounded-end {
  border-top-right-radius: var(--phoni-radius) !important;
  border-bottom-right-radius: var(--phoni-radius) !important;
}

.c-pointer {
  cursor: pointer;
}

.page-item {
  cursor: pointer;
  font-size: 0.85rem;
}

.card-body-min-h {
  min-height: 350px;
}

.row-flex {
  display: flex;
  flex-wrap: wrap;
}

.table .thead-light th {
  color: #ffffff;
  background-color: var(--light-blue);
}

.thead-error {
  color: #ffffff;
  background-color: var(--red);
}

.clickable-row:hover {
  cursor: pointer;
  background-color: var(--light-blue-01);
}

.clickable-error-row:hover {
  cursor: pointer;
}

.big-number {
  text-align: center;
  font-size: 4em;
  width: 90%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.sidebar .sidebar-brand {
  font-weight: 400;
  font-size: 0.85rem;
  margin-bottom: 58px;
}

.fixed {
  z-index: 1;
  position: fixed;
  background-color: var(--phoni-background);
}

.f_right {
  float: right;
}

.f_left {
  float: left;
}

.form_inline {
  align-items: center;
  display: inline-flex;
  @media screen and (max-device-width: 480px) and (orientation: portrait) {
    display: grid;  
  }
  gap: 10px;
}

.form_inline_no_grid {
  align-items: center;
  display: inline-flex;
  gap: 10px;
}

#topBar {
  z-index: 1;
  margin-right: 8px;
  margin-top: 0px;
  background-color: var(--phoni-background) !important;
  color: var(--dark-blue);
  padding: 4px;
  display: flex;
  align-items: center;
}

.card-header {
  background-color: #ffffff !important;
  border-radius: var(--phoni-radius) var(--phoni-radius) 0 0 !important;
}

.card-footer {
  background-color: #ffffff !important;
  border-radius: 0 0 var(--phoni-radius) var(--phoni-radius) !important;
}

#topBarRight {
  text-align: right;
}

.ta-r {
  text-align: right;
}

#topBarLeft {
  flex: 1;
  text-align: left;
}

.table td, .table th {
  vertical-align: middle;
}

#phonem_sex_1, #phonem_sex_2, #phonem_specific_sex, #phonem_comprehension_sex {
  min-width:146px;
}

#phonem_1, #phonem_2, #phonem_specific {
  min-width: 60px;
}

.topBar-toggled {
  z-index: 1;
  border-radius: var(--phoni-radius);
  margin: 8px;
  margin-top: 8px;
  margin-left: 120px !important;
  height: 50px !important;
  position: fixed;
  width: calc(100% - 128px) !important;
}

#accordionSidebar {
  /*background-color: var(--dark-blue-085);
  border-radius: var(--phoni-radius);
  margin-top: 8px;
  margin-left: 8px;
  margin-bottom: 8px;*/
/*  height: calc(100vh - 16px);*/
}

#wrapper {
  background-color: var(--phoni-background);
}

.sticky-footer {
  background-color: var(--phoni-background);
}

.mb-p {
  margin-bottom: 12px !important;
}

.sidebar {
  min-height: 10vh;
}

.sidebar .nav-item .nav-link {
  color: var(--dark-blue);
}

.sidebar hr.sidebar-divider {
  color: var(--dark-blue);
}

.pl-20 {
/*  padding-left: 25px !important;*/
}

.w-100 {
  width: 100%;
}

.border-radius-top {
  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
}

.sidebar .nav-item .nav-link {
  padding: 0.2rem 1rem 0.2rem;
  margin-bottom: 15px;
}

.sidebar .sidebar-heading {
  margin-bottom: 15px;
  margin-top: 20px;
}

.navbar-collapse {
  text-align: center;
}
.sidebar .nav-link {
  border-radius: 0 50px 50px 0;
}

.nav-link:hover {
  color: var(--dark-blue);
  background-color: var(--nav-back-05);
}

.nav-link-landing {
  text-decoration: none;
  padding: 0.2rem 1rem 0.2rem;
  color: var(--dark-blue);
}

.nav-link-landing:hover {
  border-radius: 45px;
  background-color: var(--nav-back-05);
}

.nav-tabs .nav-link {
  color: var(--light-blue);
}

.nav-selected {
  font-weight: 700;
  background-color: var(--nav-back);
  border-radius: 0 50px 50px 0;
}

.main-nav .nav-link {
  border: none;
  color: var(--grey);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}

.main-nav .nav-link:hover {
  color: var(--orange);
  background-color: transparent;
}

.main-nav .nav-link.active {
  font-weight: 700;
  color: var(--orange);
  border-bottom: 3px solid var(--orange);
}

.main-nav {
  border-bottom: 1px solid var(--grey);
}

.btn-success {
  background-color: var(--green);
  border: none;
}

.btn-success:hover {
  background-color: var(--green-07);
  transition: 0.7s;
}

.btn-orange {
  color: white;
  background-color: var(--orange);
  border: none;
}

.btn-orange:hover {
  background-color: var(--orange-07);
  transition: 0.7s;
}

.btn-danger {
  background-color: var(--red);
  border: none;
}

.btn-danger:hover {
  background-color: var(--red-07);
  transition: 0.7s;
}

.btn-primary {
  background-color: var(--light-blue);
  border: none;
}

.btn-primary:hover {
  background-color: var(--light-blue-07);
  transition: 0.7s;
}

.sidebar .sidebar-card p {
  color: var(--dark-blue);
}

.sidebar #sidebarToggle {
  background-color: #ffffff;
}

.caret-off::before {
    display: none;
}
.caret-off::after {
    display: none;
}

.text-primary {
  color: var(--dark-blue) !important;
}

.sidebar .sidebar-brand .sidebar-brand-text {
  color: var(--dark-blue) !important;
}

.sidebar .sidebar-card {
  background-color: var(--orange-card);
  color: #ffffff;
  margin-left: 5%;
  margin-right: 5%;
  align-items: normal;
  margin-top: 18px;
}

.sidebar .sidebar-heading {
  font-weight: 400;
  color: var(--grey) !important;
}

.introjs-button, .introjs-nextbutton {
  color: #ffffff !important;
  background: var(--light-blue) !important;
  border-radius: 45px;
  border: none !important;
  font-size: 16px;
  text-decoration: none;
  text-shadow: none;
}

.introjs-button:focus {
  box-shadow: none !important;
}

.introjs-disabled {
  background: var(--light-blue-05) !important;
}

.phoni-button, .phoni-button-light, .contact-form-button {
  color: #ffffff;
  background: var(--light-blue);
  border-radius: 45px;
  border: 0;
  font-size: 16px;
  text-decoration: none;
  padding-right: 3rem!important;
  padding-left: 3rem!important;
  padding-top: 1rem!important;
  padding-bottom: 1rem!important;
}

.phoni-button-light {
  color: var(--dark-blue);
  background: rgba(54, 130, 127, 0.11);
}

.contact-form-button {
  cursor: pointer;
  background: var(--green);
}

.contact-form-button:hover {
  background: var(--green-05);
}

.phoni-button:hover {
  background: var(--light-blue-05);
}

.phoni-button-light:hover {
  background: rgba(54, 130, 127, 0.05);
}

.title-top-left {
  margin-left: 8px;
  font-size: 17px;
  text-align: left;
}

.mt-68 {
  margin-top: 68px;
}

.mt-20 {
  margin-top: 20px;
}

.people-img {
  width: 100%;
}

.phoni-background {
  background-color: var(--phoni-background) !important;
}

.checkboxes-col ul, .checkboxes-col li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.checkboxes-col li {
  display: inline-block;
  width: 15%;
  text-align: left;
  padding: 4px;
}

/* CSS pour ouvrir le dropdown au survol */
.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu {
  margin-top: 0;
}

.dropdown-menu {
  position: absolute;
}

.clip-path-0 {
  @media screen and (min-device-width: 700px) {
    clip-path: ellipse(100% 58% at 50% 58%);
    /*clip-path: ellipse(97% 61% at 57% 62%);*/
  }
}

.clip-path-1 {
  @media screen and (min-device-width: 700px) {
    clip-path: ellipse(100% 50% at 50% 50%);
    /*clip-path: ellipse(93% 50% at 45% 50%);*/
  }
}

.clip-path-2 {
  @media screen and (min-device-width: 700px) {
    clip-path: ellipse(100% 58% at 50% 58%);
    /*clip-path: ellipse(98% 64% at 52% 67%);*/
  }
}

.img-step-1 {
  @media screen and (max-device-width: 480px) {
    display: none;  
  }
  width: 122px; 
  margin-bottom: -112px; 
  margin-left: -97px;
}

.img-step-2 {
  @media screen and (max-device-width: 480px) {
    display: none;  
  }
  width: 150px;
  margin-bottom: -70px;
}

.img-step-3 {
  @media screen and (max-device-width: 480px) {
    display: none;  
  }
  width: 124px;
  margin-bottom: -152px;
  margin-left: 80%;
  position: relative;
}

.blue-top {
  @media screen and (max-device-width: 700px) {
    display: none;  
  }
  height: 400px;
  width: 100%;
  background-color: var(--light-blue);
  position: absolute;
}

.b-tick {
  width: 50px;
  height: 50px;
  background-color: white;
  margin-top: -86px;
  transform: rotate(61deg);
  margin-left: 40px;
}

/*.navbar-light {
  position: fixed;
  width: 100%;
  z-index: 999999999;
  background-color: #ffffff;
}*/