/******************************************************************************
 *
 * File........: app.css
 *
 * Description.: Main Stylesheet
 *
 * Project.....: Business Broker Website
 *
 * Version.....: 1.00
 *
 * Author......: biz brokerNJPA / ChatGPT
 *
 ******************************************************************************/

/******************************************************************************
 *
 * Global
 *
 ******************************************************************************/

html
{
	scroll-behavior: smooth;
}

body
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.6;

	color: #343A40;
	background-color: #F8F9FA;

	margin: 0;
	padding: 0;
}

/******************************************************************************
 *
 * Typography
 *
 ******************************************************************************/

h1,
h2,
h3,
h4,
h5,
h6
{
	font-weight: 700;
	color: #0B3C5D;
	margin-bottom: 1rem;
}

p
{
	margin-bottom: 1rem;
}

a
{
	text-decoration: none;
}

a:hover
{
	text-decoration: none;
}

/******************************************************************************
 *
 * Bootstrap Overrides
 *
 ******************************************************************************/

.btn-primary
{
	background-color: #0B3C5D;
	border-color: #0B3C5D;
}

.btn-primary:hover
{
	background-color: #328CC1;
	border-color: #328CC1;
}

.btn-outline-primary
{
	color: #0B3C5D;
	border-color: #0B3C5D;
}

.btn-outline-primary:hover
{
	background-color: #0B3C5D;
	color: #FFFFFF;
}

/******************************************************************************
 *
 * Navigation
 *
 ******************************************************************************/

.navbar
{
	padding-top: .80rem;
	padding-bottom: .80rem;

	box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.navbar-brand
{
	font-size: 1.50rem;
	font-weight: bold;
	color: #0B3C5D;
}

.nav-link
{
	font-weight: 600;
}

/******************************************************************************
 *
 * Hero Section
 *
 ******************************************************************************/

.hero
{
	background: linear-gradient(rgba(11,60,93,.75), rgba(11,60,93,.75)),
		url("../images/hero.jpg");

	background-size: cover;
	background-position: center;

	color: #FFFFFF;

	padding: 120px 0;
}

.hero h1
{
	color: #FFFFFF;
	font-size: 3rem;
	font-weight: bold;
}

.hero p
{
	font-size: 1.25rem;
	margin-bottom: 2rem;
}


/******************************************************************************
 *
 * Cards
 *
 ******************************************************************************/

.card
{
	border: none;
	border-radius: 12px;

	box-shadow: 0 5px 15px rgba(0,0,0,.08);

	transition: .25s;
}

.card:hover
{
	transform: translateY(-4px);

	box-shadow: 0 10px 20px rgba(0,0,0,.15);
}

/******************************************************************************
 *
 * Featured Listings
 *
 ******************************************************************************/

.featured-business
{
	margin-bottom: 30px;
}

/******************************************************************************
 *
 * Sections
 *
 ******************************************************************************/

.section
{
	padding: 70px 0;
}

.section-light
{
	background-color: #FFFFFF;
}

.section-gray
{
	background-color: #F8F9FA;
}

/******************************************************************************
 *
 * Call To Action
 *
 ******************************************************************************/

.cta
{
	background-color: #0B3C5D;
	color: #FFFFFF;
	padding: 70px 0;
	text-align: center;
}

.cta h2
{
	color: #FFFFFF;
}

/******************************************************************************
 *
 * Footer
 *
 ******************************************************************************/

footer
{
	background-color: #212529;
	color: #FFFFFF;

	padding: 40px 0;
}

footer a
{
	color: #FFFFFF;
}

footer a:hover
{
	color: #D9B310;
}

/******************************************************************************
 *
 * Utility Classes
 *
 ******************************************************************************/

.text-gold
{
	color: #D9B310;
}

.bg-blue
{
	background-color: #0B3C5D;
}

.bg-light-gray
{
	background-color: #F8F9FA;
}

/******************************************************************************
 *
 * Responsive
 *
 ******************************************************************************/

@media (max-width: 991px)
{
	.hero
	{
		padding: 80px 0;
	}

	.hero h1
	{
		font-size: 2.25rem;
	}
}

@media (max-width: 767px)
{
	.hero
	{
		text-align: center;
	}

	.hero h1
	{
		font-size: 2rem;
	}
}


/******************************************************************************
 *
 * Hero Logo
 *
 ******************************************************************************/

.hero-logo
{
	max-width: 350px;
	margin-bottom: 25px;
}




/******************************************************************************
 *
 * End of File
 *
 ******************************************************************************/