/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/* 기본 스타일 */
.product {
    /* 원하는 스타일 설정 */
}

/* 576px 이하 화면 크기에 대한 스타일 */
@media (max-width: 576px) {
    .product {
        width: 50%; /* 화면 너비의 50%로 설정하여 2개의 상품을 한 줄에 표시 */
    }
}

.button {
	background-color: white; /* 버튼의 기본 배경색을 흰색으로 설정 */
	border-radius: 23px;
	padding: 10px 20px; /* 버튼 내용과 여백 설정 (원하는 크기로 조정) */
	color: black; /* 버튼 텍스트 색상 설정 */
	transition: background-color 0.3s ease-in-out; /* 호버 시 배경색 전환 애니메이션 설정 */
	text-decoration: none; /* 링크 텍스트 밑줄 제거 */
}

.button:hover {
	background-color: red; /* 호버 시 배경색을 빨간색으로 변경 */
}

.bg-overlay-content {
    position: relative;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 768px) { /* 모바일 화면 크기에 따라 조정 */
  .bg-overlay {
    display: none; /* 요소 숨기기 */
  }
}

h1, h2, h3, h4, p, span {
  color: #777 !important;
}

.font-body {
  color: #777 !important;
}

.bi-play-circle-fill {
    font-size: 150px !important;
    color: white !important;
}