* {
    padding: 0; 
    margin:0;
    box-sizing: border-box;
}
#map {
    height: 100%;
}
  
  /* 
   * Optional: Makes the sample page fill the window. 
   */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
}

.info-card { 
    min-width: 300px; 
    width: 500px; 
    /* max-width:  90% !important; */
    height: fit-content;
    position: absolute;
    background: #f9f9f9; 
    bottom: 3rem; 
    left: 50%; 
    transform: translateX(-50%);
    display: none;
    height: 120px;
}

.info-card .content {
    width: 100%; 
    height: 100%; 
    padding: 1rem;
    position: relative;
}

.info-card .cover {
    flex: 1.5; 
}

.info-card .content {
    flex: 3;
}

.info-card .cover img {
    width: 100%; 
    height: 100%; 
    object-fit: cover;
}

#close-btn { 
    position: absolute;
    top: 1rem; 
    left: 1rem;
    font-size: 1.5rem;
    cursor: pointer;
}

.info-card p {
    font-weight: 300;
    margin: 1rem 0 ;
    font-size: 14px;
}

#map {
    height: calc(100vh - 240px)
}

.btn {
    display: inline-block;
    padding: .5rem 1rem; 
    width: 100px;
    text-align: center;
    /* margin-top: 1rem ; */
    text-decoration: none;
    font-size: 1.1rem;
}

.btn-solid-success {
    background: #00796B; 
    color: white; 
}


/*  */

.price-tag {
    padding: .2rem .6rem; 
    /* background: #00796B;  */
    background: #1e2759; 
    /* color: #f9f9f9;  */
    color: #f9f9f9; 
    font-size: .8rem;
    border-radius: 0.5rem;
    position: relative;
}

.price-tag::before {
    position: absolute;
    content: ""; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    /* border-top: 10px solid #00796B; */
    border-top: 10px solid #1e2759;
    bottom: -7px; 
    left: 50%; 
    transform: translateX(-50%); 
}


#property_title a {
    color: var(--primary-color) !important; 
    text-decoration: none;
}

/* map options styling */

.map-options { 
    width: 350px; 
    max-width: 90% !important;
    height: 40px; 
    background: #f9f9f9; 
    position: absolute;
    /* top: 11rem !important; */
    top: 4rem !important;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    column-gap: 1rem;
    align-items: center;
    z-index: 10000;
}


.map-options a {
    color: #1e1e1e; 
    font-size: 1.05rem; 
    flex:1;
    text-align: center;
    cursor: pointer;
}



/* Responsive Design Settings */


@media screen and (max-width: 768px) {
    .info-card {
        width: 90%; 
    }
    #map {
        height: calc(100vh - 150px) !important;
    }
}


@media screen and (min-width: 1200px) {
    #map {
        height: calc(100vh - 50px);
    }
}