/* .lato-thin {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.lato-light {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.lato-black {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.lato-thin-italic {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.lato-light-italic {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.lato-regular-italic {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.lato-bold-italic {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.lato-black-italic {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: italic;
} */

/* padding : 20px (top dan bottom) 50px (left and right) */
html {
  scroll-behavior: smooth;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --abuabu: rgb(151, 151, 151);
  --ijotua: rgb(127, 121, 4);
  --ijomuda: rgb(220, 209, 5);
}
/* navtop */
nav {
  position: fixed;
  z-index: 3;
  backdrop-filter: blur(7px);
  width: 100%;
  background-color: rgba(76, 76, 76, 0.052);
  padding: 15px 50px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
  transition: all 0.5s ease-in-out;
  border: none;
  border-bottom: 1px solid white;
}
nav:hover {
  background-color: rgba(80, 79, 79, 0.574);
}
nav:hover .navitem-h1 {
  color: var(--ijomuda);
}
nav:hover .limitedoffer {
  color: var(--ijomuda);
}
nav:hover .search {
  background-color: white;
}
.navtop {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navitem {
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.navitem-h1 {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  color: rgb(127, 121, 4);
}

.search {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background-color: grey;
  padding: 10px 20px;
  border-radius: 15px;
  margin-right: 60px;
  transition: all 0.3s ease-in-out;
}

.search img {
  height: 100%;
}
.searchinput {
  padding: 5px;
  border: none;
  background-color: transparent;
}
.searchinput::placeholder {
  color: lightgray;
}

.limitedoffer {
  color: rgb(127, 121, 4);
  font-size: 20px;
  border-bottom: 2px solid green;
  cursor: pointer;
}
.menu-toggle {
  display: none; /* default sembunyi */
  flex-direction: column;
  cursor: pointer;
  margin-left: auto;
  z-index: 2000;
  position: relative; /* dorong ke kanan */
}
.menu-toggle div {
  width: 25px;
  height: 3px;
  background: rgb(28, 28, 28); /* warna garis */
  margin: 4px 0;
  transition: 0.3s;
}
.navbottom {
  box-sizing: border-box;
  margin-left: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menuitem {
  margin-right: 50px;
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 1s ease-in-out;
}

.menuitem:hover {
  color: #91818a;
  border-bottom: 2px solid rgb(255, 255, 255);
}
/* akhirnavbottom */

/* slider */
.slider {
  width: auto;
  background-image: url(bgtembokputih.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%);
  overflow: hidden;
  height: 105dvh;
}

.sliderwraper {
  margin-top: 115px;
  display: flex;
  width: 500vw;
  height: 80dvh;
  transition: all 1s ease-in-out;
}

.slideritem {
  /* top: 80px; */
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.slideritem:nth-child(1) .sliderbg {
  background-color: #ebdccb;
  -webkit-box-shadow: 8px 8px 25px 2px rgba(164, 164, 164, 1);
  -moz-box-shadow: 8px 8px 25px 2px rgba(164, 164, 164, 1);
  box-shadow: 8px 8px 25px 2px rgba(164, 164, 164, 1);
}
.slideritem:nth-child(2) .sliderbg {
  background-color: #eadfae;
  -webkit-box-shadow: 5px 5px 15px 5px rgba(234, 223, 174, 0.73);
  box-shadow: 5px 5px 15px 5px rgba(234, 223, 174, 0.73);
}
.slideritem:nth-child(3) .sliderbg {
  background-color: #db9244;
  -webkit-box-shadow: 5px 5px 15px 5px rgba(219, 146, 68, 0.66);
  box-shadow: 5px 5px 15px 5px rgba(219, 146, 68, 0.66);
}
.slideritem:nth-child(4) .sliderbg {
  background-color: #91818a;
  -webkit-box-shadow: 5px 5px 15px 5px rgba(145, 129, 138, 0.66);
  box-shadow: 5px 5px 15px 5px rgba(145, 129, 138, 0.66);
}
.sliderbg {
  margin-right: 90px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  position: absolute;
}

.slidertitle {
  color: rgb(10, 10, 10);
  position: absolute;
  top: 37%;
  right: 15%;
  text-align: center;
  font-weight: 900;
  font-size: 2.5rem;
  z-index: 1;
}
.sliderprice {
  color: rgb(0, 0, 0);
  position: absolute;
  top: 20%;
  left: 21%;
  text-align: center;
  font-weight: 400;
  font-size: 4rem;
  border: 1px solid black;
  z-index: 1;
}

.buybotton {
  position: absolute;
  top: 65%;
  right: 17%;
  background-color: rgb(62, 63, 63);
  border: none;
  cursor: pointer;
  text-align: center;
  font-weight: 600;
  font-size: 2.5rem;
  width: 300px;
  color: white;
  border-radius: 20px;
  transition: 0.2s all ease-in;
}

.slideritem:nth-child(1) .buybotton:hover {
  color: black;
  background-color: #ebdccb;
}
.slideritem:nth-child(2) .buybotton:hover {
  color: black;
  background-color: #eadfae;
}
.slideritem:nth-child(3) .buybotton:hover {
  color: black;
  background-color: #db9244;
}
.slideritem:nth-child(4) .buybotton:hover {
  color: black;
  background-color: #91818a;
}

.sliderimg-1 {
  width: 25%;
  right: 30%;
  margin-right: 7%;
  z-index: 1;
}
.sliderimg {
  width: 35%;
  right: 30%;
  margin-right: 5%;
  z-index: 1;
}

/* akhir slider */
/* fitur */
.features {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  gap: 20px;
}

.feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.featureimg {
  width: 55px;
  height: ;
}

.featurtittle {
  font-size: 20px;
  font-weight: 600;
  margin: 20;
}

.deskripsi {
  color: grey;
}

.futurecaption {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
}

#product {
  position: relative;
  height: 100vh;
  /* display: flex; */
  background-color: #f1f0f1;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
}

.productimg {
  margin-left: 250px;
  width: 50%;
  margin-top: 250px;
}
.productdetail {
  position: absolute;
  top: 25%;
  right: 15%;
  width: 40%;
  padding: 50px;
}
.productTittle {
  font-size: 75px;
  font-weight: 900;
  margin-bottom: 25px;
}
.jenis-aroma {
  margin: 10px 0;
  display: flex;
  width: 150%;
  gap: 10px;
  height: auto;
  box-sizing: border-box;
}

.aroma {
  width: 40px;
  height: 20px;
  background-color: gray;
  border-radius: 5px;
  padding: 5px;
  cursor: pointer;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  /* border: 1px solid white; */
  transition: all 0.5s ease-in-out 0.5s;
}

.aroma:hover {
  width: 120px;
  height: 30px;
  transition: width 0.5s ease-in-out 0s;
}
.aroma:nth-child(1) {
  background-color: rgb(100, 194, 253);
}
.aroma:nth-child(2) {
  background-color: rgb(0, 248, 248);
}
.aroma:nth-child(3) {
  background-color: #ff9752;
}
.aroma:nth-child(4) {
  background-color: rgb(252, 200, 133);
}

.tooltiptext {
  text-align: center;
  opacity: 0;
  width: 100%;
  height: 100%;
  color: rgb(11, 11, 11);
  transition: opacity 0.3s ease-in-out 0s;
}

.aroma:hover .tooltiptext {
  opacity: 1;
  transition: opacity 0.3s ease-in-out 0.3s;
}

.sizes {
  margin-top: 30px;
  display: flex;
  gap: 10px;
}

.size {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 25px;
  background-color: white;
  border: 1px solid black;
  text-align: center;
  font-weight: 550;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease-in-out;
}

.size:hover {
  transform: scale(1.05);
  color: white;
  background-color: black;
}
.productbutton {
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 10px;
  border: 1px solid black;
  background-color: rgb(0, 0, 0);
  width: 150px;
  margin-top: 20px;
  font-size: 20px;
  font-weight: 700;
  height: auto;
  color: white;
  transition: 0.3s all ease-in;
}

.productbutton:hover {
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
}

.payment {
  width: 500px;
  height: 500px;
  background-color: white;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 200px;
  padding-top: 20px;
  padding-right: 50px;
  padding-left: 50px;
  display: none;
  flex-direction: column;
  -webkit-box-shadow: 5px 3px 9px 3px rgba(0, 0, 0, 0.39);
  box-shadow: 5px 3px 9px 3px rgba(0, 0, 0, 0.39);
}

.paytitle {
  color: rgb(151, 151, 151);
}
.payinput {
  padding: 10px;
  border: none;
  border-bottom: 1px solid black;
}
.paycard {
  padding: 10px;
  border: none;
  border-bottom: 1px solid black;
  margin-top: 10px;
}

.paybutton {
  position: absolute;
  z-index: 5;
  bottom: 0;
  width: 100%;
  left: 0;
  height: 40px;
  font-size: 17px;
  font-weight: 500;
  padding: 5px 0;
  background-color: #db9244;
  border: none;
  cursor: pointer;
}
label {
  margin-top: 25px;
  color: var(--abuabu);
}

.cardinfo {
  margin-bottom: 5px;
  font-size: 20px;
  margin-top: 20px;
  color: var(--abuabu);
}
.cardimg {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
}

.cardimg img {
  width: 200px;
}
.close {
  font-size: 20px;
  padding: 5px;
  background-color: rgba(128, 128, 128, 0.714);
  cursor: pointer;
  top: 0;
  color: white;
  right: 0;
  position: absolute;
  margin: 20px;
}

/* galeri */
.galeri {
  padding: 50px;
  display: flex;
}
@keyframes slidekanan {
  from {
    transform: translateX(200px);
    /* opacity: 0; */
  }
  to {
    transform: translateX(0px);
    /* opacity: 1; */
  }
}
@keyframes slidekiri {
  from {
    transform: translateX(-200px);
    /* opacity: 0; */
  }
  to {
    transform: translateX(0px);
    /* opacity: 1; */
  }
}
@keyframes slidetengah {
  from {
    transform: translateY(300px);
    opacity: 0;
  }
  to {
    transform: translateY(0px);
    opacity: 1;
  }
}
.galeriitem-1 {
  flex: 1;
  padding: 50px;
  animation: slidekiri linear forwards;
  animation-timeline: view();
  animation-range: entry 0% cover 45%;
}
.galeriitem-2 {
  flex: 1;
  padding: 50px;
  animation: slidetengah linear forwards;
  animation-timeline: view();
  animation-range: entry 0% cover 45%;
}

.galeriitem-3 {
  flex: 1;
  padding: 50px;
  animation: slidekanan linear forwards;
  animation-timeline: view();
  animation-range: entry 0% cover 45%;
}

.galeriimg {
  width: 100%;
}
.galerititle:nth-child(1) {
  margin-bottom: 10px;
}
.galerititle:nth-child(1) {
  margin-bottom: 10px;
}
.galerititle:nth-child(2) {
  margin-bottom: 10px;
  text-align: center;
  font-size: 30px;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
.newseason {
  margin: auto;
  display: flex;
  width: 90%;
  justify-content: center;
  align-items: center;
  height: 100dvh;
  margin-bottom: 50px;
}

.contentgaleri {
  position: relative;
}
.detailcaption {
  position: absolute;
  display: flex;
  opacity: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 0;
  color: white;
  height: 100%;
  text-align: center;
  padding: 0 20px;
  gap: 40px;
  transition: all 0.3s ease-in-out;
}
.detailcaption-3 {
  position: absolute;
  display: flex;
  opacity: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 0;
  color: white;
  height: 100%;
  text-align: center;
  padding: 0 20px;
  gap: 40px;
  transition: all 0.3s ease-in-out;
}

.contentgaleri:hover .detailcaption-3 {
  opacity: 1;
  background-color: #47474754;
  backdrop-filter: blur(10px);
}
.contentgaleri:hover .detailcaption {
  opacity: 1;
  background-color: #928d901a;
  backdrop-filter: blur(10px);
}
.nsitem:nth-child(1) {
  flex: 1.5;
}
.nsitem:nth-child(2) {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  gap: 20px;
  z-index: 2;
  background-color: black;
  -webkit-box-shadow: 0px 0px 21px 4px rgba(0, 0, 0, 0.83);
  box-shadow: 0px 0px 21px 4px rgba(0, 0, 0, 0.83);
  transition: all 0.5s ease-in-out;
}

.nsitem:nth-child(2):hover {
  background-color: white;
  color: black;
  -webkit-box-shadow: 0px 0px 21px 4px rgba(255, 255, 255, 0.83);
  box-shadow: 0px 0px 21px 4px rgba(255, 255, 255, 0.83);
}
.nsitem:nth-child(2):hover .nsbutton {
  background-color: gray;
  -webkit-box-shadow: 0px 2px 29px 0px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 2px 29px 0px rgba(12, 12, 12, 0.7);
}
.nsitem:nth-child(3) {
  flex: 1.5;
}

.nsimg:nth-child(1) {
  bottom: -10;
  width: 100%;
  /* height: 650px; */
}

.nsimg:nth-child(2) {
  height: 100%;
}

.nsbutton {
  margin-top: 50px;
  padding: 10px;
  background-color: white;
  font-weight: 600;
  cursor: pointer;
  border-radius: 10px;
  border: none;
  transition: all 0.3s ease-in-out;
  -webkit-box-shadow: 0px 0px 21px 4px rgba(255, 255, 255, 0.41);
  box-shadow: 0px 0px 21px 4px rgba(255, 255, 255, 0.41);
}
.nsbutton:hover {
  background-color: #b2b0b1;
}

/* footer */
footer {
  background-color: #0000003e;
  display: flex;
  backdrop-filter: blur(10px);
}
.footerleft {
  flex: 2;
  display: flex;
  justify-content: space-between;
  padding: 50px;
}
.menutitle {
  font-size: 20px;
  margin-bottom: 10px;
}
.menutitleright {
  font-size: 20px;
  margin-top: 20px;
}

.menulist {
  padding: 0;
  list-style: none;
}
.menulist a {
  text-decoration: none;
}
.listitem {
  margin-bottom: 10px;
  color: rgb(255, 255, 255);
  cursor: pointer;
}
.footerright {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 10px;
}
.input {
  border-radius: 5px;
  border: none;
  padding: 5px;
}
.icon {
  display: flex;
}

.iconimg {
  width: 50px;
}

.footerrightmenu {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.mail {
  display: flex;
  gap: 5px;
}
.button {
  width: 40%;
  background-color: black;
  color: white;
  border-radius: 5px;
  padding: 0 10px;
}
@media (max-width: 768px) {
  .sliderimg-1 {
    min-width: 40%;
    transform: translateX(-40px);
  }
  .sliderimg {
    min-width: 50%;
    transform: translateX(-40px);
  }
  .slideritem {
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .sliderprice {
    color: rgb(0, 0, 0);
    position: absolute;
    top: 20%;
    left: 21%;
    text-align: center;
    font-weight: 400;
    font-size: 50px;
    border: 1px solid black;
    transform: translateX(-40px);
    z-index: 1;
  }
  .slidertitle {
    color: rgb(10, 10, 10);
    position: absolute;
    top: 37%;
    right: 10%;
    text-align: center;
    font-weight: 900;
    font-size: 2rem;
    z-index: 1;
  }
  .buybotton {
    position: absolute;
    top: 60%;
    right: 10%;
    background-color: rgb(62, 63, 63);
    border: none;
    cursor: pointer;
    text-align: center;
    font-weight: 600;
    font-size: 2rem;
    width: 250px;
    color: white;
    z-index: 2;
    border-radius: 20px;
    transition: 0.2s all ease-in;
  }
  .navitem:nth-child(2) {
    display: none;
  }
  .menuitem {
    font-size: 15px;
    margin-right: 20px;
  }
  .navbottom {
    margin-left: 0;
  }
  .sliderbg {
    width: 600px;
    height: 600px;
    margin-right: 10px;
  }
  /* feature */
  .featureimg {
    width: 45px;
  }
  .featurtittle {
    font-size: 15px;
    font-weight: 600;
    margin: 20;
  }
  .deskripsi {
    color: grey;
    font-size: 14px;
  }

  .futurecaption {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
  }
  /* product */
  .productimg {
    width: 80%;
    margin-top: 100px;
  }
  .containerimg {
    display: flex;
    justify-content: center;
  }
  .productdetail {
    position: absolute;
    top: 40%;
    right: 15%;
    width: 80%;
    padding: 50px;
  }
  .productTittle {
    text-align: center;
  }
  /* galeri */
  .galeri {
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .galeriitem-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .galeriitem-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .galeriitem-3 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .galeriimg {
    width: 100%;
  }
  .contentgaleri {
    width: 60%;
  }
  .detailcaption {
    position: absolute;
    display: flex;
    opacity: 0;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 0;
    color: white;
    height: 100%;
    text-align: center;
    padding: 0 20px;
    gap: 40px;
    transition: all 0.3s ease-in-out;
  }
  .newseason {
    display: flex;
    width: 75%;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin-bottom: 50px;
    margin-top: 0px;
    flex-direction: column;
  }
  .nsitem:nth-child(1) {
    flex: 1;
    transform: translateY(20px);
    display: flex;
    justify-content: center;
  }
  .nsitem:nth-child(2) {
    flex: 1;
    height: 110%;
    padding: 20px 0px;
    width: 75%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    gap: 20px;
    z-index: 5;
    background-color: black;
    -webkit-box-shadow: 0px 0px 21px 4px rgba(0, 0, 0, 0.83);
    box-shadow: 0px 0px 21px 4px rgba(0, 0, 0, 0.83);
    transition: all 0.5s ease-in-out;
  }
  .nsitem:nth-child(3) {
    display: flex;
    justify-content: center;
    flex: 1;
  }
  .nsimg:nth-child(1) {
    width: 70%;
  }

  .nsimg:nth-child(2) {
    width: 70%;
  }
}
@media (max-width: 480px) {
  .navitem:nth-child(2) {
    display: none;
  }
  .menuitem {
    font-size: 14px;
    margin-right: 20px;
  }
  .navbottom {
    margin-left: 0;
  }

  .sliderbg {
    width: 400px;
    height: 400px;
    margin-right: 10px;
  }
  .sliderimg-1 {
    min-width: 45%;
    transform: translateX(-50px);
  }
  .sliderimg {
    min-width: 65%;
    transform: translateX(-40px);
  }
  .slideritem {
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .sliderprice {
    color: rgb(0, 0, 0);
    position: absolute;
    top: 20%;
    left: 21%;
    text-align: center;
    font-weight: 400;
    font-size: 50px;
    border: 1px solid black;
    transform: translateX(-40px);
    z-index: 1;
  }
  .slidertitle {
    color: rgb(10, 10, 10);
    position: absolute;
    top: 37%;
    right: 6%;
    text-align: center;
    font-weight: 900;
    font-size: 1.5rem;
    z-index: 1;
  }
  .buybotton {
    position: absolute;
    top: 54%;
    right: 10%;
    background-color: rgb(62, 63, 63);
    border: none;
    cursor: pointer;
    text-align: center;
    font-weight: 600;
    font-size: 1.5rem;
    width: 150px;
    color: white;
    z-index: 2;
    border-radius: 20px;
    transition: 0.2s all ease-in;
  }
  /* features */
  .features {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
    flex-direction: column;
    gap: 20px;
  }
  /* product */
  .productimg {
    margin-left: 170px;
    width: 80%;
    margin-top: 50px;
  }
  .productdetail {
    position: absolute;
    top: 25%;
    right: 15%;
    width: 70%;
    padding: 55px;
  }
  .productTittle {
    font-size: 38px;
    font-weight: 900;
    margin-bottom: 25px;
  }
  /* product */
  .containerimg {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 50px;
    padding-top: 30px;
  }
  .productimg {
    right: 0;
  }
  /* galeri */
  .nstitle {
    font-size: 30px;
  }
  .nstitlesm {
    margin-bottom: 20px;
  }
  .contentgaleri {
    width: 100%;
  }
  .detailcaption {
    position: absolute;
    display: flex;
    opacity: 0;
    width: 100%;
    flex-direction: column;
    top: 0;
    color: white;
    gap: 10px;
    height: 100%;
    text-align: center;
    transition: all 0.3s ease-in-out;
  }
  /* .detailcaption h1 {
    font-size: 10px;
  } */
  .detailcaption p {
    font-size: 14px;
  }
}