/*html {*/
/*    font-size: calc(12px + 0.390625vw);*/
/*}*/

/*body {*/
/*    font-size: 16px;*/
/*}*/

ol, ul {
    padding-inline-start: 3vw;
}

.page-content {
    margin-top : 144px;
}

.page-heading {
    background-color:#de2839;
    color: white;
    padding-top: 7%;
    padding-bottom: 4%;
}

#city-page-title {
    font-size: clamp(1.5rem, 4vw, 3rem);
    /* This sets:
       - Minimum size: 1.5rem (24px) for very small screens
       - Responsive size: 4vw (4% of viewport width)
       - Maximum size: 3rem (48px) for large screens
    */
    line-height: 1.2;
    margin: 0;
    padding: 0 15px;
}

@media screen and (max-width: 1200px) {
    .page-content {
        margin-top: 60px;
    }

    .page-heading {
        padding-top: 7%;
        padding-bottom: 7%;
    }
}



.spacing-top {
    margin-top: 20px;
}

.maps-section {
    margin-bottom: 30px;
    margin-top: 30px;
    background-color: #dfeee0;
    color: black;
    text-align: center;
    align-items: center;
    padding-top: 30px;
    padding-bottom: 30px;
}

.blog-redirect {
    margin-bottom: 30px;
    margin-top: 30px;
    background-color: #dfeee0;
    color: black;
    text-align: center;
    align-items: center;
    padding-top: 30px;
    padding-bottom: 30px;
}

.cta-button {
    border-radius: 0px;
    background-color: black !important;
    color: white !important;
    /*padding: 10px 45px 10px 45px ;*/
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* number of lines to show */
    line-clamp: 4;
    -webkit-box-orient: vertical;
}

.truncate-text {
    display: block;/* or inline-block */
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow: hidden;
    max-height: 3.6em; /* (Number of lines you want visible) * (line-height) */
    line-height: 1.8em;
}

.card-heading {
    color: #f24150;
    border-bottom: none;
}

.page-content-header {
    border-bottom: 1.8px solid #f24150;
}