.phone-sub-banner {border-radius: 20px;}

.main-container-sub {max-width: 1300px;margin:0 auto;}

.about-branches .features-icons {box-shadow: 0px 10px 40px 0px #C5CACB4D;padding:0px 20px;border-radius: 30px;border:1px solid #EBECED;}

.about-branches .box-types-wrapper {display: flex;justify-content: space-between;width:100%;padding:0;gap:0;}
.about-branches .features-icon-box {display: flex;align-items: center;text-align:left;width:25%;justify-content: center;position: relative;padding:30px 10px;}
.about-branches .features-icon-box::before {content: ''; position: absolute; right:0; top:0; width:1px; background:#EBECED;height: 100%;}
.about-branches .features-icon-box.no-before::before {display:none;}
.about-box {padding-left: 12px;}
.about-box span {line-height: 33px;font-weight:600;}
.vision {background:#FBF5E7;border-bottom-right-radius: 120px 120px;height: 100%;padding: 20px 20px;display: flex;align-items: center; }

.mission {background:#C5CACB;border-top-left-radius: 120px 120px;height: 100%;padding: 20px 20px;display: flex;align-items: center;}
.about-milestone {background: #FDFAF3;padding:40px 7%;}
.about-milestone .city-hedings {text-align: left;margin:0px 0 20px 0;padding:0;}
.arrow,.year{cursor:pointer}.timeline-container{text-align:center}
.about-milestone .slider{display:flex;align-items:center;margin:20px 0;padding-bottom: 14px;overflow: hidden;}

.years-wrap {min-width: 215px;display: flex;justify-content: center;padding-bottom: 10px;}

.round {width: 13px;height: 13px;display: block;border-radius: 50%;position: absolute;bottom: -32px;z-index: 4;left: 26px;}

.arrow{font-size:24px;background:0 0;border:none}
.years{display:flex;width:100%;justify-content:left;border-bottom: 1px solid violet;padding-bottom: 15px;border-bottom: 2px solid #F0E8D6;}
#years-slider{display:flex;transition:transform .3s ease-in-out}
.year{padding:10px 15px;margin:0 5px;background:#F8E0DB;border-radius:50%;height: 64px;position: relative;
    width: 64px;font-size: 15px;font-weight: 500;color:#D0242D; line-height: 1;padding-top: 24px;}
.year.active{background:#e53935;color:#fff}
.details{margin-top:20px}.detail{display:none}
.detail.active{display:block}
.header-cont{display:flex;justify-content:space-between}

.about-milestone .header-cont {align-items:center;}
.about-milestone .arrow {width: 50px;height: 50px;border-radius: 50%;display: flex;align-items: center;justify-content: center;
    background-position: center;transition: 0.5s;box-shadow: 0px 10px 40px 0px #C5CACB99;font-size: 0;}


.msn-vsn { border-radius: 20px; overflow: hidden;}

.about-milestone .arrow-btn {display: flex; gap:10px;}
.about-milestone .arrow.left { background: url(../images/slide-left-arow.png) #fff no-repeat center;}
.about-milestone .arrow.right { background: url(../images/slide-right-arow.png) #fff no-repeat center;}

.mile-stront-wrap {display:flex;text-align: left;}
.mile-stront-wrap .left img {border-radius: 18px;}

.video-wrap .sub-boxshowdo {margin-top: 20px;}
.mile-stront-wrap .right li {margin-bottom: 20px; position:relative;list-style: none; padding-left: 30px; text-align:left;}
.mile-stront-wrap .right li::before {position: absolute;content: '';background: url(../images/logo-ico-img.png) no-repeat;width:20px;height: 20px;left: 0;top:0;background-position: center; }
.blog-img p {min-height: 80px;}
.help-btn-sec {padding: 40px 7%;}
.year::after {position: absolute;content: '';width: 0px;height: 0px; bottom: -39px;left: 7px;border: 25px solid transparent;border-top: 25px solid #F8E0DB;}

.year.active::after {border-top: 27px solid #e53935;}
.year .round {background: #F8E0DB;}
.year.active .round {background:#e53935;}

.year .round::after {position: absolute;content: '';right: -53px;top: 7px;width: 120px;height: 2px;background: #F8E0DB;z-index: 1;}
.year.active .round::after {top:6px; background: rgb(229,57,53); background: radial-gradient(circle, rgba(229,57,53,1) 35%, rgba(235,168,163,1) 74%, rgba(240,232,214,1) 100%);}

.video-wrap {text-align: center;}
.video-wrap .sub-boxshowdo {box-shadow:none;position: relative;cursor: pointer;}
.future-about img {border-radius: 30px;}

.connecting-sec, .about-vision,.video-wrap {padding:30px 7%;}
.pls-btn-sib {position: absolute; width: 100%; top: 50%; z-index: 0;}
.pls-btn-sib:hover img {opacity:0.9;}

/* Responsive */

@media (max-width:768px){
    .mile-stront-wrap .right p { font-size: 14px; }
    .about-milestone .city-hedings {margin:0;}
    .about-vision img {display: none;}

     div #years-slider {padding-left: 0px;}
    div.years-wrap {min-width: 100px;}
    div.mile-stront-wrap .left, div.mile-stront-wrap .right {width: 100%; text-align: center;padding: 0;}
    div.mile-stront-wrap .right {margin-top: 12px;}

    div.mile-stront-wrap {display:block;}
    div .desk-sub-banner {display: none;}
    div .phone-sub-banner {display:block;}

    .loan-img-box{display: none;}
    .about-vision {padding: 0;}
    .features-icon-box h5 {font-size: 13px;}
    .about-box span {font-size: 20px;}

}
@media (min-width:769px){
    .mile-stront-wrap .right {
        width: 70%;
        display: flex;align-items: center;
        padding-left: 30px;
    }

    .desk-sub-banner.abut-vdimg {display:block !important;}

}
@media (max-width: 991px){
    .connecting-sec.future-about-wrap {padding: 26px 8px;}
    .about-vision, .video-wrap {padding: 20px 5px;}

.phone-sub-banner {display: none;}
.benefits-bg.about-branches {padding: 0px 7%;}

.latest-blog {padding:40px 0;}
.latest-blog-btn a{max-width: 320px;margin: 0 auto;}
    
    .loan-text-box h2 {margin-bottom: 19px;}
    .loan-text-box {text-align:left;padding-top: 0;}
    .row.mt-5.para-intro {margin-top:16px !important; }
   
    .about-branches .box-types-wrapper {flex-wrap: nowrap;overflow-x: scroll;column-gap: 10px;}
    .about-branches .features-icon-box {width:165px;margin-bottom:0; padding: 12px 10px;}
    .about-branches .features-icons {padding: 0;}
    .about-box span {font-size: 26px;}
    .about-branches .features-icons{box-shadow:none;border: none;}

    .mission {border-top-left-radius: 0;}
    .vision {border-bottom-right-radius: 0;}
 
    .about-milestone {margin: 23px 0;padding: 30px 7%;}
  
    .city-hedings h2 {font-size: 20px;}
    #years-slider {padding-left: 80px;}
    .years-wrap {min-width: 120px;}
    .mile-stront-wrap {display:flex;}
   
    .mile-stront-wrap ul {padding: 0; margin-top: 12px;}
    .mile-stront-wrap .right {font-size: 14px;}

    .about-milestone .header-cont {align-items: start;}
    .vision p, .mission p {font-size: 14px;}
    .mile-stront-wrap .right {font-size: 14px;padding-left: 12px;}

}
@media (min-width: 992px) and (max-width: 1290px) {
    .connecting-sec, .about-vision, .video-wrap {padding: 20px 7%;}
    .about-milestone .slider{margin: 20px 0;}
    .about-milestone .city-hedings {text-align: left; margin: 0px 0 0px 0;}
    .vision h2, .mission h2 {font-size: 20px;}
    .mission {border-top-left-radius: 70px 70px;}
    .vision {border-bottom-right-radius: 70px 70px;}
    
.about-milestone .arrow {
    width: 35px;
    height: 35px;
}

}

/* Responsive */
@media (min-width: 992px){
    .years-wrap { min-width:108px;}
    .mile-stront-wrap .left {width: 45%;max-width: 385px;}
    .mile-stront-wrap .right {width:70%; display: flex;align-items: center;padding-left: 30px;}
    .mile-stront-wrap .right p {font-size: 20px;}
    .main-container-sub .loan-text-box p {line-height:26px;font-size:14px;}
    .main-container-sub .loan-text-box h2 {margin-bottom:18px;font-size: 32px;}
    .about-box span {font-size: 30px;}
    .vision p, .mission p {font-size: 14px;}
    #years-slider {padding-left:0px;}

}

@media (min-width: 1200px){
    .main-container-sub .loan-text-box p {line-height:28px;font-size:16px;}
    .main-container-sub .loan-text-box h2 {margin-bottom:30px;font-size: 40px;}

}
@media (min-width: 1440px){
    .years-wrap {min-width: 150px;}
    .main-container-sub .loan-text-box h2 {font-size: 36px;padding-right:20px;margin-bottom: 20px;}
    .main-container-sub .loan-text-box p {font-size:16px; line-height: 30px; padding-right: 18px;}
    .about-box span {font-size: 45px;}
    .vision p, .mission p {font-size: 16px;}
    .mile-stront-wrap .right {font-size: 18px;}
    #years-slider {padding-left:0px;}
    .mile-stront-wrap .left {width: 30%;}
    .mile-stront-wrap .right { width:70%;}

}