html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
}
nav {
	width: 100%;
	box-sizing: content-box;
	}
.navbar {
    height: 5rem;
    background-color: rgb(249, 242, 242);
    
    
}

.fa-slack {
    color:red
    /* font-size: 2rem;   */
}

.nav-link {
    color:#222222 !important;

}

/* footer */
.f-info {
    text-align: center;
    margin-top: auto;
    padding: 1rem;
    height: 6rem;
    background-color: rgba(233, 228, 228, 0.907);
    display: flex;
    /* flex-direction: column; */
    flex: wrap;
    justify-content: center;
}

.f-info-links a {
    /* margin-right: 5px; */
    text-decoration: none;
    color: #222222;
}

.f-info-links a:hover {
    text-decoration: underline;
}

.f-info-links,
 .f-info-socials,
 .f-info-brands {
    width: 100%; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.f-info-socials i {
    font-size: 1.2rem;
    margin-right: 1rem;
   
} 


/* cards */
.row{
    /* margin-right: 2rem; */
    padding: 1%;
}

.listing-card-f {
    border: none !important;
    margin-left: .6rem;
    width: 95%;
    
}
.listing-card {
    border: none !important;
}

.card-img-top {
    border-radius: 1rem !important;
    width:100%;
    object-fit: cover !important;
    

}   
.card-body {
    padding: 1px !important;
}

.card-text p{
    font-weight: 400 !important;
}

.listing-link {
    text-decoration: none;
}

/* Card effect */
.card-img-overlay {
    opacity: 0;
}
.card-img-overlay:hover {
    opacity: .3;
    background-color: white;
}

/* new page */
.add-btn {
    background-color: red !important;
    border: none !important;
}

/* show page */
.show-image {
    height: 30vh;
}
.btns {
    display: flex;
}
.edit-btn {
    background-color: red !important;
    border: none !important;
}
.edit-btn2 {
    border: none !important;
}
.show-card {
    padding-left: 0;
    padding-right: 0;
}

/* Map styling */
#map { 
    height: 400px;
    width: 85vh;
}

 /* Media query for larger screens */
 @media (min-width: 300px) {
    #map {
        height: 180px;  /* Further increase height for extra-large screens */
        width: 23Svh;
    }
} 
 @media (min-width: 330px) {
    #map {
        height: 200px;  /* Further increase height for extra-large screens */
        width: 28vh;
    }
} 
 @media (min-width: 420px) {
    #map {
        height: 200px;  /* Further increase height for extra-large screens */
        width: 30vh;
    }
} 
 @media (min-width: 570px) {
    #map {
        height: 200px;  /* Further increase height for extra-large screens */
        width: 45vh;
    }
} 
 @media (min-width: 767px) {
    #map {
        height: 200px;  /* Further increase height for extra-large screens */
        width: 55vh;
    }
} 
@media (min-width: 900px) {
    #map {
        height: 200px;  /* Further increase height for extra-large screens */
        width: 55vh;
    }
} 
 @media (min-width: 976px) {
    #map {
        height: 250px;  /* Further increase height for extra-large screens */
        width: 65vh;
    }
} 

/* Media query for extra-large screens */
@media (min-width: 1200px) {
    #map {
        height: 300px;  /* Further increase height for extra-large screens */
        width: 75vh;
    }
}