.mt-6 { margin-top: 8rem !important; }
.mt-7 { margin-top: 10rem !important; }
.mt-8 { margin-top: 12rem !important; }
.mt-9 { margin-top: 16rem !important; }
.mt-10 { margin-top: 20rem !important; }

.mb-6 { margin-bottom: 8rem !important; }
.mb-7 { margin-bottom: 10rem !important; }
.mb-8 { margin-bottom: 12rem !important; }
.mb-9 { margin-bottom: 16rem !important; }
.mb-10 { margin-bottom: 20rem !important; }

.pt-6 { padding-top: 8rem !important; }
.pt-7 { padding-top: 10rem !important; }
.pt-8 { padding-top: 12rem !important; }
.pt-9 { padding-top: 16rem !important; }
.pt-10 { padding-top: 20rem !important; }

.pb-6 { padding-bottom: 8rem !important; }
.pb-7 { padding-bottom: 10rem !important; }
.pb-8 { padding-bottom: 12rem !important; }
.pb-9 { padding-bottom: 16rem !important; }
.pb-10 { padding-bottom: 20rem !important; }


.w-90 {
  width: 90% !important;
}

body {
    font-family: 'Lato', Helvetica, Arial, sans-serif !important;
    font-weight: 400;
    background-color: #F9F9F9;
}

header {
  font-family: 'Lato', Arial, Helvetica, sans-serif !important;
  font-weight: 400;
}

.special-font {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700;
}

:host header
{
  padding: 0 1.9rem;
  width: 100%;
  height: 5rem;
}

.logo
{
  width: 385px;
  @media (max-width: 992px)
  {
      width: 256px;
  }
}

:host footer
{
  padding: 0 4rem;
  width: 100%;
}

.footer-logo {
  height: 275px;
}

.copyright
{
    font-family: 'Lato';
    font-weight: 400;
    font-size: clamp(.75rem, 0.6rem + 0.75vw, 1.5rem);
    color: #8A8A8A;
}

.footer
{
    font-family: 'Lato';
    font-weight: 400;
    font-size: clamp(1rem, 0.8rem + 1vw, 2rem);
    color: black;
}

.footer-mobile-resize{
    padding-top: 45px;
    padding-left: 37px;
    padding-right: 37px;
}

hr
{
  width: 100%;
  margin: 0;
  padding: 0 4rem;
}

.header {
  @media (min-width: 768px) {
    padding-top: 30px;
  }
}

.icon-maf {
  object-fit: contain;
  width: 7rem;
  height: auto;
}

.recentered-mobile {
  padding-right: 32px;
}

.padding-left-desktop-footer {
  @media (min-width: 768px) {
    padding-left: 25px;
  }
}

.bigger-h2 {
  font-family: 'Montserrat-Bold';
  font-size: clamp(1rem, 0.8rem + 1vw, 2rem);
  color: black;

  @media (min-width: 768px) {
    font-size: 42px;
    font-family: Montserrat-Bold;
  }
}

.mobile-font-title {
  font-family: 'Montserrat-Bold';
  font-size: 19px;
  color: black;

  @media (min-width: 768px) {
    font-size: 42px;
    font-family: Montserrat-Bold;
  }
}

.icon-cards {
  height: 45px;
  width: 45px;
}

.icon-adp {
  height: 28px;
  width: 28px;
}

.icon-adp-bigger {
  height: 28px;
  width: 28px;

  @media (min-width: 768px) {
    height: 3rem;
    width: 3rem;
  }
}

.device-cards {
  @media (min-width: 768px) {
    padding: 3rem !important;
  }
}

.icon-gam {
  object-fit: contain;
  width: auto;
  height: 4rem;
  padding-bottom: 3%;
}

.icon-int {
  object-fit: contain;
  width: 2.75rem;
  height: auto;
  padding-bottom: 15px;
}

.icon-mcc {
  position: relative;
  align-self: self-start;
  width: 28px;
  height: 28px;
  margin-top: 18%;

  @media (min-width: 768px) {
    width: 50px;
    height: 50px;
    margin-top: 9%;
  }
}

.platform {
  height: calc(100vh - 10rem);

  @media (min-width: 768px) {
    height: 98vh;
  }
}

.platform-bg {
  position: relative;
  width: 100%;
  height: 100vh;
   @media (min-width: 768px) {
    height: 100vh;
    min-height: 50vh;
  }
  background: linear-gradient(180deg, white 0%, #ffe9fb 30%, #f15a24 100%);
  overflow: hidden;
}

.bg-img {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.img-quiz {
  top: 62%;
  left: 77%;
  width: 65px;
  z-index: 11
}

.img-medaille {
  top: 33%;
  left: 20%;
  width: 65px;
  z-index: 11
}

.img-screen2 {
  bottom: 8%;
  left: 7%;
  width: 175px;
  z-index: 11;
}

.img-elements-screen1 {
  bottom: 14%;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  z-index: 10;
}

.img-screen4 {
  top: 30%;
  left: 45%;
  width: 200px;
  z-index: 9;
}

.img-screen3 {
  top: 12%;
  left: 12%;
  width: 180px;
}

.img-dashboard,
.img-screen5,
.img-screen6,
.img-screen7 {
  display: none;
}

@media (min-width: 768px) {
  .img-dashboard {
    display: block;
    top: 7%;
    left: 5%;
    width: 85px;
    z-index: 10;
  }

  .img-quiz {
    top: 38%;
    left: 90%;
    width: 85px;
    z-index: 10;
  }

  .img-medaille {
    top: 2%;
    left: 64%;
    width: 85px;
    z-index: 11;
  }

  .img-screen2 {
    top: 15%;
    left: 1%;
    width: 400px;
    z-index: 8;
  }

  .img-elements-screen1 {
    bottom: -5%;
    left: 50%;
    width: 850px;
    z-index: 10;
  }

  .img-screen4 {
    top: 23%;
    left: 70%;
    width: 250px;
    z-index: 0;
  }

  .img-screen3 {
    top: 60%;
    left: 14%;
    width: 250px;
  }

  .img-screen5 {
    display: block;
    top: 50%;
    left: 78%;
    width: 350px;
  }

  .img-screen6 {
    display: block;
    top: 37%;
    left: 21%;
    width: 150px;
    z-index: 9;
  }

  .img-screen7 {
    display: block;
    top: 59%;
    left: 72%;
    width: 150px;
  }
}

.left-side-cards {
  @media (min-width: 768px) {
    padding-right: 1rem;
  }
}

button.invert:hover
{
  color: black;
  border: 1px solid black;
  border-radius: 2rem;
  background-color: white;
  box-shadow: 0px 3px 6px #00000029;
}

button.invert
{
  color: white;
  background-color: #F15A24;
  border: 1px solid #F15A24;
  border-radius: 2rem;
  width: fit-content;
  padding-left: 40px;
  padding-right: 40px;
  height: 42px;
  padding-top: 0;
  padding-bottom: 0;
  @media (min-width: 768px) {
     padding-left: 42px;
     padding-right: 42px;
     height: 62px;
  }
}

button.invert-white:hover
{
  color: white;
  border: 1px solid #F15A24;
  border-radius: 2rem;
  background-color: #F15A24;
  box-shadow: 0px 3px 6px #00000029;
}

button.invert-white
{
  color: black;
  background-color: transparent;
  border: 1px solid black;
  border-radius: 2rem;
  width: fit-content;
  padding-left: 40px;
  padding-right: 40px;
  height: 42px;
  padding-top: 0;
  padding-bottom: 0;
  @media (min-width: 768px) {
     padding-left: 42px;
     padding-right: 42px;
     height: 62px;
  }
}

.platform-img {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.maf {
  border: 3px solid #F15A24;
  border-radius: 1.25rem;
  background-color: #FFEFE9;
  text-align: center;
}

.usecase {
  border: 3px solid #F15A24;
  border-radius: 1.25rem;
  color: #F15A24;
  text-align: center;
}

.block {
  background-color: white;
  border-radius: 2.25rem;
  box-shadow: 0px 3px 6px #00000029;
  width: 100%;
  min-height: 100px;

  @media (min-width: 768px) {
    padding: 2rem !important;
  }
}

.block-sizable {
  background-color: white;
  border-radius: 1.25rem;
  box-shadow: 0px 3px 6px #00000029;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: flex-start;
  min-height: 160px;

  @media (min-width: 768px) {
    flex: 0 0 20%; 
    max-width: 20%;
    margin: 0 10px;
  }
}

.block-subtitle
{
    font-family: 'Lato';
    font-weight: 400;
    font-size: clamp(1rem, 0.8rem + 1vw, 2rem);
    color: black;
    @media (min-width: 768px) {
        line-height: 1;
    }
}

.horizontal-orange {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;

  border: 2px solid #F15A24;
  width: 100%;
}

.gamification {
  background-image: url("https://e-teach.ch/wp-content/uploads/2026/03/background-line-1.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-position-x: 65%;
}

.solution {
  background-image: none !important;
  overflow: visible !important; 
  position: relative;
  padding-top: 100px;
  margin-top: 15rem !important;
  isolation: isolate !important;
  z-index: 1 !important;
}

.solution::before {
  content: "";
  position: absolute;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  height: 700px; 
  top: -250px;
  background-image: url("https://e-teach.ch/wp-content/uploads/2026/03/Groupe-288.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
  z-index: -1 !important;
  pointer-events: none;
}

@media (max-width: 767px) {
  .solution::before {
    top: -180px;
    height: 350px;
    background-size: cover;
  }
}

.img-macbook {
  width: 100%;
  height: auto;
}

.bg-macbook {
  background-image: url("https://e-teach.ch/wp-content/uploads/2026/03/visu-macbook.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-position: center center;
  width: 100%;
  height: 100%;
  opacity: .25;

  position: absolute;
  left: 0;
  bottom: 0;

  z-index: -1;
}

.defi {
  text-align: center;

  @media (min-width: 768px) {
    width: 100%;
    height: 51vh;
    background: transparent linear-gradient(109deg, #F15A24 0%, #EE7D25 100%) 0% 0%;
    white-space: pre;
  }

  h2 {
    color: white;
  }

  .circle-lines {
    background-image: url("https://e-teach.ch/wp-content/uploads/2026/03/Footer_mobile.png");
    z-index: -1;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 35vh;
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;

    @media (min-width: 768px) {
      background-position: center;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      object-fit: cover;
      background-image: url("https://e-teach.ch/wp-content/uploads/2026/03/demi-rond-blanc.png");
      z-index: 1;
    }
  }
}

.height-6 {
  height: 6rem;
}

.overflower {
  max-height: 350px;
  background: transparent linear-gradient(180deg, #FFEFE9 80%, #FFFFFF00 100%) 0% 0% no-repeat padding-box;
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;

  -ms-overflow-style: none;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }

  @media (min-width: 768px) {
    max-width: 50%;
    margin-left: 25%;
  }
}

.custom-card {
  background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
  background: #FFFFFF 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 20px;
  opacity: 1;
  height: 86px;
  width: 360px;
  margin-top: 18px;

  @media (min-width: 768px) {
    height: 100px;
    width: 360px;
  }
}

.know-font {
  font-size: 18px;
  font-weight: 800;

  @media (min-width: 768px) {
    font-size: 25px;
    font-weight: 800;
  }
}

.desktop-no-padding {
  @media (min-width: 768px) {
    padding-left: 0;
  }
}

.picto-card-images {
  height: 42px;
  width: 42px;
  position: relative;
  left: 12px;
  top: 10px
}

.custom-card-title {
  position: relative;
  left: 20px;
  top: 10px;
  font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) 14px/18px var(--unnamed-font-family-montserrat);
  letter-spacing: var(--unnamed-character-spacing-0);
  color: var(--unnamed-color-f15a24);
  text-align: center;
  font: bold 14px/18px "Montserrat-Bold";
  letter-spacing: 0px;
  color: #F15A24;
  opacity: 1;

  @media (min-width: 768px) {
    font-size: 20px;
  }
}

.custom-card-text {
  position: relative;
  left: 61px;
  width: 82%;
  font-size: 12px;

  @media (min-width: 768px) {
    font-size: 18px;
  }
}

.round {
  border-radius: 40px;
}

.colored-police {
  color: #F15A24;
}

.pinkish {
  background: #FFEFE9;

  @media (min-width: 768px) {
    margin-right: 40px;
    width: 100%;
    height: auto;
    margin-left: 25px;
    max-width: 96vw;
    justify-content: center;
  }
}

.faded {
  background: transparent linear-gradient(180deg, #FFEFE9 80%, #FFFFFF00 100%) 0% 0% no-repeat padding-box;
  max-width: 82%;
  margin-right: 40px;

  @media (min-width: 768px) {
    width: 100%;
    margin-left: 25px;
    max-width: 96vw;
  }
}

.underTitle-fonts {
  font-size: 14px;

  @media (min-width: 768px) {
    font-size: 20px;
  }

}

.gamification-video {
  object-fit: cover;
  height: 45vh;
  @media (min-width: 768px) {
      height: 60vh;
  }
}

.multi-device-img {
  width: 100%;
  max-width: 626px;
}