/* importing fonts  */
/*  */

@import url("https://fonts.googleapis.com/css2?family=Syne&display=swap");



/* -------styling for all pages---------------- */

/* img{
  max-width: 100%;
} */

.padding {
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 2%;
  padding-bottom: 2%;
}

.responsive {
  width: 100%;
  height: auto;
}


body {
  background-color: #ffffff;
  font-family: 'Syne', sans-serif;

}


h4 {
  color: #3D405B;
}

#logo {
  font-family: 'Syne', sans-serif;
  color: #81B29A;
  font-size: xx-large !important;
}

.navbar {
  font-family: 'Syne', sans-serif;
}

.navbar-custom {
  background-color: #F4F1DE;
}

.navbar-nav {
  background-color: #F4F1DE;
}

.navbar-brand {
  padding-left: 5%;
  background-color: #F4F1DE;
}

.nav-link {
  font-family: 'Syne', sans-serif;
  color: #003049 !important;
}

.navbar-nav {
  padding-right: 20% !important;
}

.navbtn {
  color: #ffffff;
  background-color: #E07A5F;
  margin-right: 5px;
  border-radius: 10px;
  text-align: center;
}

.custom-toggler.navbar-toggler {
  border-color: #E07A5F;
  border-width: 2px;
}

footer {
  color: #81B29A;
  background-color: #F4F1DE;
  margin-bottom: 0;
  width: 100%;
  overflow: hidden;
}

.active {
  color: #E07A5F !important;
}

/* index page styling */

header {
  position:relative;
  height: 75vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
} 

header img {
  position: absolute;
  min-width: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
  top: -300px;

}

.smallerheader {
  height: 25vh;
  min-height: 10rem;
} 


input[type=text] {
  background-color: #F4F1DE;
  border: 10px #81B29A;
  border-radius: 35px;
  text-align: center;
  border-width: 2px;

}

label {
  color: #81B29A;

}

.searchby {
  background-color: #F2CC8F;
}

#searchby {
  padding: 10px;
}


header .container {
  position: relative;
  z-index: 2;
}

.btn-custom {
  color: #ffffff;
  background-color: #E07A5F;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  text-align: center;
}

/* search results page */

.left {
  display: block;
  float: left;
}

.right {
  display: block;
  float: right;
}

/* Product pages css */

.productimage {
  max-width: 10vw;
  border-radius: 35px;
  display:block;
  float: left;
  margin: auto;
}

.largeproductimage img{
  border-radius: 35px;
}

.largeproductimage {
  max-width: 75vw;
  border-radius: 35px;
  display:block;
  float: centre;
  margin: auto;
}


@media only screen and (max-width: 768px) {

  header img {
    top:  0px;
  }

}