.banner-section{

    position: relative;

}



.loan-type-title img{

    margin-right: 8px;

}

.loan-type-title{

    text-transform: uppercase;

    color: #2F2F2F;

    font-family: 'Jost-Bold';

    font-size: 13.81px;

}





.loan-type-section-list{

    list-style-type: none;

    display: flex;

    align-items: center;

    background: linear-gradient(90deg, #2452AA 0%, #3B64B3 100%);

    padding: 0px;

    margin: 0px;

    min-height: 64px;

    border-radius: 2px;

    justify-content: space-between;

    



}

.loan-type-section-list li.active{

    font-family: 'Jost-Bold';

    color: #FFC300;

}

.loan-type-section-list li{

    color: #fff;

    font-size: 14px;

    font-family: 'Jost-Medium';

    text-transform: uppercase;

    padding: 8px 3% 14px;

    text-align: center;

    letter-spacing: 0.80px;

    line-height: 16px;

    min-height: 64px;

    display: flex;

    align-items: center;

}

.loan-type-section-list li:nth-child(1){

    padding-left: 22px;

   

}

.loan-type-section-list li:last-child{

    padding-right: 22px;

}

.loan-type-section-list li:nth-child(2){

  

}

.line{

    height:30px;

    width: 1px;

    background-color: #fff;

}

.loan-type-section-list{

    position: relative;

}

.animation-triangle{

    position: absolute;

    bottom: 0px;

    width: 0;

            height: 0;

            border-left: 9px solid transparent;

            border-right: 9px solid transparent;



            border-bottom: 9px solid #fff;

            left: 50px;

            transition: left 1s ease; 



}

.loan-type-section-list li:hover{

    color: #FFC300;

    cursor: pointer;

}

.loan-type-section-list li.second-li:hover ~ .animation-triangle,.loan-type-section-list li.second-li.active ~ .animation-triangle{

   left: 34.5%;

}

.loan-type-section-list li.third-li:hover ~ .animation-triangle,.loan-type-section-list li.third-li.active ~ .animation-triangle {

    left: 61.5%;

}

.loan-type-section-list li.fourth-li:hover ~ .animation-triangle,.loan-type-section-list li.fourth-li.active ~ .animation-triangle {

    left: 86.5%;

}

.left-side-part{

    padding: 0px;

}





@media (max-width:1154px){

    .banner-section img{

        height: 300px;

        object-fit: cover;

    }

}

@media (max-width:767px){

    .banner-section img{

        height: 250px;

        object-fit: cover;

    } 

}



@media(max-width:1279px){

    .left-side-part{

       max-width: 57%;

    }

}



@media (min-width:1280px){

    .left-side-part{

        max-width: 57%;

    }

}

@media (max-width:991px){

    .left-side-part{

        max-width: 100%;

        padding: 0px 8px;

     } 

}

@media (min-width:992px) and (max-width:1280px){

    .left-side-part{

        max-width: 672px;

    }

}



.banner-section{

    position: relative;

}

.banner-text-box{

    position: absolute;

    width: 30%;

    height: 100%;

    top: 0px;

    left: 0px;

    background: #41681280;

    backdrop-filter: blur(3.6px);







}

.banner-heading{

    font-size: 24px;

    line-height: 35px;

    font-family: Poppins-Medium;

    color: #fff;

    letter-spacing: 0.80px;

    position: absolute;

    bottom: 16%;

    left: 12%;

    text-transform: uppercase;



}

.header-group {

    padding: 18px 0 12px 0;

}



.header-container{

    position: absolute;

    width: 100%;

    top: 0px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 10;

}

.mobile-header  .phone-number{

    font-family: Jost-Medium;

    color: #fff;

    font-size: 18px;

}



@media(min-width:768px){

    .container.header-container{

       max-width:95%;

    }

  

}



@media (max-width:991px){

    .mobile-header .phone-number{

        font-size: 16px;

    }

}

@media (max-width:767.9px){

    .header-container{

        position: static;

        transform: none;

    }

    .mobile-header {

        display: none;

    }

    .home-link{

        color: #000;

    }

    .header-container{

        max-width: 97%;

    }

    .footer-number{

        gap: 2px;

    }

    .header-left .logo{

        max-width: 140px;

    }

    .calc-with-chart.calculator-div .calculator-range-inputs-div, .calc-with-chart.calculator-div .result-div{

        width: 100%;

    }

    .calculator-range-inputs-div{

        padding-right: 0px;

    }

    .banner-text-box {

        position: absolute;

        width: 40%;

    }

   

}

@media (max-width:575px){

    .footer-number a p{

        font-size: 15px;

    }

    .home-link{

        font-size: 18px;

    }

    .result-div {

        padding-right: 0px;

    }

    .banner-text-box {

        position: absolute;

        width: 64%;

    }

    .header-left .logo{

        max-width: 130px;

    }

}

@media (max-width:390px){

    .header-left .logo{

        max-width: 110px;

    }

}