@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap');

html, body{
	background:white;
	 font-family: 'Montserrat', sans-serif;
}
body:before{
	display:none;
}

p{color:#000;}

.blue{
	color:#253A54;
}

.lightblue{ color:#CFDDE8}

.semibold {
  font-weight: 600;
}

.bold,
h1, h2, h3 {
  font-weight: 700;
}

.top-section-bb{
	background-image:url("img/bb-bg.png");
	background-size:cover;
	background-repeat: no-repeat;
	text-align: left;
	position: relative;
	padding: 60px 0;
}

.top-section-bb p:nth-of-type(1){ color:#253A54; font-weight:700; font-style: italic}
.top-section-bb p.intro{ position:absolute; left:97px; top:0; color:#253A54}
.top-section-bb h2 { margin-bottom:20px;color:#253A54}
.top-section-bb .bb-logo{ width: 390px; max-width: 100%;   background: url("img/BrokerBridge_logo.svg") no-repeat center / contain; display: block; padding-top: 90px; }
.top-section-bb .cta-bb { border-radius:20px; background:linear-gradient( 135deg, #2E4966 0%, #253A54 45%, #1B2C40 100%); padding: 40px; width: fit-content;}
.top-section-bb .cta-bb p { color:white; font-size: 23px}
.top-section-bb .cta-bb p:nth-of-type(1) {  font-size: 28px}
.top-section-bb .cta-bb a.btn{ background-color: white; padding:15px 30px; transform: scale(1); border-radius: 15px; color:#253A54; font-size: 23px; transition: transform 0.3s ease, background-color 0.3s ease;}
.top-section-bb .cta-bb a.btn:hover{ background-color:#CFDDE8; transform: scale(1.05); transition: transform 0.3s ease, background-color 0.3s ease;}
.top-section-bb .bb-desktop {   width: 800px; right:40px; max-width: 45vw;
    height: 620px; background: url("img/brokerBridge.png") no-repeat center bottom / contain; bottom: 0; margin-bottom: -40px; display: block; position: absolute;}

.key-benefits{background-color:#253A54; padding: 60px 0; border-bottom: solid 10px #CFDDE8}
.key-benefits h2{ color:#CFDDE8; text-align: center; margin-bottom: 30px}
.key-benefits .key-benefit{background: #fff; border-radius: 20px; padding: 25px; display: flex; height: 100%; flex-direction: column; }
.key-benefits .key-benefit .icon{ width:60px; height: 60px; background-size: contain; background-repeat: no-repeat; display: block; margin-bottom: 15px}
.key-benefits .key-benefit.directory .icon{background-image: url("img/directory.svg");}
.key-benefits .key-benefit.onboarding .icon{background-image: url("img/onboarding.svg");}
.key-benefits .key-benefit.financials .icon{background-image: url("img/financials.svg");}
.key-benefits .key-benefit.access .icon{background-image: url("img/security.svg");}

.key-benefits .key-benefit p:nth-of-type(1){color:#253A54; font-weight: 700;}
.key-benefits .key-benefit p:nth-of-type(2){ font-size: 16px;}
.key-benefits .container-fluid { max-width: 1600px;}
.leaderboard-bullets{ position:relative; margin-top: 30px; padding-left: 0; display: flex; flex-direction: column;}
.leaderboard-laptop {   width: 900px; max-width: 50vw; max-height: calc(100% + 107px); left:40px;  height: 460px; background: url("img/leaderboard.png") no-repeat center bottom / contain; bottom: 0; margin-bottom: -107px; display: block; position: absolute;}

.leaderboard-bullets li{ list-style:none; padding-left: 45px; position: relative; margin-bottom: 30px;}
.leaderboard-bullets li:nth-last-of-type(1){ margin-bottom:0;}
.leaderboard-bullets li .icon{color:#253A54; position: absolute; left: 0; top:50%; font-size: 26px; transform: translateY(-50%);}
.leaderboard { padding: 60px 0;}
.leaderboard .leaderboard-intro{ text-align: center}
.leaderboard .leaderboard-intro p:nth-of-type(1){ color:#253A54; font-weight:700; font-style: italic}

.leaderboard .leaderboard-intro .leaderboard-logo{width: 390px; max-width: 100%; height: 60px;   background: url("img/leaderboard.svg") no-repeat center / contain; display: block;  margin: -20px auto 10px auto;}

.bb-footer{padding: 60px 0; background-color:#253A54;}
.bb-footer .dlcg-logos{ display:flex; flex-direction: row; gap:60px; justify-content: center}
.bb-footer .dlcg-logos span{ background: no-repeat center / contain; display: block; width: 120px; height: 60px;}

.bb-footer .dlcg-logos .dlc{background-image: url("img/dlc-logo-white.svg");}
.bb-footer .dlcg-logos .mcc{background-image: url("img/mcc-logo-white.svg"); width: 200px;}
.bb-footer .dlcg-logos .ma{background-image: url("img/ma-logo-white.svg"); width: 180px;}
.bb-footer .dlcg-logos .newton{background-image: url("img/newton-logo-white.svg"); width: 180px;}

@media (max-width: 991px) {
	.top-section-bb p.intro{ position: relative; margin: 0 auto -20px auto; left:0}
	.top-section-bb .bb-logo{ margin: 0 auto}
	.top-section-bb .cta-bb{ margin: 0 auto}
	.top-section-bb .bb-desktop{ position: relative;
        right: 0;
        background-position: center bottom;
        max-width: 550px;
        max-height:320px;
        margin-bottom: -79px;
        margin: 40px auto -85px auto ;}
	.leaderboard{ padding-bottom:0;}
	.leaderboard-laptop{ position:relative; margin: 0 auto -27px auto; height: 290px;   order: 2; left:0;}
	
	.top-section-bb{ text-align: center;}
    .container-fluid {
        order: 1;
    }
	.bb-footer .dlcg-logos{ gap:30px;}
	.bb-footer .dlcg-logos .dlc{width: 130px;}
.bb-footer .dlcg-logos .mcc{width: 160px;}
.bb-footer .dlcg-logos .ma{width: 140px;}
.bb-footer .dlcg-logos .newton{width: 140px;}

}

@media (max-width: 767px) {
	.leaderboard-laptop {
        height: 250px;
       max-width: 420px;
}
	
	@media (max-width: 576px) {
		.leaderboard-laptop, .top-section-bb .bb-desktop{ max-width: 90vw}
		.bb-footer .dlcg-logos{ flex-direction: column; gap:0;  align-items: center}
	}