/* header / footer section start */

.sticky {
  position: fixed !important;
  top: 0 !important;
}

.navbar {
	background-color: white;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 9998;
	padding: 5px;
}

.logo-img {
	width: 100px;
}

.logo-img-small {
	width: 50px;
}

.curveSVG {
	display: none;
}

.link {
	color: black;
	text-decoration: none;
	font-weight: bold;
}

.link {
	margin: 0px 10px;
}

.curveContainer {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
}

.header-links {
	display: none;
	font-size: 20px;
	font-family: system-ui;
	transition-duration: 0.5s;
}

.account-img {
	height: 40px;
	margin-right: 10px;
}

.sidenav {
	height: 100%;
	position: fixed;
	left: 0;
	width: 0;
	background-color: #d1262a;
	overflow-x: hidden;
	transition: 0.5s;
	padding-top: 60px;
	top: 0;
	right: 25px;
	font-size: 36px;
	z-index: 9999;
	white-space: nowrap;
}

.sidenav a {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 25px;
	color: white;
	display: block;
	transition: 0.3s;
}

.sidenav a:hover {
	color: black;
}

.background-cover {
	background-color: #00000055;
	height: 100%;
	position: fixed;
	z-index: 9998;
	top: 0;
}

.closebtn {
	position: absolute;
	top: 0;
	right: 25px;
	font-size: 36px;
	margin-left: 50px;
}

.footer { 
	border: 1px solid white; 
	background-color: white; 
	margin-top: 30px;
	justify-content: space-around;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.col-separate {
	width: 100%;
}

.col-separate-lg {
	display: none;
	width: 0px;
	height: 170px;
	border-right: 1px solid black;
}

.link, .footer-link {
	color: black;
	text-decoration: none;
	transition-duration: 0.2s;
}

.trbssLink:hover {
	/* I added this on:hover. I thought it'd fit more than the blue colour it was before */
	color: #d1262a;
	font-weight: 700;
}

.smbssLink:hover {
	/* I added this on:hover. I thought it'd fit more than the blue colour it was before */
	color: #00b0c9;
	font-weight: 700;
}

.all-site-links {
	font-size: 16px;
	line-height: 30px;
}

#laptopImg {
	width: 100%;
	max-width: 500px;
}

.business-info {
	padding: 10px 0px 10px 0px;
	max-width: 390px;
	line-height: 13px;
	font-size: 11px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.site-map {
	width: 10%;
	text-align: left; 
	padding-top: 10px;
	display: none;
	padding-bottom: 10px;
	padding-left: 10px;
}

.site-map-text {
	margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--bs-heading-color);
}

.company-info-text {
	margin-left: 10px;
	text-align: center;
	font-size: 9px;
	line-height: 12px;
}

.ABSSG-col {
	font-size: 11px;
	display: flex;
	align-items: center;
	padding: 0px 0px 10px 0px;
}

.ABSSG-text {
	max-width: 250px;
	padding: 0px 5px;
}

.business-info {
	padding: 10px 0px 10px 0px;
}

/* header section end */

/* Landing section (top section) start */

#landing-section {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 300px;
	position: relative;
}

.smbssHeaderBG, .swbssHeaderBG {
	background-image: url("../images/home/smbss/MOBILE SMBSS HEADER.webp");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 75%;
}

.trbssHeaderBG {
	background-image: url("../images/home/trbss/MOBILE TRBSS HEADER.webp");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 75%;
}

#landing-style {
	position: relative;
	padding-top: 45px; 
	padding-left: 0px;
	margin: 0 auto;
	text-align: center;
	color: white;
}

#motto {
	font-size: 19px;
	font-weight: bold;
	margin-bottom: 0px;
	padding: 0% 2%;
}

.hide-mob {
	display: none;
}

.systemText {
	font-size: 17px;
	margin: 20px 0px 40px 0px;
	padding: 0% 2%;
}

.interested {
	font-size: 20px;
	margin: 20px 0px 15px 0px;
}

.more-button {
	border-radius: 10px;
	width: 245px;
	height: 35px;
	background-color: #d0292a;
	color: white;
	border: 0px;
	cursor: pointer;
	font-size: 15px;
	font-weight: bold;
}

/* Landing section (top section) end */

/* body styles start */

.main-body {
	width: 100%; 
	height: fit-content;
	text-align: -moz-center;
	text-align: -webkit-center;
	padding-top: 20px;
}

.body-style {
	margin: 0;
	font-family: arial;
	background-color: #f0e0e0;
}

.body-cont {
	width: 100%;
}

/* body styles end */

/* various bg colours start */

.trbssBG {
	background-color: #f0e0e0;
}

.smbssBG, .swbssBG {
	background-color: #e9f0f6;
}

.trbssDarkBG {
	background-color: #d0292a;
}

.smbssDarkBG, .swbssDarkBG {
	background-color: #00b0c9;
}

/* various bg colours end */

/* 3 column row (save time etc) start */

.benefits-cont {
	display: flex;
	justify-content: space-between;
}

.benefitHeader {
	font-size: 18px;
	font-weight: bold;
	margin: 0px;
}

.business-benefits {
	background-color: white;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	width: 100%;
	padding: 30px 10px;
}

.benefit-cont {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	margin: 3px 0px;
	width: 240px;
}

.benefit-icon {
	height: 70px;
}

.arrow {
	border-width: 0 3px 3px 0;
	display: inline-block;
	padding: 6px;
	color: black;
	border-style: solid;
	border-color: black;
}

.right {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	position: absolute;
	top: 45%;
	right: 10px;
}

.left {
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	position: absolute;
	top: 45%;
	left: 10px;
}

.left-button {
	float: left;
}

.right-button {
	float: right;
}

.left-button, .right-button {
	background-color: unset;
	border: 0px;
}

.carousel-inner {
	background-color: white;
	padding-top: 10px;
	position: relative;
}

.carousel-item {
	width: 100%;
	display: none;
}

.active {
	display: block;
}

.caro-benefit-text {
	width: 220px;
}

.active, .carousel-item-next {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.benefits-row {
	justify-content: space-between;
}

/* 3 column row (save time etc) end */

/* dreams row start */

.dreams {
	width: 100%; 
	color: white;
	background-color: #380000;
	background-image: url("../images/platform/All in 1 Graphic.webp");
	background-repeat: no-repeat;
	background-size: cover;
	height: 300px;
	background-position: 30%;
}

.dreams-header {
	font-weight: bold;
	font-size: 18px;
}

.dreams-text {
	width: 265px;
	padding-top: 10px;
}

/* dreams row end */

.journey-img {
	width: 100%;
	height: 100%;
}

.row {
	--bs-gutter-x: 0px;
	margin-top: 30px;
	justify-content: space-between;
}

.fadeinMoveup {
	animation: fadeinMoveup 1.5s both;
}

.fadein {
	animation: fadein 1.5s both;
}

.fadeinMoveleft {
	animation: fadeinMoveleft 1.5s both;
}

.fadeinMoveright {
	animation: fadeinMoveright 1.5s both;
}

.hamburg-btn {
	font-size: 33px; 
	cursor: pointer; 
	width: 50px; 
	height: 50px; 
	text-align: center;
	z-index: 1111;
}

.getStartedTitle {
	font-size: 29px;
}

.startedSubtitle {
	font-size: 18px;
	margin: 8px 0px 2px 0px;
}

#how-it-works {
	background-color: white;
	padding: 20px 0px;
}

.number-img {
	width: 100px;
	margin-top: 15px;
}

.fiftyOff {
	width: 70px;
	position: absolute;
	top: 0;
	right: 50px;
}

.columns-cont {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
}

.works-column {
	width: 230px;
	margin: 0 auto;
	position: relative;
}

.action-line-break {
	color: maroon;
	width: 90%;
}

.row-title {
	font-size: 20px;
	font-weight: bold;
	padding: 10px 0px;
}

#journey-row {
	position: relative;
	margin-bottom: 50px;
}

#brianAreas {
	width: 250px;
}

.business-text {
	margin: 0px;
}

.leftText {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.discoverHeader {
	font-size: 20px;
	margin-bottom: 0px;
	width: 270px;
}

.brian-speech {
	margin: 5px 5px 0px 5px;
	border-radius: 10px;
	position: relative;
	font-size: 14px;
	width: 250px;
	padding: 5px 0px;
	z-index: 1000;
}

.buyNow {
	position: absolute;
	bottom: -30px;
	left: 19%;
	width: 62%;
	background-color: white;
	border: 1px solid black;
	border-radius: 10px;
	font-weight: bold;
	padding: 3px 0px;
	cursor: pointer;
	-webkit-text-fill-color: black;
}

.column{
	background-color: white;
	padding: 20px;
}

@keyframes fadein {
	0%		{opacity: 0;}
	100%	{opacity: 1;}
}

@keyframes fadeinMoveup {
	0%		{opacity: 0; transform: translateY(30%);}
	100%	{opacity: 1; transform: translateY(0%);}
}

@keyframes fadeinMoveleft {
	0%		{opacity: 0; transform: translateX(30%);}
	100%	{opacity: 1; transform: translateX(0%);}
}

@keyframes fadeinMoveright {
	0%		{opacity: 0; transform: translateX(-30%);}
	100%	{opacity: 1; transform: translateX(0%);}
}

@media screen and (max-height: 450px) {
	.sidenav {padding-top: 15px;}
	.sidenav a {font-size: 18px;}
}

@media (min-width: 768px) and (max-width: 1199px) {
	#landing-style {display: flex; flex-direction: column; align-content: center; align-items: center; padding: 0px;}
}

@media (min-width: 450px) {
	#motto {font-size: 30px;}
	#landing-section {height: 400px; padding-top: 50px; background-position: 80%;}
	.benefitHeader {font-size: 6vw;}
	.benefit-text {font-size: 4vw;}
	.benefit-cont {width: 340px;}
	.systemText, .interested {font-size: 25px;}
	.arrow {padding: 12px; border-width: 0px 6px 6px 0px;}
	.dreams-header {font-size: 19px;}
	.dreams-text {float: right; text-align: right; margin-right: 10px;}
	.company-info-text {font-size: 13px; line-height: unset;}
	.speech-bubble {width: 360px;}
	.brian-speech {width:350px; font-size: 16px;}
	.business-info {flex-direction: row; font-size: 13px; line-height: unset;}
	.logo-img {width: 120px;}
	.ABSSG-text {font-size: 14px; max-width: 260px;}
	.discoverHeader {font-size: 24px;}
	#brianAreas {width: 360px;}
	.buyNow {left: 25%; width: 50%; font-size: 17px; padding: 4px 0px;}
}

@media (min-width: 576px) {
	.dreams {height: 350px;}
	.dreams-text {font-size: 17px;}
	.hide-mob{display: block}
	.benefitHeader {font-size: 32px;}
	.benefit-text {font-size: 22px;}
	.action-plan-text {font-size: 20px;}
	.systemText {font-size: 30px;}
	.fiftyOff {width: 90px; right: 20px;}
	.number-img {width: 160px; margin-top: 0px;}
	.carousel-inner {font-size: 22px;}
	.caro-benefit-text {width: 370px;}
	.brian-speech {width:410px; font-size: 18px;}
	.buyNow {left: 30%; width: 40%;}
}

@media (min-width: 768px) {
	#landing-section {padding-top: 200px;}
	#motto {font-size: 44px;}
	.systemText {font-size: 33px;}
	.interested {font-size: 30px;}
	.row-title {font-size: 26px;}
	.more-button {width: 360px; font-size: 22px; height: 45px;}
	.benefitHeader {font-size: 22px;}
	.benefit-text {font-size: 14px;}
	.benefit-cont {margin: 0px; height: 200px;}
	.business-benefits {flex-direction: row; border-radius: 30px;}
	.dreams {height: 420px; border-radius: 30px;}
	.dreams-header {font-size: 23px;}
	.dreams-text {width: 320px; font-size: 20px; padding-top: 25px;}
	#how-it-works {border-radius: 30px;}
	.columns-cont {flex-direction: row;}
	.company-info-text {text-align: left; width: 580px;}
	.footer {flex-direction: row; text-align: left;}
	.logo-img {width: 130px;}
	.logo-img-small {width: 100px;}
	.carousel {display: none;}
	#journey-row {display: flex; justify-content: space-evenly; align-items: center;}
	#brianAreas {width: 350px;}
	.discoverHeader {margin: 0px; padding-left: 15px; text-align: left; width: unset;}
	.brian-speech {text-align: left;}
	.brian-speech {padding: 10px; width: 340px; font-size: 15px;}
	.col-separate {display: none;}
	.col-separate-lg {display: block;}
	.ABSSG-col {padding: 10px 0px;}
	.ABSSG-text {max-width: 200px; width: 200px; padding: 0px 5px 0px 10px;}
	.leftText {align-items: flex-start;}
	.business-info {max-width: unset; padding-right: 5px;}
	.business-text {padding: 0px 5px;}
	.buyNow {position: unset; width: 220px; margin-top: 20px;}
	#journey-row {margin-bottom: unset;}
}

@media (min-width: 768px) and (max-width: 991px) {
	.row {max-width: 740px; width: 740px;}
	.benefit-cont {width: 220px;}
}

@media (min-width: 992px) {
	.body-cont {width: 90%;}
	.account-img {height: 80px;}
	.trbssText:hover {color: #d0292a;}
	.smbssText:hover, .swbssText:hover {color: #00b0c9;}
	.row-title {font-size: 32px;}
	.benefit-cont {justify-content: flex-start; align-items: flex-start; width: 275px; height: 175px;}
	.benefitHeader {margin-top: 10px;}
	.benefit-text {text-align: left; font-size: 16px;}
	.dreams {height: 490px;}
	.dreams-header {font-size: 32px;}
	.dreams-text {width: 440px; font-size: 22px; padding-top: 45px;}
	.worksHeader {margin-bottom: 100px; text-align: left;}
	.fiftyOff {width: 125px; right: -40px; top: -85px;}
	.number-img {width: 200px; margin-top: -100px;}
	.works-column {font-size: 17px;}
	.header-links {display: flex;}
	.hamburg-btn {display: none;}
	.site-map {display: block; width: 200px;} 
	.business-info {line-height: 19px;}
	.business-text, .ABSSG-text {font-size: 15px;}
	#brianAreas {width: 100%; max-width: 500px;}
	#business-name {font-size: 19px;}
	#journey-row {display: flex; justify-content: space-around;}
	.company-info-text {font-size: 15px; line-height: 19px;}
	.discoverHeader {font-size: 26px;}
	.brian-speech {width: 440px; font-size: 19px;}
	.buyNow {width: 330px; padding: 6px 0px; width: 330px;}
	.logo-img {width: 150px;}
}

@media (min-width: 1200px) {
	#landing-style {padding-top: 0px; padding-left: 3%; text-align: left; color: black;}
	#landing-section {height: 530px; margin-top: 85px; padding-top: 150px; background-position: 42%;}
	.smbssHeaderBG, .swbssHeaderBG {background-image: url("../images/home/smbss/SMBSS HEADER.webp")}
	.trbssHeaderBG {background-image: url("../images/home/trbss/Header Updated.webp")}
	#motto {margin-top: 0px;}
	.systemText, #motto {padding: 0px;}
	.systemText {font-size: 26px; width: 340px;}
	.arrow {border-width: 0px 12px 12px 0px; padding: 24px;}
	.dreams-text {width: 630px; font-size: 23px; padding-top: 65px;}
	.company-info-text {width: 800px;}
	.all-site-links {font-size: 20px;}
	.site-map-text {font-size: 1.75rem;}
	.business-text, .ABSSG-text {font-size: 18px; line-height: 29px;}
	#motto {width: 350px; font-size: 42px;}
	.brian-speech {width: 520px; line-height: 27px;}
	.buyNow {width: 280px;}
}

@media (min-width: 1400px) {
	.main-body {width: 1200px; margin: 0 auto;}
	#landing-section::before {background-position: 30%;}
	#motto {width: 400px; font-size: 49px;}
	.systemText {width: 480px;}
	.company-info-text {width: 1000px;}
	.ABSSG-text {max-width: 250px; width: 250px;}
}

@media (max-width: 767px) {
	#landing-section {margin-top: 25px;}
}

@media (max-width: 400px) {
	.column {padding: 5px;}
	.action-plan {height: 450px;}
}