/**********************************************************************
VARIABLES
***********************************************************************/

:root {
  --main-color: #5588cc;
}

:root {
  --secondary-color: #fff;
}



/**********************************************************************
DEFAULTS
***********************************************************************/

body
{
    font-family: Helvetica, Sans-Serif!important;
}

.bg-main-color {
	background-color: var(--main-color)!important;
}

.btn-main-color {
	background-color: var(--main-color)!important;
	color: #fff!important;
}

.btn-main-color:hover {
	opacity: .8!important;
	color: #ccc!important;
}

.bg-secondary {
	background-color: #7b8fab!important;
}

.btn-secondary {
	background-color: #343a40!important;
	color: #fff!important;
}

.btn-secondary:hover {
	opacity: .8!important;
	color: #ccc!important;
}



/**********************************************************************
HEADER
***********************************************************************/

.custom-logo {
	width: auto;
	height: 80px;
}

.navbar {
	box-shadow: 0 3px 8px -2px rgba(0,0,0,.2);
}

.menu-item {
	font-size: 1.2rem;
	padding-left: .5rem;
}

.menu-item a {
	float: right;
}

.nav-link {
	padding: 0;
}

.navbar-light .navbar-nav .active>.nav-link {
	color: rgba(85,136,204,1); 
	border-bottom: solid 2px rgba(85,136,204,1);
}

.navbar-light .navbar-nav .nav-link {
    color: rgba(85,136,204,.7);
}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    color: rgba(85,136,204,1);
}

.navbar-light .navbar-toggler {
    color: rgba(0,0,0,.5);
    border-color: rgba(0,0,0,.5);
}

.navbar-toggler-icon {
    width: 2rem;
    height: 2rem;
}

@media (max-width: 768px) {
	.navbar .container-fluid {
		padding: 0 .5rem!important;
	}
	.nav-link {
		padding: .5rem 1rem;
	}
	.navbar-light .navbar-nav .active>.nav-link {
		border-bottom: none;
	}
}


/**********************************************************************
HERO
***********************************************************************/

.jumbotron {
	padding: 0!important;
}

.hero {
	height: 600px;
}

.hero-text {
	padding-top: 210px;
}

.herooverlay {
	width: 100%;
  	height: 600px;
  	background-color: rgba(0,0,0,0.7);
  	z-index: 2; 
}

.hero-p {
	font-size: 1.5rem!important;
}

.hero2 {
	height: 300px;
}

.herooverlay2 {
	width: 100%;
  	height: 300px;
  	background-color: rgba(0,0,0,0.5);
  	z-index: 2; 
}

.hero-text2 {
	padding-top: 120px;
}

.display-1 {
	font-weight: 500;
}

@media (max-width: 1024px) {
	.hero-text {
		padding-top: 150px;
	}
}

@media (max-width: 992px) {
	.hero2 {
		height: 200px;
	}

	.herooverlay2 {
	  	height: 200px;
	}
}

@media (max-width: 600px) {
	.hero-text {
		padding-top: 70px;
	}
	.display-1 {
		font-size: 3.6rem;
	}
	.hero-p {
		font-size: 1.3rem!important;
	}
	.hero {
		height: 400px;
	}
	.herooverlay {
	  	height: 400px;
	}
	.hero2 {
		height: 120px;
	}

	.herooverlay2 {
	  	height: 120px;
	}
}

/**********************************************************************
ABOUT
***********************************************************************/

.about-text {
	line-height: 1.8;
}

/**********************************************************************
PORTFOLIO
***********************************************************************/

.entry-title a {
	color: #212529;
}

.entry-title a:hover {
	color: rgba(36, 37, 41, 0.6);;
	text-decoration: none;
}

.wp-block-separator.is-style-wide {
	border-color: rgba(33, 37, 41, 0.5);
}

.portfolio-item img {
	border: solid 1px #c7c7c7;
}

@media (max-width: 1200px) {
	.entry-title a {
		font-size: 1.8rem;
	}
}

/**********************************************************************
CLIENTS
***********************************************************************/

.testimonials  p {
	font-size: .9rem!important;
	margin-bottom: .4rem;
}

/**********************************************************************
PRICING
***********************************************************************/

.pricing img.wp-post-image {
    width: auto;
    height: 200px;
}

.pricing .card-header {
	background-color: transparent;
	margin-bottom: 20px;
	border-bottom: 1px solid rgba(255,255,255,.5);
	margin-bottom: 5px;
}

.bg-price {
	background: var(--main-color);
	color: #fff!important;
	border-radius: 25px;
}

.pricing .card-body {
	font-size: 1.2rem;
}

.pricing .card-body h2 {
	font-size: 2rem;
	font-weight: bold;
}


/**********************************************************************
BLOG
***********************************************************************/

.widget li a, .type-post a {
	color: #212529;
}

.widget li a:hover, .type-post a:hover {
	color: rgba(36, 37, 41, 0.6);;
	text-decoration: none;
}

/**********************************************************************
CONTACT
***********************************************************************/

.field-wrap input[type=button] {
	width: 30%!important;
}

@media (max-width: 768px) {
	.contact-form-cont {
		padding: 0 1rem!important;
	}
	.contact-message-cont {
		padding: 0 1rem!important;
		margin: 0 !important;
	}
}

/**********************************************************************
FOOTER
***********************************************************************/

.site-footer a {
	color: #fff;
	text-decoration: none;
}

.site-footer a:hover {
	opacity: .8;
	text-decoration: underline;
}

.btt {
	margin-top: -50px;
	font-size: 2rem;
	border-radius: 50%;
	height: 50px;
	width: 50px;
}