section{
    margin-top: 4rem;
}

.section{
    padding: 1rem 0;
}

#headingContainer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}

#headingH2{
    font-size: 36px;
    font-weight: 900;
    text-align: center;
    color: color;
}

.fourCardImg{
    width:100%;
    aspect-ratio:6/5;
    object-fit:cover
}

.para{
    color:#656F79;
    font-size: 20px;
    line-height: 200%;
    font-weight: 500;
    text-align: center;
}

.card{
    height: 100%;
}

.cardTitle{
    font-size: 32px;
    font-weight: 700;
    color: black;
    display: block;
    text-align: center;
    padding: 10px 0;
}

.cardText{
    font-size: 16px !important;
    font-weight: 300 !important;
    color: grey !important;
    line-height: 180%;
    text-align: justify;
}

.linkable_card{
    text-decoration: none;
}



/* floating button  */
#floatingBtnContainer{
    position:fixed;bottom:2rem;right:1rem
}
.floatingBtn{
    /* background-color: #26A4EC; */
    background: hsla(210, 90%, 80%, 1);

    background: linear-gradient(90deg, hsla(210, 90%, 80%, 1) 0%, hsla(212, 93%, 49%, 1) 100%);
    
    background: -moz-linear-gradient(90deg, hsla(210, 90%, 80%, 1) 0%, hsla(212, 93%, 49%, 1) 100%);
    
    background: -webkit-linear-gradient(90deg, hsla(210, 90%, 80%, 1) 0%, hsla(212, 93%, 49%, 1) 100%);
    
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#9FCCFA", endColorstr="#0974F1", GradientType=1 );
    color: white;
    border-radius:3.1em;
    padding:.85em 1.3em .95em;
    text-decoration:none;color:#fff;
    font-family:var(--heading-font-family);
    font-weight:900;
}  
.floatingBtn:hover{
    color:#000
}



/* Phone number banner */
#phone_no_banner > div{
    background-color: #F78307;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
}
#phone_no_banner > div > h2{
    color: black;
    font-size: 36px;
    font-weight: 500;
}
#phone_no_banner > div > h3{
    margin-top: 20px;
}
#phone_no_banner > div > h3 > a{
    color: black;
    font-size: 42px;
    font-weight: 500;
    text-decoration: none;
}

@media screen and (max-width: 576px){
    #phone_no_banner > div > h2{
        font-size: 28px;
    }
    #phone_no_banner > div > h3 > a{
        font-size: 36px;
    }
}

@media screen and (max-width: 440px){
    #phone_no_banner > div > h2{
        font-size: 20px;
    }
    #phone_no_banner > div > h3 > a{
        font-size: 28px;
    }
}