*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
::-webkit-scrollbar{
  display: none;
}

.body789{
overflow-x: hidden;
}

.toast-container{
  z-index: 99999999999;
}

.w_web {
  width: -webkit-fill-available;
}

#main{
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: aquamarine;
    overflow: hidden;
}

.hi{
  color:#F9F6F3;
  /* color:#212121; */
  font-family: var("--beautique-display");
  color:#F9F6F3;
}

.sdhjkfdkshjkhj{
  font-family: var("--beautique-display");
  color:#F9F6F3;
  /* color:#992222; */
  /* text-transform: lowercase; */
}

.hii{
  color:#212121;
  text-transform: none;
  font-family: var("--beautique-display");
}

#top{
    position: absolute;
    top: 0%;
    width: 100%;
    height: 50vh;
    background-color: #212121;
    z-index: 9;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.catalogue{
  font-family: var("--beautique-display");
    position: fixed;
    color: white;
    font-size: 3rem;
    transform: translateY(120px);
    /* background-color: aqua; */
 
}

#center{
    position: relative;
    width: 100%;
    color:black;
    transform-origin: center;
    background-color: #F9F6F3;
    /* transition: all cubic-bezier(0.19, 1, 0.22, 1)1s; */
    overflow: scroll;
    overflow-x: hidden;
}

#bottom{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50vh;
    background-color: #212121;
    overflow: hidden;
}


.content{
    margin-top: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* height: 420vh; */
    gap: 4vh;
    /* background-color: blueviolet; */
}

.content-grid{
 
    /* background-color: rgb(143, 116, 168); */
    display: flex;
    flex-direction: column;
}
.content-grid h1{
  font-size: 68px;
  font-weight: 500;
  position: relative;
  /* top: -53px; */
  /* right: -181px; */
  /* transform: scale(1.019); */
  padding: 2vh 0vw;
  padding-bottom: 7vh;
}
.foo{
  /* margin-top: 295px; */
      position: relative;
    top: 147px;
}


.content-grid-images{
  /* background-color: pink; */
  display: flex;
  gap: 50px;
  width: 83%;
  flex-wrap: wrap;
}

.images{
  border:5px solid #e8dacd;
}
.mobile{
  display: none;
}

@media(max-width:1300px){
  .content-grid-images{
    /* background-color: pink; */
       /* background-color: pink; */
       display: flex;
       gap: 50px;
       /* width: 95%; */
       flex-wrap: wrap;
  }
}

@media(max-width:1200px){
  .content-grid-images{
    /* background-color: pink; */
    display: flex;
    gap: 50px;
    width: 86%;
    flex-wrap: wrap;
  }
}

@media(max-width:600px){

  #main{
    display: none;
  }
  .mobile{
    display: flex;
    flex-direction: column;
    background-color: #F9F6F3;
    overflow-x: hidden;
  }
  .cards{
    display: flex;
    flex-direction: column;
    justify-content: center;align-items: center;
    padding-top: 120px;
    padding-bottom: 20px;
  }
  .cards h1{
    font-size: 44px;
    font-weight: 500;
    padding-bottom: 51px;
  }
  .mobile-images{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 32px;
  }
  .images img{
    height: 186px;
    width: 140px;
  }
  .mobile-footer{
    margin-top: 20px;
  }
}