@charset "UTF-8";
/* CSS Document */
  .recipe-container {
    background-color: #fff;
    display: flex;
    flex-direction: column;
	margin:0;
    padding:0;
  }
  .title {
    color: #c32525;
    letter-spacing: -4px;
    align-self: center;
    margin-top: 70px;
    font: 700 200px Tangerine, sans-serif;
  }
  .author {
    color: #000;
    letter-spacing: -0.52px;
    align-self: center;
    font: 700 26px Josefin Sans, sans-serif;
	opacity: 60%;
  }
  .header {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position:relative;
    min-height: 748px;
    margin-top: 103px;
    width: 100%;
    align-items: start;
    font-weight: 700;
    text-align: justify;
    padding: -10px;
  }
	
	.background-image{
		position:absolute;
    	inset: 0;
    	height: 100%;
    	width: 100%;
    	object-fit: cover;
    	object-position: center;
		opacity: 20%;
		margin: 0;
    	padding: 0;
  }
  .header-text {
    position: relative;
    color: #c32525;
    margin: 145px 0 0 16px;
    font: 70px Abhaya Libre, sans-serif;
  }
  .header-desc {
    position: relative;
    color: #470d0d;
    margin: 20px 16px 92px 16px;
    font: 35px Abhaya Libre, sans-serif;
  }
  .main-content {
    margin-top: 115px;
    width: 100%;
  }
  .content-wrapper {
    display: flex;
    gap: 100px;
  }

  .image-column {
  display: flex;
  flex-direction: column;
  line-height: normal;
  width: 50%;
  margin-left: -2%;
  overflow: hidden;
}
.image-column img {
  height: auto; 
  object-fit: cover;
  object-position: center;
  margin-top: 44px;
  border-radius: 50%; 
}

.img1 {
  margin-left: -40%; 
  width: 900px;
  height: 1000px;

}


.img2 {
  margin-left: 0; 
  margin-right: -80%; 
}


  .text-column {
    display: flex;
    flex-direction: column;
    line-height: normal;
    width: 50%;
    margin-left: 20px;
  }
  .ingredients {
    display: flex;
    flex-direction: column;
    font-size: 31px;
    color: #000;
    font-weight: 400;
    padding: 0 20px;
  }
  .ingredients-title {
    color: #c32525;
    letter-spacing: -2.8px;
    align-self: center;
    font: 700 140px Tangerine, sans-serif;
  }
  .list-item {
    font-family: Abhaya Libre, sans-serif;
    text-align: left;
    color: #c32525;
    gap: 50px;
    margin-top: 91px;
  }
  .list-items {
    gap: 50px;
    font-family: Abhaya Libre, sans-serif;
    text-align:left;
    color: black;
  } 
  .instructions {
    border-radius: 98px;
    background-color: #f7f39a;
    display: flex;
    margin-top: 180px;
    width: 95%;
    flex-direction: column;
    padding: 80px 0 80px 80px;
  }
  .instructions-title {
    color: #c32525;
    letter-spacing: -2.8px;
    align-self:auto;
    margin-top: 59px;
    font: 700 140px Tangerine, sans-serif;
  }
  .step-container {
    text-align: justify;
    display: flex;
    gap: 50px;
    align-items: stretch;
    padding: 0 20px;
    align-self: center;
  }
  .step {
    text-align: justify;
    display: flex;
    flex-direction: column;
    font-size: 50px;
    color: #c32525;
    font-weight: 400;
    align-self: center;
  }
  .step-text {
    align-self: center;
    color: #000;
	margin-bottom: 90px;
    text-align: center;
    font: 25px Abhaya Libre, sans-serif;
  }
  .tips {
    display: flex;
    flex-wrap: wrap;
    margin-top: 91px;
    gap: 50px;
    align-self: center;
    color: #000;
  }
  .tips-title {
    letter-spacing: 2.5px;
    font: 700 100px Josefin Sans, sans-serif;
  }
 
  .tips-text {
    text-align: justify;
    letter-spacing: -0.6px;
    margin-top: 85px;
    flex-grow: 1;
    flex-basis: auto;
    font: 400 30px "Abhaya Libre", sans-serif;
  }
  @media (max-width: 991px) {
    .description {
      max-width: 100%;
    }}