/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! GENERAL !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

body::-webkit-scrollbar {
  background-color: #2b3035;
  width: 16px;
}

body::-webkit-scrollbar-track {
  background: #2b3035;
}

body::-webkit-scrollbar-thumb {
  background-color: #24282d;
  border-radius: 8px;
  border: 4px solid #2b3035;
}

@media (min-width: 666px) and (max-width: 932px) and (max-height: 768px) {
  .navbar {
    min-height: 14vh;
  }
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! HOMEPAGE !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

/* ! Loading animation */

#container__loading {
  height: 100vh;
  width: 100%;
  background-color: #24282d;
  position: absolute;
  z-index: 5;
  /* cursor: none !important; */
}

.container__loading--animation {
  height: 400px;
  width: 400px;
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 50%;
  transform: translate(-42%, -58%);
}

.loadingLogo {
  height: 0px;
  width: 200px;
  position: absolute;
  left: -25%;
  bottom: -15%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container__loadingImg > img {
  object-fit: cover;
  height: 0px;
  width: 100%;
  position: absolute;
  bottom: 0px;
}

.container__bgTransition {
  background-color: #2b3035;
  height: 0px;
  width: 100%;
  position: absolute;
}

@media (max-width: 768px) {
  .container__loading--animation {
    top: 48%;
    left: 46%;
  }

  .container__loading--animation {
    height: 300px;
    width: 300px;
    transform: translate(-45%, -45%);
  }

  .loadingLogo {
    height: 0px;
    width: 200px;
    left: -8%;
    bottom: -20%;
  }

  .container__bgTransition {
    background-color: #2b3035;
    height: 0px;
    width: 100%;
    position: absolute;
    top: -100px;
  }
}

/* ! modify cursor ! */
.cursor {
  /* home cursor */
  /* opacity: 0; */
  width: 200px;
  height: 200px;
  border-radius: 50%;
  /* to have a circle */
  /* ? to continue using */
  pointer-events: none;
  /* * overlay */
  -webkit-box-shadow: 0px 0px 0px 100vw rgba(9, 10, 11, 0.95);
  -moz-box-shadow: 0px 0px 0px 100vw rgba(9, 10, 11, 0.95);
  box-shadow: 0px 0px 0px 100vw rgba(9, 10, 11, 0.95);
}

/* ? design cursors's point in middle */
.cursor::before {
  content: "";
  /* to initiaze pseudo-element */
  position: absolute;
  /* place the point */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 4px;
  /* design the point */
  width: 4px;
  background-color: #fff;
  /* * delete this comment to reappear the point * */
  border-radius: 50%;
}

/* ! to hide cursor into all the page : */
#homepage {
  /* cursor: none; */
}

/* ! overlay until xl breakpoint */
.overlay {
  height: 100px;
  background-color: rgba(9, 10, 11, 0.5);
}

/* ! global settings ! */
h1,
li a,
a {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  color: #fff !important;
  text-transform: uppercase;
}

h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #fff;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
}

/* ! carousel ! */
.carousel-item {
  height: 100vh;
  width: 100vw;
}

.carousel-img__size {
  height: 100vh;
  width: 100vw;
  object-fit: cover;
}

#meli-pic {
  object-position: top;
}

#pau-pic {
  object-position: 50% 39%;
}

.carousel-img__filigram {
  background-color: rgba(30, 30, 30, 0.5);
  height: 100%;
  width: 100%;
}

@media (min-width: 1200px) {
  /* to hide overlay on desktop and make the animation functional */
  .carousel-img__filigram {
    display: none;
  }
  #homepage {
    cursor: none;
  }
}

@media (max-width: 1199px) {
  /* to be sure to haven't bug with the cursor on mobile or tablet screens */
  .cursor {
    display: none;
  }
}

@media (min-width: 1280px) and (max-width: 1368px) and (min-height: 800px) and (max-height: 1024px) {
  /* to be sure to haven't bug with the cursor on tablet screens */
  .cursor {
    display: none !important;
  }

  .carousel-img__filigram {
    display: block !important;
  }
}

/* ! text elements ! */
.text-elements__row {
  height: 100vh;
}

.text-elements__col {
  width: 90vw;
}

.text-elements__div {
  width: 99vw;
}

.carousel-h1 {
  font-size: 58px !important;
}

.carousel-h2,
a {
  font-size: 20px;
}

.dropdown-menu--home {
  background-color: rgba(0, 0, 0, 0);
  border: none !important;
}

.dropdown-item--home {
  padding: 0px 10px 0px 0px !important;
  font-weight: bolder;
  mix-blend-mode: hard-light;
}

.dropdown-item--home:hover {
  background-color: rgba(0, 0, 0, 0);
}
@media (max-width: 768px) {
  .carousel-h1 {
    font-size: 55px !important;
  }
}

/* ! modify font-size with media queries ! */
@media (min-width: 768px) and (max-width: 1200px) {
  .carousel-h1 {
    font-size: 74px !important;
  }

  .carousel-h2,
  a {
    font-size: 22px;
  }
}

@media (min-width: 1201px) {
  .carousel-h1 {
    font-size: 90px !important;
  }

  .carousel-h2 {
    font-size: 26px;
  }

  a {
    font-size: 20px;
  }
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! HEADER !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

/* ! navbar */
.navbar {
  height: 12vh;
}

.navbar img {
  /* height: 4rem; */
  height: 10vh;
}

.fa-instagram {
  color: #fff;
  height: 30px;
}

#logo__insta {
  max-width: 40px !important;
  /* background-color: #E84555 !important; */
}

.logos__connexion {
  max-width: 70px;
}

.dropdown-item {
  font-size: 1em;
}

@media (max-width: 376px) {
  .navbar {
    /* height: 16vh; */
    /* height: 14vh; */
  }
}

/* @media (max-width: 389px) {
    .navbar-toggler{
        max-height: 85px;
    }
} */
@media (max-width: 992px) {
  .navbar {
    height: auto !important;
  }
}

@media (min-width: 377px) and (max-width: 768px) {
  .navbar {
    /* min-height: 16vh !important; */
  }
}

@media (max-width: 992px) {
  .navbar-toggler {
    background-color: rgba(0, 0, 0, 0) !important;
    max-height: 100%;
  }

  /* .navbar-collapse{
        display: flex;
        justify-content: end;
    } */
  .navbar-nav {
    background-color: rgba(255, 255, 255, 0.01) !important;
    border: 1px solid grey;
    border-radius: 5px;
    /* background-color: rgba(0, 0, 0, 0.5) !important; */
    /* backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;  */
    /* width: 40vw !important; */
  }

  .dropdown-menu {
    background-color: rgba(255, 255, 255, 0.01) !important;
    /* backdrop-filter: blur(10px) !important; */
  }
}

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

  #navbarNavDropdown i {
    /* logo insta */
    padding: 0px 150px 0px 30px;
  }
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! SIGNUP FORM !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
main,
.card {
  background-color: #24282d !important;
}

.card__sign {
  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px,
    rgba(0, 0, 0, 0.15) 0px 3.5px 6.5px -1.5px,
    rgba(0, 0, 0, 0.1) 0px -1.5px 0px inset;
}

#signup__container {
  max-width: 61vw;
  min-height: 88vh;
}

#signin__container {
  height: 88vh;
}

label,
input,
.field__rsz {
  max-height: 36px;
}

@media (max-width: 1024px) {
  #signup__container {
    max-width: 100vw;
  }
}

.span__signup__pwd--eye {
  background-color: #fff;
}

.span__password {
  padding: 12px 13px;
  border-radius: 0% !important;
}

.fa-eye {
  color: #4f8465;
}

.fa-eye-slash {
  color: #e84555;
}

#signup__container input {
  border-radius: 0% !important;
}

#pwd-eye,
#pwd-eye-slash,
#pwd-eye-check,
#pwd-eye-slash-check {
  cursor: pointer;
}

button {
  height: 100px;
  width: 120px;
  background-color: #333740 !important;
  font-family: "Montserrat", sans-serif !important;
  border: none !important;
  border-radius: 0% !important;
}

.span__rsz {
  width: 45px;
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! SIGNIN FORM !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

input {
  border-radius: 0% !important;
}

.form__login--container {
  min-width: 70% !important;
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! FOOTER !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
footer {
  background-color: #2b3035;
  min-height: 50px;
}

.footer__mentionslegales {
  font-weight: 400;
  text-transform: capitalize;
  font-size: 0.9em;
}

@media (max-width: 768px) {
  .footer__mentionslegales {
    font-size: 0.6em;
  }
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! MENTIONS LEGALES !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
.mentions__h1 {
  font-size: 1.5em;
}

.mentions__h2 {
  font-size: 1em;
}

.mentions__p {
  color: #fff;
  text-align: justify;
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! POLITIQUE CONFIDENTIALITE !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

.politiqueconfidentialite {
  min-height: 88vh;
}