@import url(variables.css);

:root{

}


#branches-container{
    min-height: 100vh;
    border-bottom: 4px solid var(--site-primary);
    background-image: linear-gradient(to bottom, rgba(0, 89, 167, 0.7) 15%, rgba(255, 255, 255, 0.5) 85%) ;

}


#branches-grid{
    padding-top: 125px !important;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-wrap: wrap;

}

.branch-grid-part-container{
    height: 420px;
    width: 33.3%;
    padding: 50px 35px;
}

.branch-grid-part{
    background-color: var(--site-tertiary);
    border-radius: var(--default-radius);
    box-shadow: var(--default-shadow);
}


.branch-find{
    min-width: 250px;
    height: 55px;
    font-size: 25px;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 0;
    left: 50%;

}
.branch-find{
    border-radius: var(--default-radius);
    box-shadow: var(--service-icon-shadow);
    /*backdrop-filter:  blur(7px) brightness(.95);*/
}

.branch-find-cover{
    background-color: rgba(198, 207, 223, 0.6);
    backdrop-filter:  blur(7px);
    -webkit-backdrop-filter:  blur(7px);
    border-radius: var(--default-radius);

}

.branch-find:hover span{
    color: var(--site-primary);
}
.branch-find:hover .branch-find-cover{
    backdrop-filter:  blur(3px);
    -webkit-backdrop-filter:  blur(3px);
}

.branch-details-container{
    padding-top: 48px;
}

.branch-details-icon{
    box-shadow: var(--default-shadow);
    font-size: 30px;

}

.branch-details-writing{
    font-size: 21px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


@media screen and (min-width:  600px) and (max-width: 1100px){


    #branches-grid{

    }

    .branch-grid-part-container{
        height: 420px;
        width: 50%;
        padding: 50px 35px;
    }


}

@media screen and (min-width:  0px) and (max-width: 600px){


    #branches-grid{

    }

    .branch-grid-part-container{
        height: 420px;
        width: 100%;
        padding: 50px 0px;
    }



}