@font-face {
  font-family: 'Oswald';
  src: url('fonts/Oswald-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('fonts/Oswald-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('fonts/Oswald-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('fonts/Oswald-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('fonts/Oswald-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('fonts/Oswald-ExtraLight.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

.reviews-section {
  background-color: #d8bca4;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  /* color: red */
  color: #6f6451;
}

.body {
  background-color: #e1dedb;
  line-height: 1.2;
}

.gold-text {
  color: #bf8c4e;
  font-size: 20px;
  font-weight: 500;
  text-transform: uppercase;
}

.grey-text {
  color: #888;
  font-weight: 400;
}

.product-main-image-holder {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.product-image-main {
  position: static;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.product-thumbnail-images {
  position: absolute;
  left: 0%;
  top: auto;
  right: 0%;
  bottom: 0%;
}

.thumbnail-image-holder {
  display: flex;
  overflow: hidden;
  width: 72px;
  height: 97px;
  min-height: 97px;
  min-width: 72px;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
}

.thumbnail-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.thumbnails-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  grid-column-gap: 10px;
}

.thumbnails-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 20px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  grid-column-gap: 12px;
}

.image-box {
  width: 400px;
  /* Adjust to desired width */
  height: 400px;
  /* Adjust to desired height */
  overflow: hidden;
}

.image-box img {
  width: auto;
  height: 400px;
  /* Maintain aspect ratio */
}

.selected-celebrity-sticky {
  position: fixed;
  top: 70%;
  right: 10px;
  z-index: 1000;
  /* 이 값은 다른 요소 위에 레이어링되도록 도와줍니다. 필요에 따라 조정하세요. */
  width: 15%;
  /* 적절한 너비를 설정하세요. */
  background-color: white;
  /* 배경색이 필요하다면 추가하세요. */
  padding: 0.5rem;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  /* 선택적: 오른쪽 그림자 효과 */
}

.selected-celebrity-sticky div {
  text-align: center;
}

.navfix {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.7);
  /* Black background with 50% transparency */
  padding: 10px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  /* Optional: Add a subtle shadow for depth */
  z-index: 1000;
  /* Ensure navbar stays on top */
}

.navbar a:hover {
  text-decoration: underline;
}

.content {
  padding: 60px;
  /* Add padding to avoid content being hidden under navbar */
}

.image-container img {
  /* Adjust the width and height as necessary, set object-fit to cover to ensure the image covers the area */
  width: 100%;
  height: 100%;
  /* Your desired height */
  object-fit: cover;
  object-position: center;
  /* This will center the image horizontally */
}

.image-container {
  width: 1400px;
  height: 400px;
  overflow: hidden;
}

.celebrity-image-container img {
  /* Adjust the width and height as necessary, set object-fit to cover to ensure the image covers the area */
  width: 100%;
  height: 100%;
  /* Your desired height */
  object-fit: cover;
  object-position: center;
  /* This will center the image horizontally */
}

.celebrity-image-container {
  width: 550px;
  height: 550px;
  overflow: hidden;
}

.gift-image-container img {
  /* Adjust the width and height as necessary, set object-fit to cover to ensure the image covers the area */
  width: 100%;
  height: 100%;
  /* Your desired height */
  object-fit: cover;
  object-position: center;
  /* This will center the image horizontally */
}

.gift-image-container {
  width: 550px;
  height: 550px;
  overflow: hidden;
}

/* In your external stylesheet */
.breadcrumb-item a {
  color: #6f6451 !important; /* Set text color to black */
  text-decoration: none !important; /* Remove underline */
}

.btn-gift-detail-width {
  width: 355px;
}

.table {
  color: #6f6451;
  font-weight: normal;
}

.table th, .table td {
  color: #6f6451;
  font-weight: normal;
}

h1 {
  color: #6f6451;
  font-weight: normal;
}

h2 {
  color: #6f6451;
  font-weight: normal;
}

h3 {
  color: #6f6451;
  font-weight: normal;
}

h4 {
  color: #6f6451;
  font-weight: normal;
}

h5 {
  color: #6f6451;
  font-weight: normal;
}

.navbar-brand {
  color: #6f6451;
}

/* Add this class in your external stylesheet or in a <style> tag in the <head> section of your HTML */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
  color: #6f6451;
}

.nav-link {
  color: #6f6451;
}

.nav-link.disabled {
  color: #6f6451;
}

.btn-info {
  color: white;
}

a {
  color: #6f6451;
  text-decoration: none !important; /* Remove underline */
}

.card-text {
  margin-bottom: 3px;
  background-color: #f3f3f3;
  border: 1px solid #ddd;
}

.pagination .page-item.active .page-link {
  background-color: white; /* Set your desired color here */
  border-color: #dee2e6; /* Update this if you want a different border color */
  color: #6f6451;
}

.pagination .page-item .page-link {
  background-color: white; /* Set background color for all page links */
  color: #A9A9A9; /* Set text color if needed */
}

.owl-carousel .owl-item {
  position: relative;
  width: 100%; /* or specific width */
}

.owl-carousel .owl-item::before {
  content: "";
  display: block;
  padding-top: 100%; /* This creates a square aspect ratio */
}

.owl-carousel .owl-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cover the square area, potentially cropping the image */
}

/* 기존의 CSS 외에 추가적인 미디어 쿼리를 추가합니다. */
.image-container,
.celebrity-image-container,
.gift-image-container {
  width: 100%;
  height: auto;
}

@media (max-width: 576px) {
  .image-container,
  .celebrity-image-container,
  .gift-image-container {
    height: 200px;
  }
  
  .table th, .table td {
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .image-container,
  .celebrity-image-container,
  .gift-image-container {
    height: 300px;
  }
}

.product-main-image-holder {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* 사진 아래 버튼 배치 */
}

.product-image-main {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.btn-celebrity-name,
.btn-gift-name {
  color: #6f6451; /* 버튼 글자 색상 변경 */
}

body {
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  color: #6f6451;
}

.container-lg {
  margin-bottom: 30px;
}

.gift-image {
  width: 100%;
  height: auto;
}

@media (min-width: 577px) {
  .gift-image {
    width: 100px;
    height: 100px;
  }
}

@media (max-width: 576px) {
  .gift-image {
    width: 50px;
    height: 50px;
  }
}

.input-group .form-control {
  height: auto;
}

.btn-danger.form-control,
.btn-dark.form-control {
  height: calc(2.25rem + 2px);
}

.promo-code-wrapper {
  display: flex;
}

.promo-code-input {
  flex: 0 0 100px;
}

.btn-warning {
  background-color: #ffa500;
  border-color: #ffa500;
  color: white;
}