@media only screen and (max-width: 900px) {
    .branches-hero{
        flex-direction: column-reverse !important;
        height: 180px !important;
    }
    .rtl .location-list{
        height: 100% !important;
    }
    .branches-hero > h1{
        position: relative;
        top: 100px;
        margin-bottom: 30px;
    }
    .branches-page div h1{
        padding:10px;
    }
    .rtl .branches-hero >h1{
        width: 100% !important;
        text-align: end;
    }
    .branches-hero > img{
        position: relative;
        top: 260px;
        display: none;
    }
    .branches-list-map{
        flex-direction: column !important;
        width: 100% !important;
        margin: 0px !important;
    }
    .branches-page > div {
        margin: 50px 0px !important;
        align-items: center;
        justify-content: center !important;
    }
    .location-card{
        margin-left: 10px;
        margin-right: 10px; 
    }
    .branch-phone-fax{
        margin:10px 0px !important;
    }
    .branches-map{
        display: none !important;
        width: 100% !important;
        height: 440px !important ;
         
        background-color: green !important;
    }
    .location-list{
        width: 90%!important;

    }
    .branches-filter-container{
        width: 100% !important;
        margin: 100px 10px !important;
    }
    .branches-filter-container h3{
        margin-top:100px;
    }
    .branches-filter-container > div{
        flex-direction: column !important;
    }
    .input-group {
        width: 60vw !important;
    }
    .branches-page div > h1{
        font-size: 36px !important;
    }
    .branches-filter-container{
        transform: translateY(-70px);
    }
}
.branches-background-img{
    animation: expand 1s ease;
    position: absolute;
    /* left: 61%;
    top: 140px; */
    left: 58%;
    top: -3px;
}
.rtl .branches-background-img{
    animation: expand 1s ease;
    position: absolute;
    left: 6%;
    top: -20px;
}
@keyframes expand {
    0%{
        transform: scale(0);
    }
    100%{
        transform: scale(1);
    }
    
}
.branches-background-logo{
    position: absolute;
    /* left: 50%; */
    /* left: 61%;
    top: -80px; */
    left: 53%;
    top: -270px;
    width: 656px;
    height: 820px;
    /* height: 527px; */
    z-index: -1;
    margin:0px 100px
}
.rtl .branches-background-logo{
    position: absolute;
    left: -7%;
    transform: rotate(180deg);
    z-index: -1;
    top: -150px;
}
.rtl .branches-page div h1{
    margin-top: 0px;
    margin-bottom: 100px;
    margin-right:100px;
}
.branches-page div h1{
    margin-bottom: 100px;
}
.branches-filter-container{
    margin:0px 100px;
}
.branches-filter-container{
    transform: translateY(-110px);
}
.branches-filter-container h3{
    /* transform: translateY(-110px); */
}
.rtl .branches-filter-container{}
.rtl .branches-filter-container h3{
    text-align: end;
}
.rtl .branches-filter-container div{
    /* justify-content: flex-end; */
    direction: rtl;
}
.branches-list-map{
    transform: translateY(-100px);
}
.rtl .branches-list-map{
    flex-direction: row-reverse !important;
}
.branches-page{
    /* background-color: red; */
    width: 100%;

}
.branches-hero {
    height: 570px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
    margin-left: 100px;
}
.rtl .branches-hero{
    flex-direction: row-reverse;
    margin-left: 0px;
    align-items: center;
}
.branches-page div h1{
    /* margin-top: 100px; */
     font-size: 56px;
}
.branches-page >div{
    /* margin:0px 100px; */
    /* transform: translateY(-110px); */
}

.input-group{
    width:342px;
    margin-right: 25px;
}
.rtl .input-group{
    margin-left: 25px;
    margin-right: 0px;
}
.input-group select{
    padding:10px 20px
}
.rtl .input-group select{
    padding:10px 40px
}
.branch-btn-filter{
    background: none;
    border:none;
    color: var(--theme-grey-light);
    transition: all;
    font-family: "TheSansArabic-SemiBold";
    transition: all 0.5s;
}
.branch-btn-filter:hover{
    background: none;
    border:none;
    color: var(--theme-primarty-color);
    
}
.branches-list-map{
    overflow: hidden;
    padding-top:30px;
    /* background-color: RED; */
    height: 470px;
    margin:0px 100px;
}
.branches-map{
    width: 50%;
    /* background-color: green; */
}
.location-list{
    width: 50%;
    background-color: var(--theme-white);
    padding-top: 30px;
    overflow-y: scroll;
    overflow-x: hidden;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;

}
.location-list::-webkit-scrollbar-track{
    /* -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); */
  border-radius: 10px;
  background-color: #DEE1E2;
}
.location-list::-webkit-scrollbar {
    width: 12px;
  background-color: #DEE1E2;
}
.location-list::-webkit-scrollbar:vertical{
    /* color: antiquewhite;
    background: red; */
}

.location-list::-webkit-scrollbar-thumb{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: var(--theme-primarty-color);
  transform: all 0.5;
}
.location-list::-webkit-scrollbar-thumb:hover {
  filter: brightness(85%);
}
.location-list a{
    text-decoration: none;
    color: var(--theme-grey-light);
}
.location-card{
    
    padding-top:40px;
    padding-bottom:20px;
    margin-left: 50px;
    margin-right: 50px;
    border-bottom: 1px solid var(--theme-grey-light);
}

.rtl .location-card{
    direction: rtl;
}

.location-card img{
    /* padding-left: 10px; */
}
.rtl .location-card img{
    padding-right: 0px;
    padding-left: 10px;
}
.location-card h4{
    color: var(--theme-grey-light);
    margin-bottom: 20px;
}


.branch-name{
    margin-bottom: 20px;
}
.branch-name h3{
    margin-bottom: 0px;
}

.branch-phone-fax{
    color: var(--theme-grey-light);
    margin-left: 0px;
}
.rtl .branch-phone-fax{
    margin-right: 0px;
    margin-left: 150px;
}

.working-ours{
    margin-bottom:0px !important;
    padding:0px;
}


.branch-working-hours{}

/* <div class="map-info-box" style="direction:rtl">
                <div class="map-info-box-location">
                    <img src='<?php echo get_theme_file_uri('/images/icons/location.svg') ?>' alt='phone' />
                    <p>Malaz, Riyadh</p>
                </div>
                <div class="map-info-box-content">
                    <div class="map-info-box-content-phone">
                        <h3>Phone Number:</h3>
                        <div class="map-info-item">
                            <img src='<?php echo get_theme_file_uri('/images/icons/phone-black.svg') ?>' alt='phone' />
                            <p>112904311</p>
                        </div>
                        <div class="map-info-item">
                            <img src='<?php echo get_theme_file_uri('/images/icons/phone-black.svg') ?>' alt='phone' />
                            <p>112904311</p>
                        </div>
                    </div>
                    <div class="map-info-box-content-phone">
                        <h3>Fax:</h3>
                        <div class="map-info-item">
                            <img src='<?php echo get_theme_file_uri('/images/icons/fax.svg') ?>' alt='phone' />
                            <p>014773231</p>
                        </div>
                    </div>
                </div>
            </div> */