@charset "UTF-8";
/* CSS Document */

/* Headline: font-family: 'Montserrat', sans-serif;
Paragraph: font-family: 'IBM Plex Serif', serif;
*/

/* Colors palette:
yellow: #FCD961
black: #000000
chocolate: #643C2F
white: #f5f3ee
dark gray: #333333
light gray: #808080
beige: #F0EBD1
mustard: #BB9441

#F4F0D9
*/

/* General information */
body {font-family: 'IBM Plex Serif', serif;
	  background-color: #F4F0D9;}
h1, h2, h3, h4, h6{font-family: 'Montserrat', sans-serif;}
h5 {font-family: 'Satisfy'}
p {font-family: 'IBM Plex Serif', serif;
	padding:10px;}
.navbar-custom {font-family: 'Montserrat', sans-serif;}

/* Background color for navbar and dropdown menus */
.navbar-custom, .navbar-custom .dropdown-menu
	{background-color:  #F4F0D9;}

/* Text color for navbar and dropdown menus */
.navbar-custom .navbar-brand, .navbar-custom .navbar-text,
.navbar-custom .navbar-nav .nav-link,
.navbar-custom .dropdown-item
	{color: rgba(0,0,0,1.00);}

/* Background and text colors for current page link and links on hover and focus */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .dropdown-item:hover, 
.navbar-custom .dropdown-item:focus
	{background-color: rgba(187,148,65,1.00);
	color:  #F4F0D9;
	font-size: medium;
	border-radius: 20px;}

/* Border and text colors for menu icon on small screens */
.custom-toggler.navbar-toggler
	{color: #000000;
	 background-color: #F4F0D9;}

/* Hamburger icon - use same rgb values as previous rule for stroke */
.custom-toggler .navbar-toggler-icon
	{background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='187 148 65 1.00' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0,1.00)' stroke-width='4.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
	 border-radius: 20px;
	 color:#000000;}

/*navbar-brand logo*/
 .navbar-brand 
	{padding-left: 40px;
	 font-weight: 1000;}

.jumbotron {background: #F0EBD1;}

#banner {padding-left: 0px;
		padding-right: 0px;
		position: relative;}

#banner h1 {position: absolute;
			color: #FDD863;
			text-shadow: 3px 3px 6px #908F8D;
			font-size: 3.5rem;
			bottom: 2%;
			right: 1%;
			text-align: right;}

#highlights {text-align: center;}

#action {background-color: #F0EBD1;
		 border-radius: 20px;}

#acticles {padding: 20px 0;}

#marketing {padding:20px 0;
	 		text-align:center;}

#featurette {text-align: center;
			 display:flex;}

.contact_banner {padding-left: 0px;
				 padding-right: 0px;
				 background:#F0EBD1 url("../images/contactbanner.jpg")no-repeat center center;}

.contact_side {padding: 30px;}


.featurette-divider {margin: 5rem 0;} 
.featurette-heading {padding-top: 10px;
					 font-weight: 500;
					 line-height:1;
					 letter-spacing: .03rem;}

h2 {font-weight:800;
	color: #000000;
	text-align:center;}

h4 {color:#643C2F;
	font-weight: 700;
	text-align:center;}

h3 {font-weight: 800;
	color: #643C2F;
    text-align:center;}

h5 {color: #000000;
	font-weight: 400;}

h6 {color:#f5f3ee;}

#foot {text-align:center;
	   background:#F0EBD1;
	   color:#000000;
       font-family: 'Montserrat', sans-serif;}

.btn {font-family: 'Montserrat', sans-serif;
	  background-color: #F0EBD1;
	  font-weight:600;
	  border-radius: 20px;}

/*Media Query starts*/
@media screen and (min-width:440px)
{#banner h1 {font-size: 1em;}}


@media screen and (min-width:576px)
{#banner h1 {font-size: 1em;
    		 bottom: 2%;
			 right: 1%;}}

@media screen and (min-width:768px)
{#banner h1 {font-size: 1.5em;
    		 bottom: 2%;
			 right: 1%;}}

@media screen and (min-width:960px)
{#banner h1 {font-size: 1.5em;
    		 bottom: 2%;
    		 right: 1%;}}

@media screen and (min-width:1200px)
{#banner h1 {font-size: 3em;
    		 bottom: 2%;
    		 right: 1%;}}