@charset "UTF-8";
.background-coffee{
  background-color: #FCFAF7;
  margin-top: 5%;
}
.first-viwe-subpages-1 {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  position: relative;
  margin-top: 10vh;
  margin-bottom: 15vh;
}
.coffee-about-top-subpages{
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  padding-top:90px ;
  padding-bottom: 90px;
 }
 .container-white {
  position: relative;
  background: #EBE1D4;
}

.wave-white {
  position: absolute;
  height: 90px;
  width: 100%;
  background: #EBE1D4;
  bottom: 0;
}

.wave-white::before, .wave-white::after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 50% 100%;
}

.wave-white::before {
  width: 50%;
  height: 100%;
  background-color: #EBE1D4;
  right: -0.5%;
  top: 40%;
}
.wave-white::after {
  width: 72%;
  height: 109%;
  background-color: #FCFAF7;
  left: -7.5%;
  top: 75%;
}
.container-white-1 {
  position: relative;
  background: #F7EDE1;
  
}

.wave-white-1  {
  position: absolute;
  height: 90px;
  width: 100%;
  background: #FCFAF7;
  bottom: 0;
}

.wave-white-1::before, .wave-white-1::after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
}

.wave-white-1::before {
  width: 55%;
  height: 109%;
  background-color: #EBE1D4;
  right: 0%;
  top: 60%;
}
.wave-white-1::after {
  width: 55%;
  height: 100%;
  background-color:#FCFAF7;
  left: -3.5%;
  top: 40%;
}
.coment{
  width: 40%;
  position: absolute;
  right: 30%;
  top:10%;
}

 .coffee-about-content-wrapper-subpages{
 width: 100%;
 margin-top: 10%;
  }
 .coffee-about-top-headline-subpages{
  writing-mode: vertical-rl;
  padding: 15px;
  border-left: 1px solid #2D2E2E  ;
  border-right: 1px solid #2D2E2E  ;
  margin-bottom: -15%;
  letter-spacing: -0.4rem;
  font-size: 21px;
  height: fit-content;
 }
 .coffee-about-img-top-subpages{
  width: 45%;
  min-width: 50%;
  margin-left: 5%;
  z-index: 99;
  position: relative;
}
.coffee-about-content-subpages{
  display: flex;
  align-items: center;
  position: relative;
  padding-top: 15%;
  width: 99%;
  margin: 0 auto;
}
.coffee-about-discription-top-subpages{
  position: relative;
  width: 70%;
  margin-left: 10%;
  border-radius: 83% 108% 159% 124% / 135% 121% 120% 87%;
}
.coffee-about-description-top-content-subpages{
  width: 500px;
   margin: auto;
   padding: 50px 50px 50px 75px;
  z-index: 100;
}
.price{
  display: flex;
    gap: 4%;
    align-items: baseline;
}
.coffee-about-description-top-content-subpages p{
  margin-top: 20px;
}
.coffee-about-description-top-content-subpages button{
  margin-top: 20px;
}
.coffee-about-content-subpages1{
  display: flex;
  align-items: center;
  position: relative;
  width: 99%;
  margin: 0 auto;
  padding-top: 5%;
}

.coffee-about-content-subpages2{
  display: flex;
  align-items: center;
  position: relative;
  width: 99%;
  margin: 0 auto;
  padding-top: 5%;
}


.background{
  background-color: #FCFAF7;
  border-radius: 83% 108% 159% 124% / 135% 121% 120% 87%;
  margin-top: -9%;
  width: 100%;
  padding: 25px;
}

.roast-top{
  max-width: 1100px;
    margin: 90px auto 0;
    display: flex;
    align-items: center;
}
.roast-img-top{
  width: 40%;
  min-width: 45%;
  margin-left: 5%;
  z-index: 100;
  position: relative;
}
.roast-discription-top{
    background: #FCFAF7;
    width: 70%;
    margin-left: -5%;
    position: relative;
    z-index: 99;
    border-radius: 83% 108% 159% 124% / 135% 121% 120% 87%;
}
.roast-description-top-content{
  width: 500px;
  margin: auto;
 padding: 50px;
 z-index: 100;
}
.roast-description-top-content p{
  margin-top: 20px;
}
.roast-description-top-content button{
  margin-top: 20px;
}
.vessel-top{
  max-width: 1100px;
    margin: 60px auto 0;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}
.vessel-about-top-headline-subpages{
  writing-mode: vertical-rl;
  padding: 15px;
  border-left: 1px solid #2D2E2E  ;
  border-right: 1px solid #2D2E2E  ;
  margin-bottom:50%;
  letter-spacing: -0.4rem;
  font-size: 21px;
  height: fit-content; 
}
.vessel-img-top{
  width: 40%;
  min-width: 45%;
  z-index: 100;
  position: relative;
}
.vessel-img-top img{
  width: 90%;
  margin: 0 auto;
}
.vessel-discription-top{
    background: #FCFAF7;
    width: 70%;
    margin-right: -5%;
    position: relative;
    z-index: 99;
    border-radius: 83% 108% 159% 124% / 135% 121% 120% 87%;
    height: fit-content;
}
.vessel-description-top-content{
  max-width: 500px;
  margin: auto;
 padding: 50px;
 z-index: 100;
}
.vessel-description-top-content p{
  margin-top: 20px;
}
.vessel-description-top-content button{
  margin-top: 20px;
}
@media (max-width:1090px){
  
  .coffee-about-top-subpages {
    max-width: 95%;
}
  .roast-description-top-content {
    width: 100%;
    margin: auto;
    padding: 12%;
    z-index: 100;
}
.roast-img-top {
  width: 40%;
  min-width: 45%;
  margin-left: 2%;
  z-index: 100;
  position: relative;
}
.vessel-discription-top {
  margin-right: -8%;
}
.vessel-description-top-content {
  max-width: 100%;
  margin: auto;
  padding: 12% 12% 12% 12%; 
  z-index: 100;
}
.vessel-img-top {
  width: 40%;
  min-width: 42%;
  z-index: 100;
  position: relative;
}
}
@media (max-width:450px){
  .coffee-about-top-subpages {
    width: 95%;
    margin: 90px auto 0;
    position: relative;
}

.coffee-about-content-wrapper-subpages {
  width: 100%;
  margin-top: 22%;
}
.coffee-about-discription-top-subpages {
  position: relative;
  width: 100%;
   margin-left: 0%; 
  border-radius: 83% 108% 159% 124% / 135% 121% 120% 87%;
}
.coffee-about-content-wrapper-subpages {
  width: 100%;
  margin-top: 20%;
}
.coment {
  width: 75%;
  position: absolute;
  right: 4%;
  top: 9%;
}
.roast-top {
  width: 95%;
  margin: 90px auto 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
}
.roast-img-top {
  width: 100%;
  min-width: 45%;
  margin-left: 0;
}
.roast-discription-top {
  background: #FCFAF7;
  width: 100%;
  margin-left: 0;
  position: relative;
  z-index: 99;
  border-radius: 83% 108% 159% 124% / 135% 121% 120% 87%;
}
.roast-description-top-content {
  width: 100%;
  margin: auto;
  padding: 11% 14% 14% 12%;
  z-index: 100;
}
.vessel-top {
  width: 95%;
  margin: 60px auto 0;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  flex-direction: column;
}
.vessel-description-top-content {
  width: 100%;
  margin: auto;
  padding: 11% 14% 14% 12%;
  z-index: 100;
}
.vessel-about-top-headline-subpages {
  writing-mode: vertical-rl;
  padding: 15px;
  border-left: 1px solid #2D2E2E;
  border-right: 1px solid #2D2E2E;
  margin-bottom: 0%;
  letter-spacing: 0.4rem;
  font-size: 21px;
  height: fit-content;
}
.vessel-img-top {
  width: 90%;
  min-width: 45%;
  z-index: 100;
  position: relative;
}
.vessel-discription-top {
  background: #FCFAF7;
  width: 100%;
  margin-right: 0%;
  border-radius: 83% 108% 159% 124% / 135% 121% 120% 87%;
  height: fit-content;
}
.vessel-img-top {
  width: 90%;
  min-width: 45%;
  z-index: 100;
  position: relative;
  margin-top: -10%;
  margin-right: 5%;
}
.vessel-img-top img {
  width: 90%;
  margin: 0;
  
}
}