/*=============== GOOGLE FONTS ===============*/

@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@400;600;700&display=swap");



/*=============== VARIABLES CSS ===============*/

:root {

  /*========== Colors ==========*/

  /*Color mode HSL(hue, saturation, lightness)*/

  --first-color: hsl(225, 95%, 56%);

  --black-color: hsl(225, 12%, 12%);

  --white-color: hsl(0, 0%, 100%);

  --text-color: hsl(225, 8%, 65%);

  --body-color: hsl(225, 100%, 99%);



  /*========== Font and typography ==========*/

  /*.5rem = 8px | 1rem = 16px ...*/

  --body-font: "Montserrat Alternates", sans-serif;

  --biggest-font-size: 2.5rem;

  --tiny-font-size: .625rem;



  /*========== Font weight ==========*/

  --font-regular: 400;

  --font-semi-bold: 600;

  --font-bold: 700;



  /*========== z index ==========*/

  --z-tooltip: 10;

  --z-fixed: 100;

}

/*=============== NAVBAR ===============*/

.nav-ul {

  list-style: none;

}



.nav-a {

  text-decoration: none;

}









.nav-bottom {

  position: fixed;

  bottom: 1.5rem;

  left: 0;

  right: 0;

  background-color: #3b3b3b;

  width: 88%;

  margin-inline: auto;

  box-shadow: 0 2px 16px hsla(228, 95%, 4%, .1);

  padding: 0.30rem 1.75rem;

  border-radius: 4rem;

  z-index: var(--z-fixed);

}



.nav__list-bottom {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin: 0!important;

  padding: 0!important;

}



.nav__link-bottom {

  color: var(--text-color);

  font-size: 1.5rem;

  transition: color .4s;

}



.nav__link_bottom:hover {

  color: var(--white-color);

}



/*=============== EXPAND LIST ===============*/

.nav__expand-bottom {

  border: none;

  outline: none;

  width: 40px;

  height: 40px;

  background-color: var(--first-color);

  border-radius: 50%;

  cursor: pointer;

}



.nav__expand-icon-bottom {

  display: inline-block;

  color: var(--white-color);

  font-size: 1.5rem;

  transition: transform .4s;

}



.nav__expand-list-bottom {

  position: absolute;

  top: -4.5rem;

  left: 0;

  right: 0;

  background-color: var(--black-color);

  box-shadow: 0 2px 16px hsla(228, 95%, 4%, .1);

  width: max-content;

  margin-inline: auto;

  padding: .5rem 1.5rem;

  border-radius: 4rem;

  display: flex;

  column-gap: 2rem;

  z-index: -1;

  overflow: hidden;

  transform: translateY(5rem) scale(.1);

  transition: transform .5s cubic-bezier(.5, 1.8, .4, .8);

}



.nav__expand-list-bottom li {

  transform: translateY(-3rem);

  transition: transform .4s;

}



.nav__expand-list-bottom li:nth-child(1) {

  transition-delay: .2s;

}



.nav__expand-list-bottom li:nth-child(2) {

  transition-delay: .3s;

}



.nav__expand-list-bottom li:nth-child(3) {

  transition-delay: .4s;

}



.nav__expand-link-bottom {

  color: var(--text-color);

  display: flex;

  flex-direction: column;

  align-items: center;

  transition: color .4s;

}



.nav__expand-link-bottom i {

  font-size: 1.5rem;

}



.nav__expand-link-bottom span {

  font-size: var(--tiny-font-size);

  font-weight: var(--font-semi-bold);

}



.nav__expand-link-bottom:hover {

  color: var(--white-color);

}



/* Show list */

.show-list,

.show-list-bottom li{

  transform: translateY(0);

}



/* Rotate icon */

.rotate-icon-bottom {

  transform: rotate(135deg);

}



/* Active link */

.active-link-bottom {

  color: var(--white-color);

}



/*=============== BREAKPOINTS ===============*/

/* For medium devices */

@media screen and (min-width: 450px) {

  .nav-bottom {

    width: 350px;

  }

}


.d-flex-colmun-center { 
   
    display: flex;
    flex-direction: column;
    align-items: center;
    color: antiquewhite;

}