html{
    scroll-behavior: smooth;
}

body {
    background-color: #fbf5ed;
}

/*This is the banner*/
.banner {
    background-color:#1c211e;
}

.banner-text{
    color: #97a677;
    text-decoration: none;
   }

.banner-text:hover {
 color: #97a677;
 text-decoration: none;
}

.banner-text:visited {
    color: #97a677;
    text-decoration: none;
   }


/*This is the navigation*/
.nav-link {
    text-transform: uppercase;
    color:#1c211e !important;
}

.nav-link:hover {
    border-bottom: solid 1px #1b1b1b !important;
}


/*This is the main header*/

.main-header {
    background-color: #354037;
    border: 1px solid #1b1b1b;
}

.main-left {
    align-self: center;
}
 .main-right {
    align-self: center;
     
 }

 
.btn-outline-secondary {
    background-color: #fbf5ed !important;
    color: #1b1b1b !important;
    border-color: #1b1b1b;
    font-family: 'Overlock', cursive;
}

.btn-outline-secondary:hover {
    background-color:#fffffe !important;
    border-color: #1b1b1b;
    color: #1b1b1b;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);

}

.btn-primary:hover {
    background-color:#e88772 !important;
    border-color: #1b1b1b;
    color:#261d1d;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);

}

.nav-link {
    font-family: 'Overlock', cursive;
    font-size: 1.2em;
}


 
/*2. This is the Value Proposition*/
 .value-prop {
    border: 1px solid black;
 }


 .experiment {
    background-color: darkslategray;
 }

 .card-care {
    background-color: #d9806c;
    height: 20rem;
 }

 .card-doorstep{
    background-color: #f2b279;
    height: 20rem;
 }
 
 .card-guide {
    background-color: #97a677;
    height: 20rem;
 }


 .cards-wrapper {
    display: flex;
    justify-content: center;
 }

 .card-prod {
    margin: 0.5em;
 }

.card-prod {
    position: relative;
}
.card-tag {
    position: absolute;
    float: left;
    background-color: #fbf5ed;
}


 /*changing carousel slider colour*/
    .carousel-control-next-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
    }
    
    .carousel-control-prev-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
    }
/*changing button color*/

.btn-primary {
    background-color: #d9806c !important;
    color: #1b1b1b;
    border-color: #1b1b1b;
    font-family: 'Overlock', cursive;
    
}
.btn-outline-primary {
    color:#1b1b1b;
    border-color: #354037 !important;
    font-family: 'Overlock', cursive;
}
.btn-outline-primary:active {
    background-color: #d9806c !important;
    color:#1b1b1b;
    border-color: #354037 !important;
}
.btn-outline-primary:hover {
    background-color: #d9806c !important;
    color:#1b1b1b;
    border-color:#d9806c;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);

}

.btn-outline-primary:visited {
    background-color: #d9806c !important;
    color:#1b1b1b !important;
    border-color: #354037 !important;
}





.carousel-item {
    height: 35%;
}

.carousel-indicators li {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #1b1b1b;
}
.carousel-indicators {
    bottom: -3rem;
}

.card-prod {
    background-color: #fbf5ed;


}

/*Changing featured link*/


.featured-section a:visited {
    color: #f2b279;
}

.featured-section a:hover {
    color:#d9806c;
    
}

.featured-section a:active {
    color: #f2b279;
}


/*SECTION 5*/

/*review bg*/
.bg-review {
    background-color: #ffffff;
    border: solid 1px #1b1b1b;
}

.fa-star {
    color: #f2b279;
    font-size: 1.5em;
}

/*centering dropdown menu*/

.dropdown-menu-center {
    left: 50% !important;
    right: auto !important;
    text-align: center !important;
    transform: translate(-50%, 0) !important;
  }
.review-form {
    margin: auto;
    border:#1b1b1b solid 1px;
}  

  .rate-star {
    font-size: 1em;
  }

  .stars:not(:checked)>input {
    display: none;
  }

  .stars:not(:checked)>label {
    color: aliceblue;
  }

/*This is the footer section*/
footer{
    background-color: #354037;
    border: solid #354037
}

/*styling social media icons*/
.fa-brands {
    font-size: 1.5em;
    color: #97a677;
    text-decoration: none;
}
.footer-section h6 {
    color: #97a677;
}
.footer-column > h4 {
    color:#f2b279;
}
.footer-column > p {
    color:#f2b279;
}

.footer-column > a {
    color:#97a677;
    list-style: none;
    line-height: 1.7em;
}

.footer-column > a:hover {
    list-style: none;
    text-decoration: underline
}

.newsletter-icon {
    background-color:#d9806c;
    border: 1px solid #261d1d;
}
.newsletter-input {
    background-color: #fbf5ed;
    border: 1px solid #261d1d;
}

.fa-arrow-right-long{
    color: #354037;
}

.footer-column {
    padding-left:0;
    margin-left:0;
}

hr {
    height: 1px;
    border-width: 0;
    background-color: #2c322e;
    color: #2c322e;

}

.legals>a:link a:active {
    color: #1b1b1b;
}

.legals>a:active {
    color: #1b1b1b;
}

.legals> p {
    color: #1b1b1b;
}

.legals>a:hover {
    color: #1b1b1b;
}

.legals>a:visited {
    color: #1b1b1b;
}


/*fonts*/

.header>h5 {
    color: #f2e8dc;
    font-family: 'Nunito', sans-serif;
    
}

.header> h1 {
    color: #f2e8dc;
    font-family: 'Overlock', cursive;
    font-weight: 700;
    font-size: 3rem;
}

.header> h5 {
    color: #f2e8dc;
    font-family: 'Nunito', sans-serif;
    font-weight: 200;
   
    
}

.card-body> p{
    font-family: 'Nunito', sans-serif;
    font-weight: 500;
}


h1 {
    font-family: 'Overlock', cursive;
    font-weight: 900;
}

h4, h5, h6, p, a {
    font-family: 'Nunito', sans-serif;
}

h3 {
    font-family: 'Overlock', cursive;
    font-weight: 700;
}

.bg-review> h5{
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
}

.form-group h4{
    font-family: 'Overlock', cursive;
    font-weight: 700;
}


.footer-column > h4{
    font-family: 'Overlock', cursive;
    font-weight: 900;

}



/*header link*/
.header> a{
    font-family: 'Nunito', sans-serif;
    font-size: 1.1rem;
}

.header> a:link {
    color: #f2b279;
}

.header> a:visited {
    color: #f2b279;
}

.header> a:hover {
    color: #f2b279;
}

.header> a:active {
    color: #f2b279;
}