/* FOOTER */

footer {
  margin: 10vh 15%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.footer-container {
  padding: 10vh 0;
  border-top: 0.1px solid rgb(49, 49, 49);
  display: flex;
  justify-content: flex-start;
  letter-spacing: var(--main-uppercase-spacing);          /* Increase font size, adjust as needed */
}



/* FOOTER MENU */
.footer-menu{
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: start;
}

.houseness-logo-footer{
  width: 200px;
  height: 5vh;
  background-image: url('../images/Houseness.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin: 20px 0;
}

/* Container of the menu */
.menu-footer-bar-menu-container {
  display: flex;
  justify-content: start;
  width: 100%;
  margin: 20px 1px;
}

/* Style the top bar menu as a flex container */
.footer-bar-menu {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;            /* Increase font size, adjust as needed */
  color: #ffffff;               /* White text */
  text-transform: uppercase;
}

/* Link itself of each element of the menu */
.footer-bar-menu li{
	margin: 2px 0;
}

/* Link itself of each element of the menu */
.footer-bar-menu a{
	color: white;
  text-decoration: none;
  transition: color var(--transition-time-fast) ease;
}

.footer-bar-menu a:hover{
  color: var(--main-red-color);
}






/* FOOTER SOCIAL */
.footer-contact{
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: start;
}

.contact-content{
  width: 100%;
  height: 5vh;
  margin: 20px 0;
  text-transform: uppercase;
  font-size: 1.2rem;
  align-content: center;
}

/* Container of the menu */
.menu-social-menu-container {
  display: flex;
  justify-content: start;
  width: 100%;
  margin: 20px 1px;
}

/* Style the top bar menu as a flex container */
.social-menu {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;            /* Increase font size, adjust as needed */
  color: #ffffff;               /* White text */
  text-transform: uppercase;
}

/* Link itself of each element of the menu */
.social-menu li{
	margin: 2px 0;
}

/* Link itself of each element of the menu */
.social-menu a{
	color: white;
  text-decoration: none;
  transition: color var(--transition-time-fast) ease;
}

.social-menu a:hover{
  color: var(--main-red-color);
}




/* FOOTER CREDITS */

.footer-credits {
  display: flex;
  flex-direction: column;
}
.menu-credits-menu-container {
  display: flex;
  justify-content: start;
}
/* Style the top bar menu as a flex container */
.credits-menu {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  letter-spacing: var(--main-long-description-spacing);
  font-size: 0.7rem;  
  color: #ffffff;               /* White text */
}

/* First item: only right border */
.credits-menu li:first-child {
  padding-right: 6px;
  border-right: 0.1px solid rgb(49, 49, 49);
}

/* Last item: only left border */
.credits-menu li:last-child {
  padding-left: 6px;
}

/* All other (middle) items: left and right borders */
.credits-menu li:not(:last-child):not(:first-child) {
  padding-right: 6px;
  border-right: 0.1px solid rgb(49, 49, 49);
  padding-left: 6px;
}

/* Link itself of each element of the menu */
.credits-menu a{
	color: rgb(100, 100, 100);
  text-decoration: none;
  transition: color var(--transition-time-fast) ease;
}
.credits-menu a:hover{
  color: var(--sec-red-color);
}

.footer-credits-made{
  letter-spacing: var(--main-long-description-spacing);
  color: rgb(57, 57, 57);
  margin-top: 5px;
  font-size: 0.6rem;
}
.footer-credits-made a{
  color: rgb(100, 100, 100);
  text-decoration: none;
  transition: color var(--transition-time-fast) ease;
}
.footer-credits-made a:hover{
  color: var(--sec-red-color);
}








@media (max-width: 675.98px) {
    footer{
        margin: 10vh 7%;
    }

    .footer-container{
        flex-direction: column;
    }

    .footer-menu{
        width: 100%;
    }

    .houseness-logo-footer{
        width: 250px;
    }

    .footer-contact{
        width: 100%;
    }
}