@charset "utf-8";
/* CSS Document */
body{
	margin: 0 auto;
	font-family: "Poppins", "sans-serif";
	font-size: 16px;

}
header{
			}

#logo {
	margin: 0 15px;
	z-index: 3;
	background-image: url(" ../images/thaenAmudhuLogo.png");
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: contain;
	width:200px;
	height: 220px;
	position: absolute;
}



/* The hero image */
.hero-image {
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url("../images/southIndian_meals.jpg");

  /* Set a specific height */
  height: 808px;

  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
	position: relative;
	}

/* Place text in the middle of the image */
.hero-text {
  text-align: center;
	position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

/* #container{
	width: 1320px;
	float: left;
}*/

footer{
	font-size: 1em;
  display: flex;
	padding: 20px 0 20px;
  align-items: center;
  justify-content: center;
	align-content:center;
	background: #144527;
	color: antiquewhite;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 5px; /* 5px rounded corners */
  margin: 20px 10px 0;
width: 260px;	
	height: 380px;
  float: left;
}

/* Add rounded corners to the top left and the top right corner of the image */
img {
  border-radius: 5px 5px 0 0;
}
.parallax {
  /* The image used */
  background-image: url(" ../images/momos.jpg");
  /* Set a specific height */
  min-height: 500px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
	color: white;
	  display: flex;

  justify-content: center;
  align-items: center;
}

.alacarte{
	background-image: url(" ../images/home delivery.png");
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: contain;
	min-height: 500px;
	padding: 20px 0;
}

.innerhead_about{
	background-image: url(" ../images/momos.jpg");
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: cover;
	min-height: 180px;
	padding: 20px 0;
	color: antiquewhite;
}

.innerhead_menu{
	background-image: url(" ../images/ingredients.jpg");
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: cover;
	min-height: 180px;
	padding: 20px 0;
	color: antiquewhite;
}

h1{
	
	margin-top: 30px;
	margin-bottom: 10px;
}
h4{
	margin-top: 20;
	margin-bottom: 20;
	font-weight: bold;
}

h3{font-size: 22px;}
p{font-size: 14px;}

p{
	margin-bottom: 30px;
	text-align: justify;
}
/* Bootstrap override */

.nav{
	margin-top: 20px;
	colour:#144527;
}
.navbar {
    font-family: Montserrat, sans-serif;
    margin-bottom: 0;
	}

.nav{
	margin-top: 20px;
	
}
.navbar-brand{
	background-image: url(" ../images/");
		background-repeat: no-repeat;
	background-position: bottom;
	background-size: contain;
	width:144px;
}

.nav li{
	background-color: #f8f8f8;
	text-align: center;
	
}
.navbar-nav a{
	color: #144527;
}

.address {margin-left: 20px;}
.social a{ 
	color:#F1AE4A;
	padding: 5px;
}

i{ 
	color:#F1AE4A;
}

.navbar-default{
	border: inherit;
}

.carousel-caption{top:45%;}

.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#25D366;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #496B54;
	padding: 10px 0;
	z-index: 1;
}

.btn-primary{
	color: #144527;
    background-color: #FFE2B7;
    border-color: #F1AE4A;
	margin-bottom: 30px;
float: right;	
}
.btn-primary:hover{
	color: #144527;
    background-color: #F1AE4A;
	
}
.btn-primary:focus{
	color: #144527;
    background-color: #F1AE4A;
	
}

.my-float{
	margin-top:22px;
}
.card{min-height: 405px;
	padding: 10px;
}

 @media (max-width: 600px) {
    .carousel-caption {
		display: none;} /* Hide the carousel text when the screen is less than 600 pixels wide */
	 
	 #logo {width: 110px;
	 height: 110px;}
    }