/**
 * @file style.css
 * @brief Vivreco stylesheet
 * @version 0.1
 * @author Mayeul Perrin
 * @email mayeulperrin@gmail.com
 * @date 2024-04
 */

/* ******************************** */
/* ************ GENERAL *********** */
/* ******************************** */

body,
main {
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.img-logo-nav {
max-height: 50px;
width: auto !important;
}

.nav-link {
text-transform: uppercase;
}

.red-border-left {
  border-left: 3px solid rgba(var(--red-vhp), 1);
}

/* ******************************** */
/* ********** END GENERAL ********* */
/* ******************************** */

/* ******************************** */
/* *********** SECTIONS *********** */
/* ******************************** */

section {
  padding: 100px 0;
  display: flex;
  align-items: center;
}

@media (max-width: 576px) {
  section {
    min-height: calc(100svh - 76px);
  }
}

.first-section-background {
  min-height: calc(100vh - 140px);
  padding: 0px;
  color: white;

  h1 {
    font-weight: 500;
    font-size: 32px;
    color: rgba(var(--red-vhp), 1);
  }

  h3 {
    font-weight: 300;
    font-size: 25px;
    margin-bottom: 1em;
  }

  p {
    font-size: 16px;
    color: white;
  }

  .content {
    position: absolute;
    bottom: 0;
    left: 0;
    padding-bottom: calc(
      75px + (var(--safe-area-inset-bottom) + 3%)
    ) !important;
    --safe-area-inset-bottom: calc(env(safe-area-inset-bottom) * 0.3);
    background-color: rgba(var(--background-primary), 0.68);
    color: rgba(var(--text-primary), 1);
    backdrop-filter: blur(4px);
    --webkit-backdrop-filter: blur(4px);
    padding: 30px 5px;
    z-index: 1;
    width: 100vw;
  }

  @media (min-width: 768px) {
    .content {
      bottom: calc(75px + (var(--safe-area-inset-bottom) + 3%)) !important;
      padding-bottom: 30px !important;
    }
  }

  .background {
    video,
    img {
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 0;
      filter: brightness(90%);
      --webkit-filter: brightness(90%);
    }
  }
}

.section-title {
  padding: 15px 0 20px;
  font-size: 36px;
  font-weight: 300;
  text-transform: uppercase;
}

.section-title:after {
  content: " ";
  display: block;
  margin: 25px auto 0;
  width: 0;
  height: 1px;
  background-color: rgb(var(--red-vhp));
  -webkit-transition: 0.4s width;
  transition: 0.4s width;
}

section:hover .section-title:after {
  width: 80px;
}

.section-subtitle {
  font-size: 9px;
  letter-spacing: 0.66em;
  word-spacing: 0.1em;
  text-transform: uppercase;
}

.section_descr_imgs img {
  max-height: 300px;
}

.first-section-btn-group {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}

/* ******************************** */
/* ********* END SECTIONS ********* */
/* ******************************** */

/* ******************************** */
/* ************* MENU ************* */
/* ******************************** */
.img-logo-nav {
  vertical-align: top;
  margin-top: 0px;
  height: auto;
  width: 200px;
  padding: 10px 0px;
}

.nav-item {
  display: flex;
  align-items: center;
}

.nav-link {
  font-weight: 700;
  font-size: 18px;
  color: #2e2f32 !important;
  position: relative;
  padding: 8px 0px 2px 0px;
  margin: 0px 0px 6px 0px;

  &:hover:not(.btn-vhp) {
    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 1px;
      right: 1px;
      border-bottom: 1px rgba(var(--red-vhp), 1) solid;
      transition: 0.6s expand-width ease;
      animation: expand-width 0.6s;
      animation-fill-mode: forwards;
    }
  }

  @media (min-width: 1200px) {
    &:hover:not(.btn-vhp) {
      &::after {
        left: 0.5rem;
        max-width: calc(100% - 1rem);
      }
    }
  }

  &.active {
    color: rgba(var(--red-vhp), 1) !important;
  }
}

@media (min-width: 576px) {
  @media (max-width: 1199px) {
    .navbar-toggler {
      width: 33.33%;
    }

    .navbar-brand {
      width: 33.33%;
      text-align: center;
    }

    .navbar-brand.btn-group {
      width: 33.33%;
      display: flex;
      justify-content: end;
    }
  }
}

.navbar .btn-vhp {
  width: min-content;
}
@media (min-width: 1200px) {
  .navbar .btn-vhp {
    margin-left: 16px;
    margin-right: 25px;
  }
}

/* ******************************** */
/* *********** END MENU *********** */
/* ******************************** */

/* ******************************** */
/* ************ ICONS ************* */
/* ******************************** */
.icon-round-red-80 {
  position: relative;
  background-color: rgba(var(--red-vhp), 1);
  color: white;
  border-radius: 50%;
  height: 80px;
  width: 80px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.icon-round-red-80::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(var(--red-vhp), 1);
  color: white;
  border-radius: 50%;
  height: 80px;
  width: 80px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -1;
  /* transition: wave 0.4s; */
}

.icon-round-red-80:hover.icon-round-red-80::before {
  animation: wave 0.6s ease-in-out;
}

.icon-red-90 {
  position: relative;
  background-color: transparent;
  color: rgba(var(--red-vhp), 1);
  height: 90px;
  padding: 0px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
/* ******************************** */
/* ********** END ICONS *********** */
/* ******************************** */

.france-map {
  object-fit: contain;
  max-height: 450px;
}

.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }
}

.features-3 {
  .features-item {
    text-align: left;

    .title {
      display: block;
      color: #333;
      padding: 30px 0 10px 0;
      text-transform: uppercase;
    }

    .content {
      color: #555;
    }
  }
}

.mh-400px {
  max-height: 400px !important;
}

.section-two-choices {
  padding: 0;
  display: block;
  align-items: normal;
  display: flex;
  position: relative;
  flex-direction: row;
  height: calc(100svh - 76px);

  .title {
    position: absolute;
    top: 5%;
    width: 100%;
    text-align: center;
    color: black;
    /* mix-blend-mode: difference; */

    h1 {
      font-size: calc(3em + 2vw);
      margin-left: -10px;
    }
  }

  .tab {
    padding: 10% 10% 20px 10%;
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    width: 50%;
    gap: 12px;

    @media (min-width: 992px) {
      justify-content: center;
    }

    img {
      max-height: 350px;
      max-width: calc(25vw) !important;
      width: 100%;

      object-fit: contain;

      @media (min-width: 1200px) {
        max-height: 500px;
      }
    }

    h1 {
      font-size: calc(3em + 2vw);
      position: absolute;
      top: 5%;
      pointer-events: none;

      @media (min-width: 992px) {
        top: 10%;
      }
    }

    p {
      text-align: center;
    }
  }

  @media (max-width: 576px) {
    .tab {
      padding-bottom: 60px;
    }
  }

  .tab.tab1 {
    background: var(--vhp-default-red-gradient);
    color: white;

    h1 {
      right: 0;
    }
  }
  .tab.tab2 {
    background-color: white;

    h1 {
      left: 0;
      color: black;
    }
  }
}

/* ******************************** */
/* ************* MENU *********** */
/* ******************************** */

.bottomMenu {
  .icon_selected {
    color: rgba(var(--red-vhp), 1) !important;
  }
}