html {scroll-behavior: smooth;}
h1 {font-family: 'Playfair Display', sans-serif;}
h2 {font-family: 'Playfair Display', sans-serif;}
h3 {font-family: 'Playfair Display', sans-serif;}
h4 {font-family: 'Playfair Display', sans-serif;}
h5 {font-family: 'Playfair Display', sans-serif;}
h6 {font-family: 'Playfair Display', sans-serif;}
p {font-family: 'Playfair Display', sans-serif;}
span {font-family: 'Playfair Display', sans-serif;}
input {font-family: 'Playfair Display', sans-serif;}
ul {font-family: 'Playfair Display', sans-serif;}
li {font-family: 'Playfair Display', sans-serif;}
a {font-family: 'Playfair Display', sans-serif;}
input[type=search] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  font-family: inherit;
  font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
  display: none; 
}
input[type=search] {
  background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
  border: solid 1px #ccc;
  padding: 9px 10px 9px 32px;
  width: 55px;
  
  -webkit-border-radius: 10em;
  -moz-border-radius: 10em;
  border-radius: 10em;
  
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
}

#demo-2 input[type=search] {
  width: 15px;
  padding-left: 10px;
  color: transparent;
  cursor: pointer;
}
#demo-2 input[type=search]:hover {
  background-color: #fff;
}
#demo-2 input[type=search]:focus {
  width: 90%;
  padding-left: 32px;
  color: #000;
  background-color: #fff;
  cursor: auto;
}
#demo-2 input:-moz-placeholder {
  color: transparent;
  font-family: 'Roboto', sans-serif;
}
#demo-2 input::-webkit-input-placeholder {
  color: transparent;
  font-family: 'Roboto', sans-serif;
}
.nav-right {margin-left: auto;}
.main-nav {margin-left: auto;}
.nav-width {width: 95%; margin-left: auto;margin-right: auto;}

.navbar-light .navbar-nav .nav-link {color:#a59175;}

.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {color: #7a684e;}
.carousel-caption {bottom: 25%;}
.carousel-caption h5 {color:#8d7249; font-size: 30px;}
.carousel-caption p {font-size: 20px; margin-top: 3%;margin-bottom: 3%;}
.btn-primary {color: #fff;background-color: transparent;border-color: #fff; padding-right: 30px; padding-left: 30px;margin-top: 3%;}
.btn-primary:hover {color: #fff;background-color: #8d7249;border-color: #8d7249;}
.slider-btn {margin-bottom: 0; letter-spacing: 2px;font-size: 14px !important;}

#about-section {padding-top: 5%; padding-bottom: 5%;}
#about-section .container {text-align: center;}
#about-section h3 {color: #8d7249;} 
#about-section p {color: #8d7249;}

#service {background-image: url(../images/home-bg-img.jpg); min-height: 500px; width: 100%;}
#service .container {padding-top: 5%;}
#service .container h3 {color: #ffF; text-align: center; font-size:34px;}
#service ul {color: #fff; line-height: 3; font-size: 18px;}
.fl-r {float: right; padding-right: 15%;}
.fl-l {float: left; padding-left: 15%;}

#team {padding-top: 2%; padding-bottom: 5%;}
#team h3 {color: #8d7148; text-align: center;    padding-top: 5%; padding-bottom: 3%;}
#team h5 {color: #231f20;}
#team p {color: #fff;}
#team img { border-radius: 50%; max-width: 100px; max-height: 100px; width: 100%; transition: 0.5s;}
#team img:hover { max-width: 150px !important; max-height: 150px !important; transition: 0.5s; }
#team .col-lg-2  {text-align: center; padding-top: 2%; padding-bottom: 2%;}
#team .col-lg-3  {text-align: center; padding-top: 2%; padding-bottom: 2%;}
#team .col-lg-4  {text-align: center; padding-top: 2%; padding-bottom: 2%;}
#team .col-sm-4 {text-align: center; padding-top: 2%; padding-bottom: 2%;}
#team .col-lg-6 {text-align: center; padding-top: 2%; padding-bottom: 2%;}
/*
#team .container-fluid {width: 160%;}
*/
/* team ares 7 col css stack overflow */
/*
.seven-cols .col-md-1, .seven-cols .col-sm-1, .seven-cols .col-lg-1  {text-align: center;}
  
@media (min-width: 768px){
  .seven-cols .col-md-1 {  width: 100%;}
  .seven-cols .col-sm-1 {  width: 100%;}
  .seven-cols .col-lg-1 {  width: 100%;}
}

@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}

/**
 *  The following is not really needed in this case
 *  Only to demonstrate the usage of @media for large screens
 */    
@media (min-width: 1200px) {
  .seven-cols .col-md-1 {width: 14.285714285714285714285714285714%;}
  .seven-cols .col-sm-1 {width: 14.285714285714285714285714285714%;}
  .seven-cols .col-lg-1 {width: 14.285714285714285714285714285714%;}
}
*/
/* team ares 7 col css stack overflow */
.team-box-bg-light {background-color: #a79375; border-bottom: 15px solid #8d7148;}
.team-box-bg-dark {background-color: #8d7148; border-bottom:  15px solid #a79375;}
.team-box-bg-light {background-color: #a79375; border-bottom: 15px solid #8d7148;}
.activity-box {text-align: center; padding: 4%;}
.activity-box-border-1 {border: 7px solid #a79375;}
.activity-box-border-2 {border: 7px solid #8d7148;}
#activity {padding-bottom: 5%;}
#activity h3 {color: #8d7148; text-align: center;margin-bottom: 4%;}
#activity h6 {padding-top: 15%;}

/* #contact .col-lg-6 {padding-right: 0px !important; padding-left: 0px !important;} */

input[type=text], select, textarea {
  width: 90%;
  padding: 12px;
  border: 0px solid #ccc;
  border-radius: 0px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  background-color: transparent;
  border-bottom: 2px solid #fff;
}

input[type=submit] {
  background-color: #8d7148;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  left: 80%;
}

input[type=submit]:hover {
  background-color: #6b532f;
}

.form-bg {background-color: #a79375;}

::placeholder {
  color: #fff;
  opacity: 1; /* Firefox */
  font-family: 'Roboto', sans-serif;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: #fff;
 font-family: 'Roboto', sans-serif;
}

::-ms-input-placeholder { /* Microsoft Edge */
 color: #fff;
 font-family: 'Roboto', sans-serif;
}
form {padding-bottom: 5%; padding-top: 5%;}

.padding-r-ex {padding-right: 0px !important; padding-left: 0px !important;}

#footer {background-color: #8d7148;}
.footer-logo {padding-top: 20%;}
.bordered {border-left: 2px solid #fff;}
.text-algn-right {text-align: right;}
.text-algn-right h3 {padding-top: 20%;}
#footer h3 {color: #fff;}
#footer p {color: #fff;}
.sub-1 {background-color: #a79375; text-align: center; margin-top: 3%;}
.social {color: #fff; font-size: 32px; margin: 1%; margin-right: 3%; margin-left: 3%;}
.sub-2 {background-color: #8d7148; text-align: center; padding-top: 1%;padding-bottom: 1%;}
.sub-2 p {color: #fff; margin-bottom: 0px !important;}

#proxy p {color: #fff; padding-bottom: 3%;}
#proxy h3 { text-align: center; color: #fff; padding-top: 3%;}
#ecommerce h3 {text-align: center; padding-top: 3%;}
#ecommerce p {padding-bottom: 3%;}
#ecommerce a { color: #8d7148; font-weight: bold;}

#contact h5 {color: #fff; padding-top: 2%; margin-top: 4%;}

@media screen and (max-width: 600px) {
  input[type=submit] {
    left: 60% !important;
  }
}