@charset "UTF-8";
/*CSS Document */
/*headline: font-family: "Poppins", serif;
paragraph: font-family: "Roboto", serif;
*/
body 
  {
    font-family: Roboto;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
	background-color: #FAF9F6;
}
h1, h2, h3, h3, h4, h6 
{
    font-family: Poppins;
    font-weight: bold;
    font-style: normal;
    text-align: center;
}
.navbar-custom
  {font-family: "Roboto", serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;}
/*Color pallete:
Spring wood: #FAF9F6
Bianca: #FCFAF4
White: #FFFFFF
*/

/* Background color for navbar and dropdown menus */
.navbar-custom, .navbar-custom .dropdown-menu {
    background-color: #FCFAF4;
	box-shadow: 0 0px 16px -2px rgba(112,144,176,0.33);
}
/* 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: #000000;
}
/* Background and text colors for current page link and links on hover and focus */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-itemhover .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .dropdown-item:hover, 
.navbar-custom .dropdown-item:focus {
    background-color: #F8F4E9;
    color: #000000;
}
/* Border and text colors for menu icon on small screens */
.custom-toggler.navbar-toggler {
    border-color: rgba(0,0,0,1.00);
    color: rgba(11,0,0,1.00);
}
/* 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='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0,1.00)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

/*navbar-brand logo*/
.navbar-brand 
    {
    background-image: url("../images/Studio k Logo.svg");
    background-repeat: no-repeat;
    background-size: 88px auto;
    background-position: 6px center;
    padding-left: 70px;
    padding-bottom: 23px;
    padding-right: 35px;
}

/*header banner section*/
#home_banner {
	padding-left: 0px;
    padding-right: 0px;
	position: relative;
}

#home_banner h1 {
	font-size: 4rem;
	color: #FFFFFF;
	text-shadow: 2px 1px rgba(71, 71,71,0.68);
	position: absolute;
	left:3%;
	bottom:7%;}

footer {text-align: center;
	line-height: 60px;
	background-color: #f6f3ea;
	color: #000000;}

/*carousel*/
.carousel1{
	padding-left: 0px;
	padding-right: 0px;}

.carousel-control-next-icon,
.carousel-control-prev-icon {
  filter: invert(1);
}

.carousel-indicators{
  filter: invert(1)!important;
}
/*jumbotron*/
.jumbotron{
	background: #fcfaf4;
	box-shadow: 0 0px 16px -2px rgba(112,144,176,0.33);}

/*hello caosel overlay*/
.carousel-caption 
{bottom: 180px;
padding-left: 100px;
padding-right: 100px;}

.carousel-caption h3 {
	font-size: 250px
}

.card {
	background-color: #FAF9F6;
}

.contact_side {background: url("../images/email_pic.png") no-repeat center center;
  background-size: 500px;
    padding: 0;
    height: 540px;
	}

.btn { border: none;
	background-color:white!important;
  border-radius: 15px;
  color: black !important;
font-weight: bold;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 4px 2px;
  cursor: pointer;
  box-shadow: 0 0px 16px -2px rgba(112,144,176,0.33),0 0px 16px -2px rgba(112,144,176,0.33);}

.badge {background-color: #e9dec8;
color: black;
font-weight: bold;
}

.progress-bar {background-color: #e9dec8;
color: black;
font-weight:600;
}

/*Media Query Breakpoints*/
/*X-SMALL SIZE ONLY*/
@media screen and (min-width:375px){
#home_bg h1 {
    font-size: 1rem;
    bottom: 3%;
    left: 3%;
    }    
}

/*home page cards*/

/*SMALL SIZE ONLY*/
@media screen and (min-width:576px){
#home_bg h1 {
    font-size: 1rem;
    bottom: 3%;
	left: 3%;
	} 
}

/*MEDIUM SIZE ONLY*/
@media (min-width: 768px) {
  #home_bg h1 {
	  font-size: 2rem;
      bottom: 5%;
      left: 3%;
              }
  }
/*LARGE SIZE ONLY*/
@media screen and (min-width:992px){
    #home_bg h1 {
        font-size: 3rem;
        bottom: 5%;
        left: 3%;
        }
}