/*   */
*{
  font-family: 'Montserrat', sans-serif; 
  /* color: #557B83; */
}

/* New Style Test */
/* ul {
  list-style: none;
} */

a {
  color: #3D3530;
  text-decoration: none;
}
.logo {
margin-left: 50px;

}

.logo img{
  border-bottom: solid #B47F6A 1px;
  height: 75px;
  margin-bottom: 10px;
  
  
}

.navbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  /* border: solid black; */
}

.navbar ul {
  display: flex;
  justify-content: space-around;
  /* border: solid pink ; */
  width: 20vw;
  margin-right: 15px;

}

.navbar a:hover {
  border-bottom: #B47F6A 1px solid ;
}

.hero{
  background: url(./images/mediterranean-food-1311330.jpg) no-repeat center center/cover;
  height: 80vh;
  position: relative;
  color: #3D3530
}

.hero .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100% ;
  padding: 0 20px;

}
.hero .content h1{
  font-size: 56px;
}
.hero .content p {
  font-size: 56px;
  max-width: 600px;
  margin: 20px 0 30px;
}

.innercontent{
  background-color: #BBB09B ;
  opacity: .9;
  border-radius: 15px;
  padding: 10px;

}

h2{
  text-align: center;
  font-size: 48px;
  background-color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  color: #3D3530;
}
/* Nav Mobile */
@media (max-width:500px) {
  .navbar ul{
    flex-direction: column;
  }
}

/* btn */

.btn{
  cursor: pointer;
  display: inline-block;
  padding: 10px 30px ;
  color: #ffffff;
  background-color: #59524A;
  border: none;
  border-radius: 5px;

}

.white-space{
  background-color: #ffffff;
  border: #000;
  width: 100%;
  height: 15vh;
}

.btn:hover{
  background-color: #ffffff;
  color: #3D3530;
}


/* my code stops here */
.bgDark{
  /* background-color: #557B83; */

}

.bgMidD {
  /* background-color: #39AEA9; */
  
}

.bgMidL {
  /* background-color: #A2D5AB; */
  border-bottom: solid 2px #B47F6A;
}

.bgLight {
  /* background-color: lightslategray; */

}

.textlight{
  /* color: #E5EFC1; */
}

.textMidLight{
  /* color: #A2D5AB ; */
}

.textMidDark{
  color: #39AEA9;
}

.textDark {
  /* color: pink ; */
}

.missedIngredients { 
  column-count: 2;
}

.seeFullRecipeBtn:hover{
  transform: scale(110%);

}
#recipiecarrasoul{
  /* background-color: #A2D5AB; */
}

.work-sans {
    font-family: 'Work Sans', sans-serif;
}
        
#menu-toggle:checked + #menu {
    display: block;
}

#menu2 {
  display: block;
}

.hover\:grow {
    transition: all 0.3s;
    transform: scale(1);
}

.hover\:grow:hover {
    transform: scale(1.02);
}

.carousel-open:checked + .carousel-item {
    position: static;
    opacity: 100;
}

.carousel-item {
    -webkit-transition: opacity 0.6s ease-out;
    transition: opacity 0.6s ease-out;
}

#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3 {
    display: block;
}

.carousel-indicators {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 2%;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
}

#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet {
    color: #000;
    /*Set to match the Tailwind colour you want the active one to be */
}




#ingredientsListSaved {
    height: 400px;
}

/***** carousel css ******/

/* width for saved recipes */

.savedDisplay{
  width: 100%;
}

/* .cardContainer {
  width: 700px;
} */

/* .card {
  width: 320px;
  height: 700px;
} */

.missedIngredients { 
  column-count: 2;
}

.seeFullRecipeBtn:hover{
  transform: scale(110%);
  
}
#recipiecarrasoul{
  /* background-color: #A2D5AB; */
}

.dp-shadow{
  box-shadow: 3px 3px 3px 3px #bbb09b;
}


/* @media screen and (min-width: 1400px){
  .card, .cardContainer {
    width: 450px;
  }
}
 */
 /* .container{
   background-color: #000;

 } */