.pt-50{
    padding-top: 50px;
}
.pb-50{
    padding-bottom: 50px;
}

.bg-gray{
    background-color:#F7F7F7;
}


.bg-hover-blue:hover{
    background: linear-gradient(90deg, #335293 0%, #20335B 100%);
}

.text-black{
    color: #000;
}

.ul-custom{
    list-style: none;
    list-style-image: url("https://bridgingandcommercial.co.uk/images/blue vector.png");
    padding-left: 25px;
    text-align: left;
    min-height: 255px;
}

.ul-custom li{
    padding-bottom: 25px;
    font-size: 13px;
}

.bg-hover-blue:hover .ul-custom{
    list-style-image: url("https://bridgingandcommercial.co.uk/images/Vector.png");
}

.bg-hover-blue:hover .ul-custom li{
    color: #fff;
}

.bg-hover-blue:hover .text-black{
    color: #fff;
}

.btn{
    padding: 15px 25px;
}

.bg-hover-blue:hover .btn-hover-custom{
    background: white; 
    color: #20335B; 
}

.btn-blue{
    color: white;
    background: linear-gradient(90deg, #335293 0%, #20335B 100%); 
}

.fn-w-700{
    font-weight: 700;
}

.rounded-circle{
 border-radius: 110px;
}


.Design1{
    width: 100%; 
    height: 900px; 
    position: relative; 
    background: white;
}

.first-box{
    width: 33%; 
    height: 750px; 
    left: 0px; 
    top: 116.20px; 
    position: absolute; 
    background: #F7F7F7;
}

.first-box:hover{
    height: 850px; 
    top: 81.20px;
    background: linear-gradient(90deg, #335293 0%, #20335B 100%);
}

.first-box-div:hover .first-box{
    height: 850px; 
    top: 81.20px;
    background: linear-gradient(90deg, #335293 0%, #20335B 100%);
}
.first-box-image{
    width: 328.13px;
    height: 229.61px;
    left: 15px;
    top: 173px;
    position: absolute;
}

.first-box-title{
    left: 100px; 
    top: 456px; 
    position: absolute; 
    color: black; 
    font-size: 38px; 
    font-family: 'Roboto Condensed',sans-serif; 
    font-weight: 700; 
    text-transform: uppercase; 
    line-height: 38.68px; 
    word-wrap: break-word
}

.first-box-div:hover .first-box-title{
    left: 100px; 
    top: 456px; 
    position: absolute;
    color: white;
    font-size: 38px;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 38.68px;
    word-wrap: break-word;
}
.first-box-desc{
    width: 27%; 
    left: 40px; 
    top: 519px; 
    position: absolute; 
    color: #323232; 
    font-size: 15px; 
    font-family: Roboto,sans-serif; 
    font-weight: 400; 
    line-height: 23px; 
    word-wrap: break-word
}

.first-box-div:hover .first-box-desc{
    color: white; 
}
.first-box-vector-one{
    width: 17.50px; 
    height: 13.41px; 
    left: 15px; 
    top: 523px; 
    position: absolute; 
    background:url('https://bridgingandcommercial.co.uk/images/blue vector.png');
}

.first-box-vector-two{
    width: 17.50px; 
    height: 13.41px; 
    left: 15px; 
    top: 569px; 
    position: absolute; 
    background:url('https://bridgingandcommercial.co.uk/images/blue vector.png');
}
.first-box-div:hover .first-box-vector-two, .first-box-div:hover .first-box-vector-one{
    background:url('https://bridgingandcommercial.co.uk/images/Vector.png');
}
.first-box-btn-div{
    width: 250px;
    height: 53px;
    left: 5%;
    top: 665px;
    position: absolute;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}
.first-box-div:hover .first-box-btn-div{
    width: 250px; 
    height: 53px; 
    left: 5%; 
    top: 665px; 
}
.first-box-btn-group{
    width: 249px; 
    height: 53px; 
    position: relative
}
.first-box-btn-bg{
    width: 249px; 
    height: 53px; 
    left: 0px; 
    top: 0px; 
    position: absolute; 
    background: linear-gradient(90deg, #335293 0%, #20335B 100%); 
    border-radius: 110px
}
.first-box-div:hover .first-box-btn-bg{
    background: white; 
}
.first-box-btn{
    width: 215px; 
    height: 22px; 
    left: 20px; 
    top: 15px; 
    position: absolute; 
    justify-content: space-between; 
    align-items: center; 
    display: inline-flex;
}
.first-box-btn-text{
    color: white; 
    font-size: 19px; 
    font-family: Roboto,sans-serif; 
    font-weight: 400; 
    text-transform: uppercase; 
    word-wrap: break-word;
}
.first-box-div:hover .first-box-btn-text{
    color: #20335B; 
}

.second-box{
    width: 33%;
    height: 760px; 
    left: 365px; 
    top: 116px; 
    position: absolute; 
    background: #F7F7F7;
}

.second-box:hover{
    height: 850px; 
    top: 81.20px;
    background: linear-gradient(90deg, #335293 0%, #20335B 100%);
}

.second-box-div:hover .second-box{
    height: 850px; 
    top: 81.20px;
    background: linear-gradient(90deg, #335293 0%, #20335B 100%);
}

.second-box-image{
    width: 328.13px;
    height: 229.61px;
    left: 380px; 
    top: 173px; 
    position: absolute
}
.second-box-image img{
    width:100%;
}
.second-box-title{
    left: 485px; 
    top: 456px; 
    position: absolute; 
    color: black; 
    font-size: 38px; 
    font-family: 'Roboto Condensed',sans-serif; 
    font-weight: 700; 
    text-transform: uppercase; 
    line-height: 38.68px; 
    word-wrap: break-word
}

.first-box-div:hover .second-box-title{
    color: white;
}

.second-box-desc{
    width: 27%; 
    left: 410px; 
    top: 519px; 
    position: absolute; 
    color: black; 
    font-size: 14px; 
    font-family: Roboto,sans-serif; 
    font-weight: 400; 
    line-height: 21px; 
    word-wrap: break-word
}

.second-box-div:hover .second-box-desc{
    color: white; 
}

.second-box-vector-one{
    width: 17.50px; 
    height: 13.41px; 
    left: 380px; 
    top: 523px; 
    position: absolute;
    background:url('https://bridgingandcommercial.co.uk/images/blue vector.png');
}

.second-box-vector-two{
    width: 17.50px; 
    height: 13.41px; 
    left: 380px; 
    top: 630px; 
    position: absolute;
    background:url('https://bridgingandcommercial.co.uk/images/blue vector.png');
}

.second-box-vector-three{
    width: 17.50px; 
    height: 13.41px; 
    left: 380px; 
    top: 713px; 
    position: absolute;
    background:url('https://bridgingandcommercial.co.uk/images/blue vector.png');
}

.second-box-div:hover .second-box-vector-one, .second-box-div:hover .second-box-vector-two, .second-box-div:hover .second-box-vector-three{
    background:url('https://bridgingandcommercial.co.uk/images/Vector.png');
}
.second-box-btn-div{
    width: 245px;
    height: 53px;
    left: 425px;
    top: 790px;
    position: absolute;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}
.second-box-btn-group{
    width: 242px;
    height: 53px;
    position: relative;    
}
.second-box-btn-bg{
    width: 249px; 
    height: 53px; 
    left: 0px; 
    top: 0px; 
    position: absolute; 
    background: linear-gradient(90deg, #335293 0%, #20335B 100%); 
    border-radius: 110px
}
.second-box-div:hover .second-box-btn-bg{
    background: white; 
}
.second-box-btn{
    width: 215px;
    height: 22px;
    left: 20px;
    top: 15px;
    position: absolute;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    display: inline-flex;
   
}
.second-box-btn-text{
    text-align: center;
    color: white;
    font-size: 19px;
    font-family: Roboto, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    word-wrap: break-word;

}
.second-box-div:hover .second-box-btn-text{
    color: #20335B; 
}