/* ===== Start base.css ===== */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

body {
  background-color: #ffffff;
    margin: 0;
    font-family: sans-serif;
}


.container {
  padding-right: var(--bs-gutter-x, 0.65rem);
  padding-left: var(--bs-gutter-x, 0.65rem);
  margin-right: auto;
  margin-left: auto;
}

/* Max-width changes by breakpoint */
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

.finder {
  border: .1em solid green;
}
/* ===== End base.css ===== */

/* ===== Start buttons.css ===== */

/* ===== End buttons.css ===== */

/* ===== Start forms.css ===== */

/* ===== End forms.css ===== */

/* ===== Start navbar.css ===== */
/* NAVIGATION BAR CODING (mobile first)*/ 

/* Shapes the navbar and fixed it to the top page */
.nav-bar {
  font-size: 1.4em;
  padding: .6em 0em;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: white;
  border-bottom-left-radius: .5em;
  border-bottom-right-radius: .5em;
  box-shadow: 0 0.1em 0.1em rgba(0,0,0,0.1);
  /* border-bottom: .07em solid black; */
}

/* Renter the logo image into his div */
.navbar-logo {
  display: flex;
  align-items: center;
}

/* Reduce the size of the logo */
.navbar-logo img {
  height: .9em;
}

/* Remove textdecoration and list styling for the lists tags */
.nav-bar ul {
  padding: 0;
  margin: 0;
}

.nav-bar li {
  list-style-type: none;
}

.nav-bar ul li a {
  text-decoration: none;
  color: black;
}

/* Set simple styling for the btn-manu */
.nav-bar .navbar-btn-menu {
  background-color: transparent;
  color: black;
  border: .05em solid black;
  border-radius: .5em;
  font-size: .7em;
}

/* Distribute horizontaly the 3 elements inside of the navbar */
.nav-bar .container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Keep the logo to the left */
.navbar-logo {
  order: 1;
}

/* Set the btn menu the the riight on the first column */
.navbar-btn-menu {
  order: 2;
}

/* Move the links to the next row and take all space horizontally
hide it on mobile view */
.navbar-links {
  order: 3;
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 1em;
  height: 0;
  overflow: hidden;
}

/* Class to use on js so links apper when menu-btn is toggle */
.navbar-links.open {
  height: auto;
}

/* Display sublink vertically and hide it */
.navbar-submenu {
  display: flex;
  flex-direction: column;  
  height: 0;
  overflow: hidden;
}

/* Add this class with js so submanu can be open by clicking a btn */
.navbar-submenu.open {
  height: auto;
}

/* Set a different color to sublinks */
.nav-bar .navbar-submenu a {
  color: #525252;
}

/* Add some space between siblinks */
.navbar-submenu li {
  padding-top: .3em;
}

/* Redifine rules for desktop view */
@media (min-width: 992px) {
  .navbar-logo {
    order: unset;
  }
  .navbar-logo img {
    height: 1.2em;
  }
  .navbar-btn-menu {
    order: unset;
    display: none;
  }
  .navbar-links {
    height: auto;
    order: unset;
    flex: unset;
    display: flex;
    flex-direction: row;
  }
  .navbar-submenu {
    position: absolute;
    background-color: #ffffff;
    border-bottom-left-radius: .5em;
    border-bottom-right-radius: .5em;
  }
  .navbar-submenu li {
    padding: .5em 1em;
  }
}

/* NAVIGATION BAR CODING ENDS (mobile first)*/ 
/* ===== End navbar.css ===== */