@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
.container{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  height: 100%;
}
.about-heading-content{
  height: 100vh;
 background: #273D55;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}

.about-heading-main{
 padding: 30px;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
}
.about-heading-main .title{
font-family: "Cinzel", serif;
font-size: 60px;
font-weight: 400;
text-align: center;
margin: 0;
color: #d3af6e;
/* margin-top: 200px; */
}
.about-heading-main .description{
 font-family:'Garamond', serif;
 font-size: 18px;
 font-weight: 400;
 line-height: 25px;
 text-align: center;
 color:#F5EEDE;
 width: 70%;
 }
.about-heading-main img{
 width: 23vw;
 height: 38vh;
 object-fit: contain;
}
@media screen and (max-width: 480px){
  .about-heading-main{
    padding: 85px 20px;
  }
  .about-heading-main .title{
    font-size: 30px;
    margin-top: 50px;
  }
  .about-heading-main .description{
    font-size: 15px;
    width: 80%;
  }
  .about-heading-main img{
    width: 73vw;
    height: 42vh;
   }
}


.about-main-content{
 width: 100%;
 background-color: #fff8da;
 padding: 50px 0;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
}
.about-main-content .title{
 font-family: "Cinzel", serif;
font-size: 70px;
font-weight: 400;
line-height: 112px;
text-align: center;
margin: 0;
}


.tradition-section{
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
}
.tradition-section .content-box{
 display: flex;
 /* align-items: center; */
 justify-content: center;
}
.tradition-section .content-box p{
 color: #273D55;
 font-family: "Garamond";
 font-size: 18px;
 font-weight: 400;
 text-align: left;
}
.tradition-section .content-left{
  position: relative;
 width: 30%;
 display: flex;
}
.tradition-section .content-right{
 width: 50%;
}
.tradition-section .content-box .left-image{
 width: 16vw;
 height: 44vh;
 position: absolute;
 left:40% ;
 top: 17.5%;
 object-fit: contain;

}
.tradition-section .content-box .img-box{
 display: flex;
}
.tradition-section .content-box .img-box .right-image{
 width:   42vw;
 object-fit: contain;
 height: 44vh;
}
.tradition-section .content-box .top-img{
 width: 25vw;
 height: 40vh;
 object-fit: contain;

}
.tradition-section .content-box .bottom-img{
 width: 25vw;
 height: 19vh;
 object-fit: contain;

}

@media screen and (max-width: 1100px){
  .about-main-content .title{
    font-size: 50px;
  }

  .tradition-section .content-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .tradition-section .content-box p{
    font-size: 17px;
  }
  .tradition-section .content-box .left-image{
    display: none;
  }
  .tradition-section .content-left{
    width: 0%;
  }
  .tradition-section .content-right{
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .tradition-section .content-box .img-box .right-image{
    width: 500px;
    height: 335px;
  }
  .tradition-section .content-box .top-img{
    width: 309px;
    height: 308px;
    margin-bottom: 20px;
   }
   .tradition-section .content-box .bottom-img{
    width: 309px;
    height: 200px;
   }
}

@media screen and (max-width: 480px){
  .about-main-content .title{
    font-size: 34px;
  }

  .tradition-section .content-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .tradition-section .content-box p{
    font-size: 12px;
  }
  .tradition-section .content-box .left-image{
    display: none;
  }
  .tradition-section .content-left{
    width: 0%;
  }
  .tradition-section .content-right{
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .tradition-section .content-box .img-box .right-image{
    width: 88vw;
    height: 26vh;
  }
  .tradition-section .content-box .top-img{
    width: 58vw;
    height: 26vh;
    margin-bottom: 20px;
   }
   .tradition-section .content-box .bottom-img{
    width: 58vw;
    height: 13vh;
   }
}

.shops-section{
 width: 45%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 margin: 0 auto;
 margin-top: 120px;
}
.shops-section .parfum-shop{
 width: 39vw;
 height: 58vh;
 object-fit: contain;
}
.shops-section .title-shops{
 font-family: "Cinzel", serif;
font-size: 35px;
font-weight: 400;
line-height: 35px;
text-align: left;
}
.shops-section p{
 color: #273D55;
 font-family: "Garamond";
 font-size: 18px;
 font-weight: 400;
 text-align: left;
}

@media screen and (max-width: 1100px){
  .shops-section{
    width: 80%;
    margin-top: 50px;
  }
  .shops-section .title-shops{
    font-size: 20px;
    line-height: 20px;
    text-align: center;

  }
  .shops-section p{
    font-size: 16px;
  }
  .shops-section .parfum-shop{
    width: 39vw;
    height: 33vh;
  }
}

@media screen and (max-width: 480px){
  .shops-section{
    width: 70%;
    margin-top: 50px;
  }
  .shops-section .title-shops{
    font-size: 20px;
    line-height: 20px;
    text-align: center;

  }
  .shops-section p{
    font-size: 14px;
  }
  .shops-section .parfum-shop{
    width: 89vw;
    height: 38vh;
  }
}

.bottom-text-box{
 width: 85%;
 display: flex;
 justify-content: flex-end;
}
 .bottom-text{
  width: 40%;
  color: #273D55;
  font-family: "Garamond", serif;
  font-size: 18px;
  line-height: 22px;
  font-weight: 400;
  text-align: left;
}


.parfume-img-box{
 width: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 margin-top: 20px;
}
.parfume-img-box .img-box{
 display: flex;
 align-items: center;
 justify-content: center;
 border: 1.5px solid #E3BE67;
 padding: 25px 0;
 border-left: none;
 border-right: none;
}
.parfume-img-box .img-box .side-img{
 width: 15vw;
 height: 25vh;
 object-fit: cover;
}
.parfume-img-box .img-box .center-img{
 width: 20vw;
 height: 25vh;
 margin: 0 15px;
 object-fit: cover;
}

@media screen and (max-width: 1100px){

  .bottom-text-box  .bottom-text{
     width: 50%;
     font-size: 14px;
     margin-top: 50px;
   }

   .parfume-img-box .img-box .side-img{
     width: 142px;
     height: 168px;
   }
   .parfume-img-box .img-box {
     padding: 12px 0;
   }
   .parfume-img-box .img-box .center-img{
     width: 165px;
     height: 165px;
     margin: 0 8px;
   }
 }



@media screen and (max-width: 480px){
  .bottom-text-box{
    width: 85%;
  }
  .bottom-text-box  .bottom-text{
     width: 80%;
     font-size: 14px;
   }

   .parfume-img-box .img-box .side-img{
     width: 25vw;
     height: 15vh;
   }
   .parfume-img-box .img-box {
     padding: 12px 0;
   }
   .parfume-img-box .img-box .center-img{
     width: 32vw;
     height: 15vh ;
     margin: 0 8px;
   }
 }

.text-box{
  max-width: 50%;
  margin: 50px auto;
  padding: 20px;
  text-align: center;
}
.text-box h2{
  font-family: 'Cinzel',serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 32px;
  text-align: left;
  color: #273D55;
  margin: 0;
}
.text-box .content{
  max-width: 100%;
  display: flex;
  justify-content: end;
  margin-top: 20px;
}
.text-box .content p{
  max-width: 55%;
  font-family: 'Garamond', serif;
  font-size: 19px;
  line-height: 22px;
  color:#273D55;
  font-weight: 400;
  text-align: left;
}
@media screen and (max-width: 1100px){
  .text-box{
    max-width: 70%;
  }
  .text-box h2{
    font-size: 25px;
    line-height: 25px;
  }
  .text-box .content p{
    font-size: 16px;
    line-height: 21px;
    max-width: 90%;
  }
}
@media screen and (max-width: 480px){
  .text-box{
    max-width: 70%;
  }
  .text-box h2{
    font-size: 20px;
    line-height: 20px;
  }
  .text-box .content p{
    font-size: 14px;
    line-height: 19px;
    max-width: 90%;
  }
}

.books-pic-box{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
  border: 2px solid #E3BE67;
  border-right:none;
  border-left:none;
  padding: 25px 0;
}
.books-pic-box .top{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.books-pic-box .top img{
  width: 20vw;
  height: 44vh;
  margin-right: 15px;
  object-fit: contain;
}
.books-pic-box .bottom{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.books-pic-box .bottom img{
  width: 16vw;
  margin-right: 15px;
  margin-top: 25px;
  height:37vh;
  object-fit: contain;
}

@media screen and (max-width:1100px) {
  .books-pic-box{
    margin-top: 0;
  }
  .books-pic-box .top{
    display: grid;
    grid-template-columns: auto auto;
    row-gap: 12px;
  }
  .books-pic-box .top img{
    width: 255px;
    height: 312px;
    margin-right: 15px;
  }
  .books-pic-box .bottom img{
    width: 202px;
    height: 246px;
    margin-right: 10px;
  }
}

@media screen and (max-width:480px) {
  .books-pic-box .top{
    display: grid;
    grid-template-columns: auto auto;
    row-gap: 12px;
    padding-left: 15px;
  }
  .books-pic-box .top img{
    width: 155px;
    height: 212px;
    margin-right: 15px;
  }
  .books-pic-box .bottom img{
    width: 102px;
    height: 146px;
    margin-right: 10px;
  }
}

.last-section{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: end;
  margin-top: 40px;
}
.last-section .left-side{
  width: 290px;
  height: 572px;
  margin-right: 40px;
}
.last-section .left-side img{
  width: 100%;
  height: 100%;
}
.last-section .right-side{
  width: 40%;
  display: flex;
  flex-direction: column;
}
.last-section .right-side img{
  width: 305px;
  height: 385px;
  margin-top: 60px;
}
.last-section .right-side p{
  /* max-width: 70%; */
font-family: "Garamond", serif;
font-size: 20px;
font-weight: 400;
text-align: left;
color: #273D55;
margin: 0;
}
.last-section .right-side ul li{
  max-width: 60%;
  font-family: "Garamond", serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 25px;
  text-align: left;
  color: #273D55;
}

@media screen and (max-width: 1100px){
  .last-section{
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
  }
  .last-section .left-side{
    width: 242px;
    height: 470px;
    display: flex;
    align-items: end;
    justify-content: flex-end;
    align-self: flex-end;
    margin-top: 20px;
  }
  .last-section .right-side{
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .last-section .right-side p{
    font-size: 16px;
    line-height: 20px;
    text-align: left;
  }
  .last-section .right-side ul li{
    max-width: 100%;
    font-size: 16px;
    line-height: 22px;
  }
  .last-section .right-side img{
    width: 300px;
    height: 380px;
    margin-top: 20px;
  }
}

@media screen and (max-width: 480px){
  .last-section{
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
  }
  .last-section .left-side{
    width: 242px;
    height: 470px;
    display: flex;
    align-items: end;
    justify-content: flex-end;
    align-self: flex-end;
    margin-top: 20px;
  }
  .last-section .right-side{
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .last-section .right-side p{
    font-size: 14px;
    line-height: 18px;
    text-align: left;
  }
  .last-section .right-side ul li{
    max-width: 100%;
    font-size: 14px;
    line-height: 18px;
  }
  .last-section .right-side img{
    width: 300px;
    height: 380px;
    margin-top: 20px;
  }
}

@media only screen and (max-width:380px){
  .last-section .right-side img{
    width: 237px;
    height: 300px;
    margin-top: 20px;
  }
}