@font-face {
  font-family: "Metropolis Regular";
  font-style: normal;
  font-weight: normal;
  src: url("./fonts/Metropolis-Regular.woff");
}
@font-face {
  font-family: "Metropolis Bold";
  font-style: normal;
  font-weight: normal;
  src: url("./fonts/Metropolis-Bold.woff");
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html,body{
    overflow-x: hidden;
    scroll-behavior: smooth;
}
:root{
    --primary-btn:#ED017F;
    --bannerp-color:#676767;
    --btntext-color:#FFFFFF;
    --title2-color:#343434;
    --customercard-color:#363940;
    --servicecard-color:#363940;
}
a{
    display:inline-block;
    text-decoration:none;
    color:inherit;
}
ul{
    list-style:none;
}
.container{
    max-width:1396px;
    margin: 0 auto;
    padding: 0 15px;
    width:100%;
}
.row{
    display:flex;
    flex-wrap:wrap;
    margin: 0 -15px;
}
.col25{
    width:25%;
    padding: 0 15px;
}
.col-4{
    width:calc(8.33% *4);
    padding: 0 15px;
}
.col-8{
    width:calc(8.33% *8);
    padding: 0 15px;
}
/*.col60{
    width:60%;
    padding: 0 15px;
}*/
.col60{
    width:60%;
    padding: 0 15px;
}
.title2{
    font-size:36px;
    font-weight: bold;
    text-align: center;
    margin-bottom:18px;
    color:var(--title2-color);
}
.primary-btn{
    padding:18px 30px;
    background:var(--primary-btn);
    border-radius:4px;
    color:var(--btntext-color);
}
/*Header Section CSS*/
header{
    padding: 27px 0;
}
nav,.navbar-collapsed,.navbar-collapsed > ul{
    display:flex;
    align-items:center;
}
.navbar-collapsed{
    flex-grow:1;
}
.navbar-collapsed > ul{
    margin:0 auto;
}
.nav-items{
    margin-right:41px;
}
.nav-links{
    text-transform:Uppercase;
    font-family: "Metropolis Bold";
    font-size:12px;
    font-weight: 800;
    color:rgba(1,1,1,100%);
}
.nav-links:hover{
    color:var(--primary-btn);
}
.nav-icon{
    margin-right:27px;
}
.menu{
    color:#ED017F;
    display:none;
}
/*Banner Section CSS*/
.banner-sec{
    padding:30px 0 0;
    min-height:100vh;
    /*display:flex;
    justify-content:center;
    align-items:center;*/
}
.banner-sec .row{
    align-items:center;
}
.banner-content > .title1{
    max-width:431px;
    margin-bottom:23px;
    font-family: "Metropolis Bold";
    font-size:57px;
    line-height: calc(68 / 57);
}
.banner-content > p{
    margin: 23px 0 38px;
    max-width:391.74px;
    margin-bottom:38px;
    font-size:16px;
    color:var(--bannerp-color);
}
.banner-btn ,.banner-social-links > ul{
    display:flex;
    align-items:center;
}
.banner-btn{
    margin-bottom:51px;
}
.banner-btn > .primary-btn{
    margin-right:20px;
}
.banner-btn > .secondary-btn{
    padding:13px 20px;
    border-radius:4px;
    border:2px solid #ED017F;
    background:transparent;
    color:#ED017F;
}
.banner-social-links > ul > li> .social-links{
    color:black;
}
.banner-social-links > ul > li {
    margin-left:16px;
}
.banner-social-links > ul > li:first-child{
    margin-right:44px;
    position:relative;
}
.banner-social-links > ul > li:first-child::after{
    content:"";
    width:1px;
    background:rgba(0, 0, 0);
    position:absolute;
    top:0;
    bottom:0;
    right:-22px;
}
.social-links > span{
    display:flex;
    align-items:center;
}
.banner-img{
    max-width:905px;
    position:relative;
    /*min-height:654px;
    margin: 0 auto;*/
}
.banner-img::after{
    content:"";
    position:absolute;
    height:71px;
    width:191.57px;
    border-radius:55px;
    box-shadow: 4px 4px 58px rgba(0, 0, 0, 12%);
    left:77.19px;
    top:0;
    background:url("../Assets/carloan.png") center/contain no-repeat;
}
.banner-img::before{
    content:"";
    position:absolute;
    height:71px;
    width:191.57px;
    border-radius:55px;
    box-shadow: 4px 4px 58px rgba(0, 0, 0, 12%);
    right:82.83px;
    top:112px;
    background:url("../Assets/homeloan.png") center/contain no-repeat;
}
.banner-img > img{
    width:100%;
    height:100%;
    object-fit:contain;
}
/*Customer Section*/
.customersec{
    padding:104px 0;

}
/*.customer-content{
    margin: 0 auto;
}*/
.customer-content > .title2{
    font-size:36px;
    font-weight: bold;
    text-align: center;
    margin-bottom:18px;
    color:#343434;
}
.customer-content > p{
    font-size:16px;
    font-weight: 800;
    text-align:center;
    margin-bottom:78px;
    color:rgb(88, 83, 83);
}
.customer-experience-card{
    max-width:259px;
    min-height:231px;
    margin:0 auto;
    padding:24px;
    /*margin-right:105px;*/
}
.customer-experience-card > img{
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom:8px;
}
.customer-experience-card > .title3{
    margin-bottom:18px;
    color:var(--customercard-color);
}
.customer-experience-card > p{
    color:#999999;
    font-size:14px;
    font-weight:400;
}
/*Our Service Section*/
.our-sevice-sec{
    padding: 104px 0;
    background-color: #FEF9FC;
}
.service-card{
    max-width:254px;
    margin: 0 auto;
}
.service-card > img{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom:22px;
}
.card-content > span{
    max-width:195px;
    margin-right:52px;
    text-transform:uppercase;
    color:var(--servicecard-color);
}
.card-content span{
    display:flex;
    align-items: center;
}
 .card-content > .service-link {
    width:37px;
 }
.circle{
   
  position: relative;
  width: fit-content;
}
.circle::after {
  content: "";
  height: 28px;
  width: 28px;
  border-radius: 50%;
  background: rgb(252, 229, 233);
  position: absolute;
  top: 45%;
  right: -5px;
  transform: translateY(-50%);
  z-index: -1;
}

 /*Result-section CSS*/
 .result-sec{
    padding: 104px 0;
 }
 .review-no-card{
    max-width:172px;
    margin-right:226px;
    margin: 0 auto;
    margin-bottom:67.5px;
 }
 .review-no-card > .number{
    display:flex;
    justify-content: space-between;
    align-items: center;
    font-size:25px;
    font-weight: 800;
 }
 .review-no-card > .number:hover{
    color:var(--primary-btn);
 }
 .review-no-card > p{
    font-size: 16px;
    color:rgba(103,103,103,100%);
 }
 .review-no-card > .number > span{
    color:#ED017F;
 }
 /*Footer Section*/
 footer{
    padding: 104px 0;
    text-align:center;
 }
 .footer-navigation{
    margin:0 auto;
    /*margin-right:166px;*/
    
 }
.footer-heading{
    font-size:18px;
    font-weight:800;
    color:black;
    margin-bottom:20px;
 }
 .footer-navigation > p{
    max-width: 180ox;
    font-size:14px;
    font-weight:400;
    margin-bottom:16px;
 }
 .product-links{
    margin-bottom:10px;
    font-size:14px;
    font-weight:400;
    
 }
 /*.banner-social-links > ul{
    display:flex;
    align-items: center;
 }*/
  span{
    display:flex;
    align-items:center;
 }
 /*.banner-social-links > ul > li {
    margin-left:16px;
}
.footer-social-links > ul > li:first-child{
    margin-right:44px;
    position:relative;
}
.footer-social-links > ul > li:first-child::after{
    content:"";
    width:1px;
    background:rgba(0, 0, 0);
    position:absolute;
    top:0;
    bottom:0;
    right:-22px;
}*/
/*Media Queary*/
@media screen and (max-width:1200px){
    .col-4,.col-8{
        width:100%;
    }
    /*Banner-section*/
    .banner-sec .row{
        flex-wrap:wrap-reverse;
    }
    .banner-img{
        margin-bottom:15px;
    }
    .banner-img::before,.banner-img::after{
        transform:scale(0.8);
    }
    /*Customer Section*/
    .customersec .col25{
        width:50%;
    }
    /*Our-service */
    .our-sevice-sec .col25{
        width:50%;
    }
     .service-card > .card-content > span{
        margin-bottom:26px;
     }
     /*Result section*/
     .result-sec .col25{
        width:50%;
     }
     /*Footer Section*/
     footer .col25{
        width:50%;
        margin-bottom:30px;
     }
}
@media screen and (max-width:992px){
    .navbar-collapsed{
        display:none;
    }
    .menu{
        display:block;
        margin-left:auto;
    }
    .section-gap{
        padding: 50px 0;
    }
    /*Footer*/
    .footer-navigation .banner-social-links{
        margin:0;
        max-width:100%;
        display:flex;
        justify-content: center;
    }
}
@media screen and (max-width:768px){
    .banner-img::before,.banner-img::after{
        transform:scale(0.5);
    }
    .our-sevice-sec .col25{
        width:100%;
    }
    /*Footer*/
    .footer-navigation .banner-social-links{
        margin:0;
        max-width:100%;
        display:flex;
        justify-content: center;
    }
}
@media screen and (max-width:576px){
    .banner-img::before,.banner-img::after{
        transform:scale(0.3);
    }
    /*Customer Section*/
   
     .service-card > .card-content > p{
        margin-bottom:26px;
     }
     /*Result section*/
     
     /*Footer Section*/
     footer .col25{
        width:100%;
        margin-bottom:30px;
     }
}