body {
  color: var(--dark);
  background-color: #f9f4eb;
  font-family: "Manrope", sans-serif;
  line-height: 1.5;
}

:root {
  --gar: "EB Garamond", serif;
  --man: "Manrope", sans-serif;
  --dark: #201611;
  --yellow: #d3ae59;
  --white: #ffffff;
  --red: #eb5d5f;
  --green: #00b906;
  --gray: #706868;
  --border: 1px solid #ebd885;
  --grd_1: radial-gradient(50% 50% at 50% 50%, #e2c792 0%, #bfa057 100%);
  --grd_3: radial-gradient(50% 50% at 50% 50%, #ddbe82 0%, #6e4a0c 100%);
  --gold: radial-gradient(99.49% 53.2% at 52.24% 46.8%, #faeaa5 0%);
  --gold_2: radial-gradient(
    99.49% 53.2% at 52.24% 46.8%,
    #faeaa5 0%,
    #c89f3a 100%
  );
  --choco: #432b00;
}

/* width */
::-webkit-scrollbar {
  width: 4px;
  height: 2px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #432b00;
  border-radius: 6px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #d3ae59;
  border-radius: 6px;
}
a {
  text-decoration: none;
}
img {
  max-width: 100%;
}
ul,
li {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
p {
  margin: 0px;
}
hr{
  background-color: #D8C9A7;
  border-color: #D8C9A7;
  opacity: 1;
}
.text-choco {
  color: var(--choco);
}
.mb-16 {
  margin-bottom: 16px !important;
}
.mt-16 {
  margin-top: 16px;
}
.mb-24 {
  margin-bottom: 24px !important;
}
.mb-30 {
  margin-bottom: 30px;
}
.m-40 {
  margin: 40px 0px;
}
.mt-40 {
  margin-top: 40px;
}
.fs-12 {
  font-size: 12px;
}

.fs-14 {
  font-size: 14px;
}
.form-group > label {
  font-size: 14px;
  color: #432b00;
}
.form-group > .form-control {
  padding: 16px;
  background-color: transparent;
  border: 1px solid rgba(67, 43, 0, 0.4);
  border-radius: 8px;
  font-size: 16px;
  color: #432b00;
  outline: 0;
  box-shadow: none;
  transition: all 0.3s;
}
.form-group > .form-control:focus {
  border-color: #432b00;
}
.form-group > .form-control::placeholder {
  color: rgb(67 43 0 / 50%);
}
.form-group select.form-control {
  background: url(../images/arrow-down.svg) no-repeat right;
  -webkit-appearance: none;
  background-position-x: calc(100% - 14px);
  background-size: 14px;
}
.form-check {
  font-size: 16px;
  color: #201611;
}
.form-check-input:checked {
  background-color: #432b00;
  border-color: #432b00;
}
.form-check > input {
  height: 18px;
  width: 18px;
  background-color: transparent;
  border: 1px solid rgb(67 43 0 / 80%) !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.form-check > label > a {
  font-weight: 600;
  color: #432b00;
  text-decoration: underline;
}
.form-check > label {
  padding-left: 4px;
}

.btn-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
  user-select: none;
  -webkit-user-select: none;
}

/* Header */
.main-header.fixed-header {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 999;
    padding: 0px 0px;
    background: rgb(67 43 0 / 80%);
    box-shadow: 0 4px 30px rgb(181 181 181 / 20%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    animation: slideDown 0.35s ease-out;
}
.main-header.fixed-header .navbar {
    padding: 0px;
}
@keyframes slideDown {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }
}
.navbar-nav {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
.navbar {
  z-index: 999;
}
.navbar-nav > .nav-item {
  position: relative;
  padding-right: 60px;
}
.nav-item > .nav-link {
  font-size: 20px;
  text-transform: uppercase;
  color: #ecd97d;
  padding: 0px;
  position: relative;
  transition: all 0.3s;
}
.nav-item > .nav-link::before {
  content: "";
  height: 1px;
  width: 100%;
  background-color: #ecd97d;
  position: absolute;
  bottom: -6px;
  opacity: 0;
  visibility: hidden;
}
.nav-item > .nav-link.active::before {
  opacity: 1;
  visibility: visible;
}
.navbar-nav > .nav-item::after {
  content: "";
  height: 20px;
  width: 20px;
  background-image: url(../images/h-star.png);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 5px;
  right: 20px;
}
.navbar-nav > .nav-item:last-child {
  padding-right: 0px;
}
.navbar-nav > .nav-item:last-child::after {
  content: none;
}
header {
  padding: 12px 0px;
  background-color: var(--choco);
}
.toggler-btn {
  width: 44px;
  height: 44px;
  background-color: transparent;
  border: none;
  display: none;
  justify-content: flex-end;
  align-items: center;
}
.brand-logo {
  max-width: 72px;
  width: 100%;
  display: block;
}
.brand-logo img {
  width: 100%;
}

/* Modal========= */
.modal .modal-dialog {
  max-width: 536px;
}

.modal .modal-content {
  background-color: #f9f4eb;
  border-radius: 20px;
}

.modal .modal-content > .modal-body {
  padding: 30px;
}

.modal.fade .modal-dialog {
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);
  max-width: 600px;
}
.modal.show .modal-dialog {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.modal-backdrop {
  opacity: 1 !important;
  background-color: rgb(0 0 0 / 80%);
}

.new_blur .modal-backdrop {
  backdrop-filter: blur(15px);
}

.modal .btn-close {
  background: transparent;
  padding: 0px;
  border: 0px;
  height: auto;
  width: auto;
  opacity: 1;
  box-shadow: none;
}

.btn.btn-primary {
  font-size: 16px;
  color: #432b00 !important;
  font-weight: 600;
  padding: 14px 24px;
  background: radial-gradient(
    99.49% 53.2% at 52.24% 46.8%,
    #faeaa5 0%,
    #c89f3a 100%
  );
  border-radius: 10px;
  border: 0px;
  outline: 0;
  box-shadow: none;
  transition: all 0.3s;
}
.btn.btn-primary:hover {
  opacity: 0.8;
}

footer {
  background-color: #432b00;
  padding: 80px 0px 40px;
}
.f-logo {
  margin-bottom: 50px;
}
.f-logo a {
  max-width: 160px;
  width: 100%;
  display: block;
  margin: 0 auto;
}
.f-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 80px;
  justify-content: center;
}
.f-menu > a {
  font-size: 28px;
  color: #ecd97d;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  transition: all 0.3s;
}
.f-menu > a:hover {
  color: #f9f2da;
}
.f-menu > a path {
  transition: all 0.3s;
}
.f-menu > a:hover path {
  fill: #f9f2da;
}
.f-main > .page-media {
  margin: 40px 0px;
}
.f-main > p {
  font-size: 18px;
  color: #ecd97d;
}
.f-copyright > p {
    font-size: 18px;
    color: #ECD97D;
}
.fc-menu > a {
    font-size: 18px;
    color: #ECD97D;
    position: relative;
    padding-right: 50px;
    transition: all 0.3s;
}
.fc-menu > a:last-child {
    padding-right: 0px;
}
.fc-menu > a:hover {
    color: #F9F2DA;
}
.fc-menu > a::after {
    content: "";
    height: 20px;
    width: 20px;
    background-image: url(../images/h-star.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 5px;
    right: 15px;
}
.fc-menu > a:last-child:after {
    content: none;
}
.f-menu {
    gap: 38px;
}
/* =========================== NEW CSS*/

button {
  border: none;
  outline: none;
  background-color: transparent;
}
input {
  background-color: transparent;
  border: none;
  outline: none;
  width: 100%;
  vertical-align: middle;
}
input[type="password"] {
  appearance: none;
  -webkit-appearance: none;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}
input[type="number"] {
  appearance: textfield;
}
.app-btn,
.outline-btn {
  border-radius: 10px;
  padding: 14px 24px;
  font-size: 18px;
  color: var(--choco);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: radial-gradient(
    99.49% 53.2% at 52.24% 46.8%,
    #faeaa5 0%,
    #c89f3a 100%
  );
  font-weight: 500;
  background-size: 100% 100%;
  transition: all 0.3s;
}
.outline-btn {
  background: transparent;
  border: 1px solid var(--choco);
}
.app-btn.secondary {
  background: #b2b2b2;
  color: #5c5c5c;
}

.app-btn:hover {
  background-size: 150% 200%;
  transition: all 0.3s;
}
.fs-20 {
  font-size: 20px;
}
.modal.fade .sf-modal {
  max-width:500px;
}
.modal.fade .sf-modal.modal-500 {
  max-width:545px;
}

.modal.fade .sf-modal.modal-lg {
   max-width: 960px;
}
.sf-modal .modal-content {
  padding: 0;
  border: 1px solid var(--yellow);
  position: relative;
  border-radius: 20px;
}
.sf-modal .modal-content .inner-content {
  padding: 30px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}
.modal-close-btn {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M12.0008%2013.4L7.10078%2018.3C6.91745%2018.4834%206.68411%2018.575%206.40078%2018.575C6.11745%2018.575%205.88411%2018.4834%205.70078%2018.3C5.51745%2018.1167%205.42578%2017.8834%205.42578%2017.6C5.42578%2017.3167%205.51745%2017.0834%205.70078%2016.9L10.6008%2012L5.70078%207.10005C5.51745%206.91672%205.42578%206.68338%205.42578%206.40005C5.42578%206.11672%205.51745%205.88338%205.70078%205.70005C5.88411%205.51672%206.11745%205.42505%206.40078%205.42505C6.68411%205.42505%206.91745%205.51672%207.10078%205.70005L12.0008%2010.6L16.9008%205.70005C17.0841%205.51672%2017.3174%205.42505%2017.6008%205.42505C17.8841%205.42505%2018.1174%205.51672%2018.3008%205.70005C18.4841%205.88338%2018.5758%206.11672%2018.5758%206.40005C18.5758%206.68338%2018.4841%206.91672%2018.3008%207.10005L13.4008%2012L18.3008%2016.9C18.4841%2017.0834%2018.5758%2017.3167%2018.5758%2017.6C18.5758%2017.8834%2018.4841%2018.1167%2018.3008%2018.3C18.1174%2018.4834%2017.8841%2018.575%2017.6008%2018.575C17.3174%2018.575%2017.0841%2018.4834%2016.9008%2018.3L12.0008%2013.4Z%22%20fill%3D%22%23706868%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 24px;
  height: 24px;
  position: absolute;
  left: auto;
  right: 20px;
  top: 20px;
  transition: 0.3s ease;
  z-index: 5;
}
.modal-close-btn:hover {
  scale: 1.2;
}
.sf-auth-modal-heading {
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 24px;
}
.sf-auth-modal-heading h3 {
  font-family: var(--gar);
  font-weight: 600;
  font-size: 32px;
  line-height: 140%;
  background: radial-gradient(50% 50% at 50% 50%, #ddbe82 0%, #6e4a0c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.sf-auth-modal-heading h3.gradiant-none {
    background: transparent;
    -webkit-text-fill-color: inherit;
    color: #432B00;
}
.sf-auth-modal-heading p {
  font-size: 16px;
  color: var(--choco);
}
.sf-auth-modal-heading p span {
  color: var(--yellow);
}
input::placeholder {
  color: #a1947f;
}
.auth-img {
  max-width: 72px;
  margin: 0 auto;
  margin-bottom: 16px;
}
.auth-img img {
  width: 100%;
}
input::-webkit-input-placeholder {
  color: #a1947f;
}

input:-ms-input-placeholder {
  color: #a1947f;
}

input::-ms-input-placeholder {
  color: #a1947f;
}
.inp-group:not(:last-child) {
  margin-bottom: 16px;
}
.inp-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--choco);
  font-size: 14px;
}
.inp-group label span {
  color: var(--red);
}
.input-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 15px 16px 16px 16px;
  gap: 10px;
  height: 54px;
  border: 1px solid rgba(67, 43, 0, 0.4);
  border-radius: 8px;
}
.input-wrapper textarea {
  background-color: transparent;
  border: none;
  outline: none;
  width: 100%;
  min-height: 56px;
}
.input-wrapper:focus-within {
  border-color: #432b00;
}
.inp-group .text-sucsess {
    color: #00A60B;
    font-size: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.form-check-label a {
  font-weight: 600;
  color: var(--choco);
  text-decoration: underline;
}
.helper-text {
  font-size: 12px;
  line-height: 10px;
  color: var(--choco);
}
.helper-text.error {
  color: var(--red);
}
.helper-text.success {
  color: var(--green);
}
.input-wrapper.error {
  border-color: var(--red);
}
.resend-btn,
.resend-reset-btn {
  white-space: nowrap;
  font-size: 14px;
  text-decoration: underline;
  color: var(--choco);
}
.inp-elem {
  flex-shrink: 0;
}
.eye {
  width: 24px;
  height: 24px;
  background-image: url(../images/close-eye.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: 0.2s ease;
}
.eye.show {
  background-image: url(../images/open-eye.png);
}
.fr-btn {
  text-decoration: underline;
  color: var(--choco);
  font-size: 14px;
}
.auth-nav {
  font-size: 16px;
  color: var(--dark);
  text-align: center;
}
.auth-nav button {
  font-weight: 600;
  text-decoration: underline;
}
.support-link {
  background: #432b00;
  height: 38px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.support-link a {
  font-size: 14px;
  text-decoration: underline;
  color: #f9f2da;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.support-link a::before {
  content: "";
  width: 16px;
  height: 16px;
  width: 16px;
  height: 17px;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2217%22%20viewBox%3D%220%200%2016%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_669_334)%22%3E%3Cpath%20d%3D%22M2%205.16131C2%204.80768%202.14048%204.46855%202.39052%204.2185C2.64057%203.96845%202.97971%203.82797%203.33333%203.82797H12.6667C13.0203%203.82797%2013.3594%203.96845%2013.6095%204.2185C13.8595%204.46855%2014%204.80768%2014%205.16131V11.828C14%2012.1816%2013.8595%2012.5207%2013.6095%2012.7708C13.3594%2013.0208%2013.0203%2013.1613%2012.6667%2013.1613H3.33333C2.97971%2013.1613%202.64057%2013.0208%202.39052%2012.7708C2.14048%2012.5207%202%2012.1816%202%2011.828V5.16131Z%22%20stroke%3D%22%23F9F2DA%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M2%205.16129L8%209.16129L14%205.16129%22%20stroke%3D%22%23F9F2DA%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/g%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_669_334%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%20transform%3D%22translate(0%200.494629)%22/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: block;
}
.spinner {
  width: 20px;
  height: 20px;
  background-image: url(../images/loader.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: spin 1s linear infinite;
  display: none;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.app-btn.disabled {
  opacity: 0.7;
}
.app-btn.disabled .spinner {
  display: inline-block;
}
.timer {
  color: var(--red);
  font-size: 14px;
  font-weight: 500;
}

#exclusive-access-modal .modal-dialog {
  max-width: 580px;
}

.modal-header {
  padding: 30px 30px 6px;
  border: 0px;
}

.modal-header > .modal-title {
  font-size: 23px;
  color: #432b00;
  font-family: "EB Garamond", serif;
  text-transform: uppercase;
}

.exclusive-access-text > p {
  font-size: 18px;
  color: #432b00;
  margin-bottom: 30px;
}

.exclusive-access-text {
  max-width: 470px;
  margin: 0px auto;
}

.exclusive-input .form-group > .form-control {
  border-color: #d3ae59;
  font-size: 20px;
}

.form-group > .error-msg {
  display: block;
  font-size: 16px;
  color: #e80000;
  margin-top: 6px;
  text-align: center;
}

.modal .page-btn span {
  display: block;
  background: radial-gradient(50% 50% at 50% 50%, #ddbe82 0%, #6e4a0c 100%);
  padding: 2px;
  border-radius: 12px;
}

/* ==================== */
.fs-18 {
  font-size: 18px;
}
.sf-home {
  padding: 80px 0;
}
.sf-content {
  max-width: 560px;
}
.sf-content h1 {
  font-family: var(--gar);
  font-size: 50px;
  text-align: center;
  color: var(--yellow);
  font-weight: 600;
}
.sf-content img {
  max-width: 586px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 0;
}
.sf-home::after {
  content: "";
  height: 60px;
  width: 100%;
  background-image: url(../images/section-devider.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  display: block;
  margin-top: 38px;
}
.celeb-list {
  padding-bottom: 100px;
}
.celeb-card {
  padding: 24px;
  background: radial-gradient(
    139.38% 132.36% at 91.7% 62.34%,
    #f0e3c9 0%,
    #e4d4ae 100%
  );
  border-radius: 19px;
  position: relative;
  margin-bottom: 4px;
}
.celeb-card::after {
  content: "";
  height: calc(100% + 3px);
  width: calc(100% + 3px);
  background: var(--gold_2);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: inherit;
  z-index: -1;
  border-radius: 20px;
}

.celeb-img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1.45/1;
  background: linear-gradient(180deg, #724e11 0%, #b49665 100%);
  border-radius: 14px;
  background-size: 100% 100%;
  transition: 0.3s ease-in-out;
}
.celeb-card:hover .celeb-img {
  background-size: 200% 200%;
}
.celeb-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}
.reveal-card {
  position: relative;
  overflow: hidden;
}
.reveal-card .celeb-img {
  background: #ffeed0;
}

.celec-card-content {
  margin-top: 18px;
}
.celeb-card-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.celeb-card-name h2 {
  font-size: 26px;
  color: var(--choco);
  font-weight: 600;
  margin: 0;
  font-family: var(--gar);
  max-width: 168px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.custom-name h2 {
  font-size: 22px;
  color: var(--choco);
  font-weight: 600;
  margin: 0;
  font-family: var(--gar);
}
.celeb-type {
  font-size: 14px;
  font-weight: 600;
  color: var(--choco);
  padding: 2px 16px;
  border-radius: 20px;
  border: 1px solid #714d0f;
}
.celeb-type p {
  background: radial-gradient(50% 50% at 50% 50%, #ddbe82 0%, #6e4a0c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.profile-btn {
  border-radius: 10px;
  border: 1px solid var(--yellow);
  padding: 16px 10px;
  display: flex;
  align-items: center;
  height: 56px;
}
.profile-btn img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 40px;
}
.profile-btn p {
  margin: 0 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--yellow);
  max-width: 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-btn::after {
  display: inline-block;
  margin-left: 0.1em;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.65004 5.06061L11.5998 0.110886L13.014 1.5251L6.65004 7.88911L0.286133 1.5251L1.70034 0.110886L6.65004 5.06061Z' fill='%23ECD97D'/%3E%3C/svg%3E");
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
}
.profile-menu {
  padding: 16px;
  border-radius: 8px;
  border: 1px solid var(--yellow);
  min-width: 216px;
}
.profile-menu .dropdown-item {
  padding: 12px 14px;
  border-radius: 8px;
  color: var(--choco);
  font-size: 16px;
  background-color: var(--white);
  transition: 0.3s linear;
}
.profile-menu .dropdown-item:hover {
  background-color: #f9f2da;
}
.profile-menu .dropdown-item img {
  width: 24px;
  height: 24px;
  object-fit: cover;
  margin-right: 10px;
}
.dropdown-item.log-out {
  color: var(--red);
}
.cart-btn {
  border-radius: 10px;
  border: 1px solid var(--yellow);
  height: 56px;
  width: 56px;
  background: var(--grd_3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.cart-btn .cart-count {
  width: 22px;
  height: 22px;
  background-color: #ecd97d;
  position: absolute;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  top: 5px;
  right: 4px;
  color: var(--dark);
}
.page-heading {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}
.page-heading h1 {
  font-size: 44px;
  font-weight: 500;
  font-family: var(--gar);
  color: var(--choco);
}
.page-heading .back-btn {
  font-size: 18px;
  font-weight: 500;
  color: var(--dark);
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-heading .back-btn img {
  width: 24px;
  height: 24px;
}
.celeb-details-wrapper {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #c89f3a;
}
.celeb-cover-img {
  width: 100%;
  height: 280px;
}
.celeb-cover-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.celeb-profile-content {
  padding: 20px 40px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.celeb-social {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
}
.celeb-s-icon {
  height: 44px;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--choco);
  border-radius: 8px;
  transition: 0.3s ease;
}
.celeb-s-icon:hover {
  background-color: var(--choco);
}
.celeb-s-icon:hover img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(16%)
    hue-rotate(245deg) brightness(106%) contrast(100%);
}
.celeb-profile-content-l {
  padding-left: 214px;
  position: relative;
}
.celeb-profile-img {
  width: 186px;
  height: 186px;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 100%;
  background: linear-gradient(180deg, #724e11 0%, #b49665 100%);
  position: absolute;
  left: 0;
  bottom: 0;
}
.celeb-profile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom center;
}
.celeb-profile-name h2 {
  font-size: 56px;
  font-family: var(--gar);
  font-weight: 600;
  color: var(--choco);
}
.celeb-profile-content-l {
  display: flex;
  align-items: center;
}
.celeb-profile-name h2 {
  display: flex;
  gap: 16px;
  align-items: center;
}
.ver-badge {
  width: 28px;
  height: 28px;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.6004 1.83398C20.3356 1.41091 19.9455 1.08091 19.4844 0.88993C19.0233 0.698946 18.5141 0.656478 18.0277 0.768438L14.5757 1.56136C14.222 1.64267 13.8544 1.64267 13.5006 1.56136L10.0486 0.768438C9.56223 0.656478 9.05305 0.698946 8.59194 0.88993C8.13082 1.08091 7.74072 1.41091 7.47594 1.83398L5.59444 4.83671C5.40245 5.14389 5.14326 5.40308 4.83608 5.59699L1.83335 7.47849C1.41101 7.74304 1.0815 8.1325 0.890555 8.59283C0.699613 9.05316 0.656712 9.56151 0.767808 10.0473L1.56073 13.5031C1.64174 13.8563 1.64174 14.2232 1.56073 14.5764L0.767808 18.0303C0.65628 18.5164 0.698965 19.0251 0.889928 19.4859C1.08089 19.9466 1.41065 20.3364 1.83335 20.601L4.83608 22.4825C5.14326 22.6745 5.40245 22.9337 5.59636 23.2409L7.47787 26.2436C8.01928 27.1095 9.05218 27.5376 10.0486 27.3092L13.5006 26.5162C13.8544 26.4349 14.222 26.4349 14.5757 26.5162L18.0296 27.3092C18.5157 27.4207 19.0245 27.378 19.4852 27.187C19.9459 26.9961 20.3357 26.6663 20.6004 26.2436L22.4819 23.2409C22.6739 22.9337 22.9331 22.6745 23.2403 22.4825L26.2449 20.601C26.6676 20.336 26.9972 19.9458 27.1879 19.4847C27.3785 19.0236 27.4207 18.5145 27.3085 18.0284L26.5175 14.5764C26.4362 14.2226 26.4362 13.855 26.5175 13.5012L27.3104 10.0473C27.4222 9.56142 27.3798 9.0528 27.1892 8.5921C26.9985 8.1314 26.6692 7.7415 26.2468 7.47657L23.2422 5.59507C22.9354 5.40273 22.6762 5.14347 22.4838 4.83671L20.6004 1.83398ZM19.6347 9.75742C19.7534 9.53906 19.7829 9.28315 19.7168 9.04354C19.6507 8.80394 19.4942 8.5993 19.2803 8.4727C19.0664 8.3461 18.8117 8.30741 18.5699 8.36475C18.328 8.4221 18.1179 8.57102 17.9836 8.78019L12.963 17.2777L9.9315 14.3748C9.84156 14.2824 9.73395 14.2092 9.61508 14.1593C9.49621 14.1094 9.36852 14.084 9.23962 14.0846C9.11071 14.0852 8.98325 14.1117 8.86481 14.1626C8.74638 14.2135 8.63941 14.2877 8.55029 14.3808C8.46116 14.4739 8.3917 14.584 8.34606 14.7046C8.30041 14.8251 8.27951 14.9537 8.2846 15.0825C8.28969 15.2113 8.32067 15.3377 8.37569 15.4543C8.43071 15.5709 8.50865 15.6752 8.60485 15.7609L12.5099 19.5028C12.6144 19.6028 12.7402 19.6778 12.8778 19.7223C13.0154 19.7669 13.1612 19.7797 13.3045 19.76C13.4477 19.7402 13.5847 19.6884 13.7051 19.6083C13.8255 19.5282 13.9262 19.4219 13.9998 19.2974L19.6347 9.75742Z' fill='%2334C759'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  flex-shrink: 0;
  display: block;
  margin-top: 12px;
}
.quick-details {
  display: flex;
  align-items: center;
  gap: 16px;
}
.quick-details span {
  font-size: 24px;
  color: var(--choco);
  line-height: 100%;
  padding: 1px;
}
.quick-details span:not(:last-child) {
  border-right: 2px solid #8c857d;
  padding: 1px 16px 1px 0;
}
.div-img {
  margin: 50px 0px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.div-img img {
  min-width: 1080px;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.about-celeb {
  padding: 10px 40px 40px 40px;
}
.about-content {
  max-width: 568px;
  width: 100%;
}
.about-content h3 {
  font-size: 26px;
  font-family: var(--gar);
  color: var(--choco);
  position: relative;
  font-weight: 600;
}
.about-content h3::before {
  content: "";
  height: 4px;
  width: 32px;
  background-color: var(--choco);
  position: absolute;
  border-radius: 4px;
  bottom: -8px;
}
.about-content p {
  font-size: 18px;
  margin-top: 16px;
  color: var(--choco);
}
.celeb-timer {
  padding: 30px;
  border-radius: 16px;
  border: 1px solid #c89f3a;
  background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.4),
      rgba(255, 255, 255, 0.4)
    ),
    linear-gradient(103.57deg, #c89f3a -32%, #faeaa5 51.51%, #f2c250 122.72%);
  border-radius: 16px;
}
.celeb-timer h3 {
  font-size: 24px;
  font-weight: 600;
  font-family: var(--gar);
  color: var(--choco);
}
.celeb-timer p {
  font-size: 18px;
}

.timer-title {
  height: 100%;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  gap: 6px;
  font-weight: 500;
  width: 100%;
  background-color: var(--choco);
  color: #f9f2da;
  line-height: 100%;
}
.celeb-timer-wrapper {
  border-radius: 8px;
  overflow: hidden;
  width: 100%;

  margin-top: 40px;
  background-color: #f9f2da;
}
.tt-icon {
  filter: brightness(0) saturate(100%) invert(91%) sepia(31%) saturate(294%)
    hue-rotate(320deg) brightness(106%) contrast(95%);
  width: 20px;
  height: 20px;
}
.timer-counter {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 24px;
  padding: 10px;
}
.time-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 8px 10px;
  gap: 4px;
  border-radius: 8px;
  border: 1px solid #d8c9a7;
  position: relative;
}
.time-box:not(:last-child)::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%225%22%20height%3D%2220%22%20viewBox%3D%220%200%205%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Crect%20x%3D%220.5%22%20width%3D%224%22%20height%3D%224%22%20rx%3D%222%22%20fill%3D%22%23432B00%22/%3E%3Crect%20x%3D%220.5%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20rx%3D%222%22%20fill%3D%22%23432B00%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  width: 4px;
  height: 20px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: auto;
  right: -20px;
}

.time-box .counter {
  font-size: 34px;
  font-weight: 600;
  color: var(--choco);
  line-height: 100%;
}
.time-box p {
  font-size: 14px;
  line-height: 120%;
  color: var(--choco);
}
.t-details {
  border-radius: 0;
}
/* .ticket-details-wrapper {
  padding: 40px 40px 70px 40px;
} */
.free-ticket {
  padding: 40px;
}

.marquee-container {
  width: 100%;
  overflow: hidden;
  background: var(--choco);
  white-space: nowrap;
  position: relative;
  padding: 12px;
}

.marquee-inner {
  display: inline-block;
  animation: marquee 20s linear infinite;
}

.marquee-inner p {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-right: 8px;
  font-size: 24px;
  font-weight: 500;
  white-space: nowrap;
  color:#F9F2DA;
}
.marquee-inner p::before {
  content: "";
  display: block;
  background-image: url(../images/star-lg.png);
  width: 24px;
  height: 24px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Animation */
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.section-title h2 {
  font-size: 44px;
  font-weight: 600;
  font-family: var(--gar);
  color: var(--choco);
}
.sf-modal-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.sf-modal-heading h3 {
  font-size: 28px;
  font-weight: 500;
  text-align: center;
  font-family: var(--gar);
  color: var(--choco);
}
.sf-modal-heading p {
  font-size: 16px;
  text-align: center;
}
.inf-btn {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  padding: 0;
}
.inf-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.heading-img {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.heading-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.info-content li {
  list-style: disc;
  margin-left: 30px;
  color: var(--choco);
  margin-bottom: 4px;
}
.ticket-item-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 14px;
}
.cart-ticket-details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ticket-item {
  width: 100%;
  max-width: 420px;
  height: 206px;
  background-image: url(../images/ticket-bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s linear;
}
.ticket-item:hover {
  filter: drop-shadow(2px 2px 0px rgba(153, 125, 2, 0.658));
}
.ticket-item.claimed {
  filter: saturate(0);
  opacity: 0.8;
}
.ticket-item::before {
  content: attr(data-label);
  font-size: 20px;
  font-weight: 600;
  font-family: var(--gar);
  text-transform: uppercase;
  color: var(--choco);
  position: absolute;
  transform: translate(-50%, -50%) rotate(-90deg);
  top: 50%;
  left: 38px;
}
.ticket-item::after {
  content: attr(data-label);
  font-size: 20px;
  font-weight: 600;
  font-family: var(--gar);
  text-transform: uppercase;
  color: var(--choco);
  position: absolute;
  transform: translate(50%, -50%) rotate(90deg);
  top: 50%;
  left: auto;
  right: 38px;
}
.ticket-sum {
  font-size: 24px;
  font-weight: 600;
  color: var(--choco);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.ticket-sum::before {
  content: "";
  width: 56px;
  height: 42px;
  background-image: url(../images/ticket-decor.svg);
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
}
.ticket-sum::after {
  content: "";
  width: 56px;
  height: 42px;
  background-image: url(../images/ticket-decor.svg);
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  transform: scaleX(-1);
}
.ticket-details {
  max-width: 240px;
  margin: 0 auto;
}
.clame-btn {
  margin-top: 34px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 14px 24px;
  height: 44px;
  background: radial-gradient(
    90.93% 90.93% at 50% 50%,
    #ba9243 0%,
    #6e4a0c 100%
  );
  border-radius: 8px;
  font-size: 18px;
  color: #fff4bf;
  border: 1px solid #6e4a0c;
  transition: 0.3s ease;
  background-size: 100% 100%;
  width: 100%;
}
.clame-btn:hover {
  background-size: 200% 200%;
}
.clame-btn.claimed {
  background: var(--grd_1);
  color: #ecd97d;
  border: 0;
  pointer-events: none;
  user-select: none;
}
.paid-pack {
  padding: 40px 40px 70px 40px;
  background-image: url(../images/paid-container-bg.png);
  background-size: cover;
  background-position: bottom centergit;
}
.paid-ticket-wrapper {
  margin-top: 48px;
  max-width: 1240px;
}
.paid-ticket {
  border-radius: 10px;
  background: url(../images/paid-bg.png);
  width: 100%;
  background-size: cover;
  transition: 0.3s linear;
}
.t-sm {
  width: 100%;
  max-width: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0 auto;
}
.t-lg {
  transform: scale(1.08);
}

.t-sm::before {
  content: "";
  height: 69px;
  width: 100%;
  background-image: url(../images/ticket-crown.png);
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
}
.t-sm::after {
  content: "";
  height: 69px;
  width: 100%;
  background-image: url(../images/ticket-crown.png);
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  transform: translateX(-3px) rotate(180deg);
}
.t-price-wrapper {
  height: 70px;
  margin: 28px 0;
}
.t-price-wrapper p {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  background: linear-gradient(
    103.84deg,
    #c89f3a -6.72%,
    #faeaa5 48.04%,
    #f2c250 108.33%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.t-price {
  font-size: 48px;
  text-align: center;
  font-family: var(--gar);
  font-weight: 700;
  background: linear-gradient(
    103.84deg,
    #c89f3a -6.72%,
    #faeaa5 48.04%,
    #f2c250 108.33%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.t-div {
  padding: 20px 0;
  width: 100%;
}
.t-div img {
  width: 100%;
  height: auto;
}
.t-entry {
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  background: var(--gold_2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.most-pop {
  padding: 4px 18px;
  border: 1px solid var(--yellow);
  width: max-content;
  border-radius: 50px;
  margin: 2px auto;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--gold_2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.store-sec {
    padding-bottom: 100px !important;
}
.stream-l {
    margin-bottom: 16px;
    height: 108px;
}
.stream-l > .most-pop {
    margin: 0px auto 12px;
}
.stream-l > .most-pop:last-child {
    margin: 0px auto 0px;
}
.suggest-celeb {
  padding: 50px 0;
}
.swiper-slide {
  max-width: 330px;
  width: 100%;
  padding: 4px;
}
.custom-pagination {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: end;
}
.swiper-pagination-bullet {
  width: 16px;
  height: 16px;
  background: transparent;
  border: 2px solid var(--dark);
}
.swiper-pagination-bullet-active {
  background: var(--choco);
  border-color: var(--choco);
}
.cart-details-wrapper,
.gift-card-main,
.setting-main {
  margin-bottom: 100px;
}
.empty-cart-wrapper {
  color: var(--choco);
}
.empty-cart-wrapper h4 {
  font-size: 28px;
  font-weight: 500;
  font-family: var(--gar);
}
.cart-img {
  width: 100%;
  max-width: 138px;
  margin: 0 auto;
}
.cart-img img {
  width: 100%;
  height: 100%;
}
.cart-details {
  border: var(--border);
  padding: 30px;
  border-radius: 12px;
  background-color: #fdf9f4;
  margin-bottom: 16px;
}
.total-sidebar {
  position: sticky;
  top: 20px;
}
.total-sun-wrapper {
  border: var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.free-note {
  background-color: var(--choco);
  color: #f9f2da;
  font-size: 16px;
  font-weight: 500;
  padding: 8px;
  text-align: center;
}
.total-sum {
  padding: 30px;
}
.celeb-cart-name {
  display: flex;
  align-items: center;
  gap: 10px;
}
.celec-cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  padding-left: 14px;
  padding-right: 14px;
  border-bottom: 1px solid #d8c9a7;
  margin-bottom: 8px;
}
.cc-img {
  width: 44px;
  height: 44px;
  border-radius: 100%;
  flex-shrink: 0;
  background: linear-gradient(180deg, #724e11 0%, #b49665 100%);
  overflow: hidden;
}
.cc-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}
.cc-name {
  font-weight: 700;
  color: var(--dark);
}
.cc-name span {
  color: var(--gray);
}
.del-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(../images/icon-trash.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 75%;
  transition: 0.1s ease;
  flex-shrink: 0;
}
.del-btn:hover {
  background-size: 90%;
}
.del-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ticket-action {
  width: 100%;
  max-width: 300px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.ticket-items {
  background-color: var(--white);
  padding: 10px 14px;
  border-radius: 8px;
}
.ticket-items:not(:last-child) {
  margin-bottom: 8px;
}
.packeg-name {
  width: 60px;
  height: 60px;
  aspect-ratio: 1/1;
  background-image: url(../images/packeg-img.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10px;
  font-family: var(--gar);
  display: flex;
  align-items: center;
  justify-content: center;
}
.packeg-name h4 {
  font-size: 12px;
  background: var(--gold_2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  margin-top: 6px;
  font-weight: 800;
}
.packeg-details {
  width: 100%;
  max-width: 290px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.p-price p {
  font-size: 20px;
  font-weight: 700;
}
.p-price span {
  font-size: 14px;
  color: var(--gray);
}
.qty-change {
  flex-shrink: 0;
}
.qty_input_btn {
  opacity: 1;
}
.qty-change input {
  max-width: 30px;
  text-align: center;
  font-size: 20px;
  font-weight: 500;
}
.qty-change button {
  width: 36px;
  height: 36px;
  background-color: #e6d7c2;
  flex-shrink: 0;
  border-radius: 10px;
  transition: 0.3s ease;
}
.qty-change button:hover {
  background-color: #f3e3ce;
}
.minus {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.16797 10H15.8346' stroke='%23432B00' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70%;
}
.plus {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0003 4.16672V15.8334M4.16699 10.0001H15.8337' stroke='%23432B00' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70%;
}
.gift-btn {
  background-color: var(--yellow);
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--choco);
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.gift-btn:hover {
  background-color: #dfb555;
}
.gift-btn img {
  width: 17px;
  height: 17px;
}
.gift-message {
  padding: 12px;
  background-color: #f9f2da;
  margin-top: 14px;
  border-radius: 8px;
  border: 1px solid #d8c9a7;
  font-size: 14px;
  gap: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.empty-cart-container {
  width: 100%;
  padding: 50px;
  background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.4),
      rgba(255, 255, 255, 0.4)
    ),
    linear-gradient(103.57deg, #c89f3a -32%, #faeaa5 51.51%, #f2c250 122.72%);
  border-radius: 12px;
  margin: 40px auto 60px;
}
.gift-message img {
  width: 18px;
  height: 18px;
}
.close-btn {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M12.0008%2013.4L7.10078%2018.3C6.91745%2018.4834%206.68411%2018.575%206.40078%2018.575C6.11745%2018.575%205.88411%2018.4834%205.70078%2018.3C5.51745%2018.1167%205.42578%2017.8834%205.42578%2017.6C5.42578%2017.3167%205.51745%2017.0834%205.70078%2016.9L10.6008%2012L5.70078%207.10005C5.51745%206.91672%205.42578%206.68338%205.42578%206.40005C5.42578%206.11672%205.51745%205.88338%205.70078%205.70005C5.88411%205.51672%206.11745%205.42505%206.40078%205.42505C6.68411%205.42505%206.91745%205.51672%207.10078%205.70005L12.0008%2010.6L16.9008%205.70005C17.0841%205.51672%2017.3174%205.42505%2017.6008%205.42505C17.8841%205.42505%2018.1174%205.51672%2018.3008%205.70005C18.4841%205.88338%2018.5758%206.11672%2018.5758%206.40005C18.5758%206.68338%2018.4841%206.91672%2018.3008%207.10005L13.4008%2012L18.3008%2016.9C18.4841%2017.0834%2018.5758%2017.3167%2018.5758%2017.6C18.5758%2017.8834%2018.4841%2018.1167%2018.3008%2018.3C18.1174%2018.4834%2017.8841%2018.575%2017.6008%2018.575C17.3174%2018.575%2017.0841%2018.4834%2016.9008%2018.3L12.0008%2013.4Z%22%20fill%3D%22%23706868%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 90%;
  background-position: center;
  width: 20px;
  height: 20px;
  transition: 0.1s ease;
}
.close-btn:hover {
  background-size: 100%;
}
.total-breakup li {
  margin-bottom: 16px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.total-breakup li .item-name {
  color: var(--gray);
  flex-shrink: 0;
}
.total-breakup li .qty {
  text-align: right;
  font-weight: 500;
}
.total-sum-item {
  padding: 16px 0;
  border-top: 1px solid #d8c9a7;
}
.pay-method {
  margin: 24px 0;
  border-radius: 8px;
  border: 1px solid #d8c9a7;
  padding: 16px;
  font-weight: 700;
  color: var(--choco);
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
}
.ticket-warning {
  padding: 10px 14px;
  background-color: #f6dddd;
  color: var(--red);
  margin-bottom: 16px;
  border-radius: 8px;
}
.ticket-warning .ticket-warning-item {
  font-size: 14px;
  list-style: disc;
  margin-left: 16px;
}
.ticket-warning .ticket-warning-item:not(:last-child) {
  margin-bottom: 3px;
}
.radio-container {
  display: block;
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  font-size: 16px;
  user-select: none;
}
.radio-container img {
  max-height: 24px;
}
.radio-container input {
  position: absolute;
  opacity: 0;
  left: 4px;
  top: 6px;
  cursor: pointer;
  width: fit-content;
}

.checkmark {
  position: absolute;
  top: 54%;
  transform: translate(-0%, -50%);
  left: 0;
  height: 20px;
  width: 20px;
  background-color: transparent;
  border-radius: 50%;
  border: 2px solid var(--gray);
  transition: 0.3s;
}

.radio-container:hover input ~ .checkmark {
  background-color: #f0f0f0;
}

.radio-container input:checked ~ .checkmark {
  background: var(--grd_3);
  border-color: #6e4a0c;
}
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.radio-container input:checked ~ .checkmark:after {
  display: block;
}

.radio-container .checkmark:after {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}
.order-wrapper:not(:last-child) {
  margin-bottom: 30px;
}
.selected-method {
  color: var(--choco);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 0;
}
.selected-method img {
  max-height: 24px;
}
.payment-confirmation {
  padding: 80px 0px;
}
.pmt-sts p {
  text-align: center;
  color: var(--choco);
}
.pmt-sts h4 {
  text-align: center;
  font-size: 32px;
  font-weight: 600;
  font-family: var(--gar);
  margin-top: 16px;
  background: var(--grd_3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.success-illustration {
  width: 150px;
  height: 150px;
  position: relative;
  margin: 0 auto;
}
.success-illustration .illus {
  position: absolute;
  transform-origin: center;
}
.success-illustration .illus.red {
  filter: brightness(0) saturate(100%) invert(39%) sepia(86%) saturate(1139%)
    hue-rotate(326deg) brightness(104%) contrast(84%);
}
.success-illustration .checked {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.success-illustration .illus:first-child {
  animation: rotate infinite linear 10s;
}
.success-illustration .illus:nth-child(2) {
  animation: rotate infinite linear 8s;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.trans-details {
  max-width: 950px;
  margin: 60px auto;
}
.td-card {
  padding: 30px;
  border-radius: 16px;
  border: var(--border);
  background-color: var(--white);
  width: 100%;
  height: 100%;
}
.td-card.fill {
  background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.4),
      rgba(255, 255, 255, 0.4)
    ),
    linear-gradient(103.57deg, #c89f3a -32%, #faeaa5 51.51%, #f2c250 122.72%);
}
.td-card h4,
.cart-details > h4 {
  font-family: var(--gar);
  font-size: 26px;
  font-weight: 600;
  color: var(--choco);
  margin-bottom: 24px;
}
.success {
  --badge-bg: #b3e5b6;
  --badge-text: #00a60b;
}
.info {
  --badge-bg: #bed1f9;
  --badge-text: #2563eb;
}
.error {
  --badge-bg: #f9cfcf;
  --badge-text: #eb5d5f;
}
.warning {
  --badge-bg: #ffe5cc;
  --badge-text: #cc6d0f;
}
.gray {
  --badge-bg: #dbdbdb;
  --badge-text: #706868;
}
.orange {
  --badge-bg: #f6efde;
  --badge-text: #b38b31;
}
.blue{
  --badge-bg: #009EAA4D ;
  --badge-text: #009EAA;
}
.purple{
  --badge-bg: #9300AA4D;
  --badge-text: #9300AA;
}

.badge {
  padding: 8px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  background-color: var(--badge-bg);
  color: var(--badge-text);
}
.gift-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.gift-link:not(:last-child) {
  margin-bottom: 12px;
}
.copy-btn {
  position: relative;
}
.copy-icon {
  display: flex;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.copy-btn .copied-text {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -0%);
  top: -100%;
  margin-left: 0px;
  background-color: var(--dark);
  color: var(--white);
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s linear;
  white-space: nowrap;
  pointer-events: none;
}
.copy-btn .copied-text.show {
  opacity: 1;
}
.copy-outline {
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px solid var(--choco);
  white-space: nowrap;
  gap: 10px;
  font-size: 14px;
}
.gift-link-text {
  font-size: 16px;
  color: var(--choco);
}
.gift-link-text a {
  display: block;
  margin-top: 10px;
  color: var(--gray);
}
.title-wrapper p {
  color: var(--gray);
}
.td-container:not(:last-child) {
  margin-bottom: 24px;
}
.rs-box {
  width: 50%;
}
.rs-box p {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--choco);
}
.rs-box .value {
  font-size: 24px;
  font-weight: 600;
  color: var(--choco);
}
.rs-box-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rede-static hr {
  opacity: 0.08;
  border: 0.2px solid var(--choco);
}
.rs-box-wrapper hr {
  width: 56px;
  opacity: 0.08;
  transform: rotate(90deg);
  border: 0.2px solid var(--choco);
}
.rs-line {
  height: 100%;
  width: 10px;
  background-color: #d8c9a7;
  flex-shrink: 0;
}
.td-card.yellow {
  background-color: #f9f2da;
}

.table-container {
  width: 100%;
  overflow-x: auto;
  position: relative;
  margin: 20px 0;
  border: 1px solid var(--yellow);
  border-radius: 12px;
  background-color: var(--white);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

th,
td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #d8c9a7;
}
th:not(:last-child),
td:not(:last-child) {
  border-right: 1px solid #d8c9a7;
}
th:last-child,
td:last-child {
  outline-width: 0.5px;
  outline-style: solid;
  outline-color: #d8c9a7;
}
tr:last-child td {
  border-bottom: 0;
}
td p {
  font-weight: 600;
  color: var(--choco);
}
td .gift-code {
  font-size: 14px;
  color: var(--gray);
}
th {
  background-color: #f9f2da;
  position: sticky;
  top: 0;
  font-weight: 500;
  color: var(--choco);
}
.fixed-column {
  position: sticky;
  right: 0;
  white-space: nowrap;
  background-color: var(--white);
}
th.fixed-column {
  background-color: #f9f2da;
}
.dt span {
  font-size: 14px;
  color: var(--gray);
}
.setting-main {
  min-height: 350px;
}
.setting-wrapper {
  position: relative;
  padding-left: calc(270px + 26px);
}
.setting-nav {
  max-width: 270px;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.setting-nav .setting-nav-items {
  padding: 16px;
  border-radius: 12px;
  border: var(--border);
  list-style: none;
  background-color: #f9f4eb;
}
.setting-nav p {
  font-size: 14px;
  font-weight: 500;
  color: var(--choco);
}
.s-nav-link {
  padding: 16px 24px;
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--choco);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  height: 56px;
  border-radius: 8px;
  transition: 0.3s linear;
  width: 100%;
}
.s-nav-link.active {
  background: linear-gradient(
    103.84deg,
    rgba(200, 159, 58, 0.2) -6.72%,
    rgba(250, 234, 165, 0.2) 48.04%,
    rgba(242, 194, 80, 0.2) 108.33%
  );
}
.s-nav-link:hover:not(.active) {
  background: #f1c86815;
}
.nav-link-img {
  width: 24px;
  height: 24px;
  display: inline-block;
  flex-shrink: 0;
}
.nav-link-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.edit-btn {
  background-color: var(--choco);
  padding: 8px 14px;
  border-radius: 10px;
  color: var(--white);
  font-size: 18px;
  height: 44px;
}
.edit-btn.outline {
  background-color: transparent;
  border: 1px solid var(--dark);
  color: var(--choco);
}
.profile-section {
  margin-top: 30px;
}
.sec-item-name {
  display: flex;
  align-items: center;
  gap: 16px;
}
.security-items {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.security-items .app-btn {
  height: 44px;
  font-size: 14px;
}
.sec-item-img {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background-color: var(--choco);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sec-item-img img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}
.sec-item p {
  font-size: 16px;
  font-weight: 600;
  color: var(--choco);
}
.sec-item span {
  font-size: 12px;
  font-weight: 300;
  color: var(--gray);
}
.heading-type-2 h3 {
  font-size: 26px;
  font-weight: 500;
  color: var(--choco);
  font-family: var(--gar);
  margin-top: -10px;
}
.security-action-container:not(:last-child) {
  margin-bottom: 30px;
}
.two-fa-qr {
  border-radius: 6px;
  background-color: var(--choco);
  padding: 16px;
}
.qr-code {
  width: 100%;
  max-width: 160px;
  aspect-ratio: 1/1;
  background-color: var(--white);
  border-radius: 6px;
  margin: 0 auto;
}
.two-fa-qr p {
  margin: 10px 0;
  color: #f9f4eb;
  font-size: 14px;
  text-align: center;
}
.app-link {
  border-radius: 6px;
  overflow: hidden;
  display: block;
  height: 44px;
  width: 100%;
}
.app-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.twofa-link {
  font-size: 14px;
  color: var(--choco);
}
.twofa-link span {
  font-size: 12px;
}
.two-fa-code h3 {
  font-size: 16px;
  font-weight: 400;
  font-family: var(--gar);
  color: var(--choco);
}
.fixed-column.session {
  background-color: var(--white);
}
.session-action-btn {
  margin: 40px 0;
  gap: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.session-action-btn .app-btn {
  width: 100%;
}
.window {
  display: flex;
  align-items: center;
  gap: 8px;
}
.window::before {
  content: "";
  width: 18px;
  height: 18px;
  background-image: url(../images/icon-pc.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  flex-shrink: 0;
}
.window.phone::before {
  background-image: url(../images/icon-mobile.png);
}
.filter-container {
  width: 100%;
  height: 100%;
}
.offcanvas {
  background-color: #fdf9f4;
}
.filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #d8c9a7;
  padding: 20px 20px;
}
.filter-header h3 {
  font-size: 24px;
  font-weight: 600;
  counter-reset: var(--dark);
}
.filter-header button {
  color: var(--yellow);
  font-weight: 600;
}
.accordion-button:not(.collapsed) {
  color: var(--dark);
  background-color: transparent;
  box-shadow: none;
}
.accordion-button {
  font-weight: 600;
  background-color: transparent;
}
.accordion-body {
  padding: 0px 20px 20px 20px;
}
.accordion-button:focus {
  box-shadow: none;
}
.accordion-item {
  background-color: transparent;
  border-radius: 0 !important;
  border: none;
  border-bottom: 1px solid #d8c9a7;
}
.accordion-item.scroller-filter{
  overflow-y: auto;
  max-height: 80dvh;
}
.accordion-item:first-of-type > .accordion-header .accordion-button {
  border-radius: 0 !important;
}
.accordion-button::after {
  filter: brightness(0) saturate(100%) invert(0%) sepia(6%) saturate(24%)
    hue-rotate(268deg) brightness(97%) contrast(107%);
}
.g-from {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 110%;
}
.gs-mail {
  font-size: 12px;
  color: var(--gray);
}
.g-from::before {
  content: "";
  width: 38px;
  height: 38px;
  display: block;
  flex-shrink: 0;
  border-radius: 8px;
  background-size: cover;
}
.g-from.recv::before {
  background-image: url(../images/receive-gift.png);
}
.g-from.send::before {
  background-image: url(../images/send-gift.png);
}
.table-btn {
  width: 44px;
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.table-btn:not(:last-child) {
  border-right: 1px solid #d8c9a7;
}
.type {
  display: flex;
  align-items: center;
  gap: 6px;
}
.type::before {
  content: "";
  width: 20px;
  height: 20px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
}
.type.free::before {
  background-image: url(../images/icon-star.svg);
}
.type.paid::before {
  background-image: url(../images/icon-card.svg);
}
.type.gift::before {
  background-image: url(../images/icon-gift-send.svg);
}
.type.giftrec::before {
  background-image: url(../images/icon-gift-send.svg);
  transform: scaleX(-1);
}
.details {
  color: var(--yellow);
}
.details.cost {
  color: var(--green);
}
.page-item.disabled .page-link {
  color: #bdbab8;
  cursor: no-drop;
}

.page-item.dot-view .page-link {
  cursor: no-drop;
}
.pagination .page-link {
  font-size: 16px;
  font-weight: 500;
  color: var(--dark);
  padding: 0px;
  border: 0px;
  background-color: transparent;
  padding: 8px 4px;
  cursor: pointer;
}
.pagination .page-link:not(.text) {
  height: 44px;
  width: 44px;
  background-color: var(--white);
  border: 1px solid #f1f1f1;
  display: grid;
  place-content: center;
  border-radius: 10px;
  margin: 0px 3px;
}

.pagination .page-link.active {
  background-color: var(--choco);
  color: var(--white);
}

.page-link:focus {
  box-shadow: none;
}
.static-data-main {
  margin: 30px 0 30px 0;
}
.static-data {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.static-data-card {
  padding: 16px;
  background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.4),
      rgba(255, 255, 255, 0.4)
    ),
    linear-gradient(103.57deg, #c89f3a -32%, #faeaa5 51.51%, #f2c250 122.72%);
  border-radius: 16px;
  width: calc(25% - 24px);
  flex-grow: 1;
}
.s-data-content {
  display: flex;
  align-items: center;
  gap: 14px;
}
.s-data-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  border: var(--border);
  background-color: #f9f4eb;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.s-data-icon.right {
  transform: scaleX(-1);
}
.s-data {
  color: var(--choco);
}
.s-data p {
  font-weight: 500;
}
.s-data h4 {
  font-size: 30px;
  font-weight: 700;
  margin: 0;
  font-family: var(--man);
}
.s-data-label {
  font-size: 12px;
  font-weight: 500;
  background-color: var(--choco);
  padding: 4px 10px;
  border-radius: 10px;
  color: var(--white);
  width: fit-content;
  margin-top: 6px;
  margin-left: auto;
  margin-right: 0;
}
/* Animation keyframes */
/* Slide-in from right */
@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide-out to right */
@keyframes slideOutRight {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(100px);
  }
}

/* Toast wrapper: fixed to top-right */
.tost-wrapper {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  z-index: 9999;
  pointer-events: none;
}

/* Toast box styling + animation */
.tost-container {
  padding: 20px;
  background-color: var(--white);
  border-radius: 16px;
  width: 100%;
  max-width: 450px;
  min-width: 280px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 8px;
  animation: slideInRight 0.4s ease-out forwards;
  pointer-events: all;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: left;
}

/* Trigger exit animation */
.tost-container.toast-hide {
  animation: slideOutRight 0.3s ease-in forwards;
}

/* Icon styling */
.tost-icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
}

.tost-success .tost-icon {
  background-color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tost-error .tost-icon {
  background-color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Message content */
.tost-message h3 {
  font-size: 18px;
  font-weight: 700;
}

.tost-message p {
  font-size: 15px;
  line-height: 120%;
}
.gift-note {
  padding: 14px;
  margin-top: 16px;
}
.gift-note h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--yellow);
  display: flex;
  align-items: center;
  gap: 8px;
}
.gift-note p {
  color: var(--gray);
  font-size: 14px;
}
.gift-note h3::before {
  content: "";
  width: 24px;
  height: 24px;
  display: block;
  background-image: url(../images/icon-gift.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.nf-section {
  height: 100dvh;
  width: 100%;
  background-image: url(../images/nf-bg.png);
  background-size: cover;
  background-position: center;
}
.nf-container {
  padding: 90px 0;
}
.nf-image-box {
  max-width: 400px;
  width: 100%;
  overflow: hidden;
  height: 344px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.nf-container p {
  color: var(--choco);
  text-align: center;
  margin-bottom: 30px;
}
.nf-container h3 {
  font-family: var(--gar);
  font-weight: 600;
  margin-top: 30px;
  background: var(--grd_3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  text-align: center;
}
.hole-image {
  width: 100%;
  position: absolute;
  top: auto;
  left: 0;
  bottom: -2px;
  right: 0;
  display: flex;
  justify-content: flex-end;
}
.hand-image {
  width: 80%;
  position: absolute;
  left: 50%;
  top: auto;
  transform: translate(-50%, -0%);
  z-index: 1;
  animation: nf-animation both 2.4s linear;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.hand-image img {
  transform-origin: bottom;
  animation: shake both 0.8s ease-in-out infinite alternate-reverse;
}
.wrapper-img {
  width: 100%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -0%);
  bottom: -2px;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
}
.wrapper-img img {
  width: 100%;
}
@keyframes nf-animation {
  0% {
    bottom: -100%;
  }
  100% {
    bottom: -3%;
  }
}
@keyframes shake {
  0% {
    transform: rotate(-6deg);
  }
  100% {
    transform: rotate(6deg);
  }
}
.qty.error {
  color: var(--red);
}
/* maintenance-page==== */
.logo-wrapper {
  background-color: var(--choco);
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-wrapper img {
  width: 70px;
  height: auto;
}
.maintenance-page {
  height: 100dvh;
  width: 100%;
  background-image: url(../images/nf-bg.png);
  background-size: cover;
  background-position: center;
  padding: 100px 0;
}
.maintenance-container {
  max-width: 705px;
  margin: 0 auto;
  width: 100%;
}
.maintenance-container h1 {
  font-size: 50px;
  font-weight: 500;
  text-align: center;
  font-family: var(--gar);
  background: var(--grd_3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.maintenance-container p {
  color: var(--choco);
  font-size: 16px;
  text-align: center;
  margin-top: 24px;
}
.web-view {
  border: 2px solid var(--choco);
  border-radius: 16px;
  margin-top: 24px;
  padding: 10px;
}
.web-heading {
  height: 52px;
  border-radius: 12px;
  background-color: var(--yellow);
  padding: 16px;
  display: flex;
  align-items: center;
}
.web-view-visual {
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.support-text {
  background-color: var(--choco);
  border-radius: 20px;
  padding: 5px 24px;
  color: #f9f4eb;
  width: fit-content;
  margin-top: 30px;
  text-align: center;
}
.support-text a {
  color: #d8c9a7;
  text-decoration: underline;
}
.rotate-circle {
  animation: gearRotate linear infinite forwards;
}
.rotate-circle.circle-1 {
  transform-origin: 11.48% 18.3%;
  animation-duration: 10s;
  animation-direction: reverse;
}
.rotate-circle.circle-2 {
  transform-origin: 34.4% 44.61%;
  animation-duration: 10s;
}
.rotate-circle.circle-3 {
  transform-origin: 65.03% 67.69%;
  animation-direction: reverse;
  animation-duration: 15s;
}
.rotate-circle.circle-4 {
  transform-origin: 87.39% 30.35%;
  animation-duration: 10s;
}

@keyframes gearRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.dropdown-toggle::after {
  display: inline-block;
  margin-left: auto;
  margin-right: 0;
  vertical-align: 0.255em;
  content: "";
  border: none;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.65004 5.06061L11.5998 0.110886L13.014 1.5251L6.65004 7.88911L0.286133 1.5251L1.70034 0.110886L6.65004 5.06061Z' fill='%23808080'/%3E%3C/svg%3E");
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
}

.dropdown-menu.country-scroll {
  background-color: #f3f1ee;
  border-radius: 16px;
}
.dropdown-menu.country-scroll::-webkit-scrollbar {
  display: none;
}
.dropdown-menu.country-scroll .dropdown-item {
  overflow: hidden;
  text-overflow: clip;
  font-size: 14px;
  padding: 8px;
}
#countrySearchInput {
  font-size: 14px;
}
.form-control:focus {
  border-color: transparent;
  box-shadow: none;
}
.dropdown-item.active,
.dropdown-item:active {
  color: var(--dark);
  background-color: inherit;
}
.t-id {
  width: 100%;
  max-width: 190px;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
}
.col-md-6.col-lg-4:nth-child(2) .t-sm {
  transform: scale(1.08);
}
.no-celeb-found h2 {
  font-size: 50px;
  font-family: var(--gar);
  font-weight: 600;
  margin-top: 30px;
  background: var(--grd_3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  text-align: center;
}
.crown-img {
  max-width: 200px;
  width: 100%;
  margin: 0 auto;
}
.tooltip-inner {
  background-color: var(--choco);
  color: var(--white);
}
.tooltip-arrow::before {
  border-bottom-color: #4caf50;
}
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before,
.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--choco);
}
.remaning {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 6px 12px;
  gap: 6px;
  background: linear-gradient(
    90deg,
    rgba(207, 170, 74, 0) 0%,
    #cfaa4a 50%,
    rgba(207, 170, 74, 0) 100%
  );
  font-weight: 600;
  max-width: 280px;
}
.remaning span {
  font-size: 18px;
}
.error-text {
  color: var(--red);
  font-size: 14px;
  text-align: center;
  max-width: 280px;
  margin: 12px auto;
}
.card-dis {
  filter: brightness(0.7);
  pointer-events: none;
  user-select: none;
}
.contest-card {
    background-image: var(--gold_2);
    padding: 1px;
    border-radius: 8px;
    overflow: hidden;
}
.contest-card-inner {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 24px;
}
.nc-img {
  width: 100%;
  max-width: 70px;
  aspect-ratio: 1/1;
  margin: 0 auto;
  margin-bottom: 8px;
}
.contest-avatar {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, #724e11 0%, #b49665 100%);
  flex-shrink: 0;
}
.contest-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.celeb-name h4{
font-family: var(--gar);
font-size: 28px;
font-weight: 500;
color: var(--dark);
margin-bottom: 4px;
}
.transction-details{
  padding: 24px;
  border: 1px solid #d8c9a7;
  border-radius: 8px;
}
.no-contest-found p{
color: var(--gray);
}
.to-to-list li{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  position: relative;
  padding-left: 28px;
}
.to-to-list li::before{
  content: "";
  width: 18px;
  height: 18px;
  background-image: url(../images/to-check.png);
  background-size:contain;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  top: 3px;
  left: 0px;
}
.submit-social-links .plaform{
  font-weight: 600;
}
.submit-social-links li{
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.platform-link{
  display:flex;
  align-items: center;
  gap: 10px;
  word-break: break-all;
}
.platform-link::before{
  content: "";
  width: 18px;
  height: 18px;
  background-image: url(../images/link-icon.png);
  background-size:contain;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  flex-shrink: 0;
}
.contect-celeb-img {
    width: 100%;
    height: 100%;
    aspect-ratio:338/200;
    background: linear-gradient(180deg, #724e11 0%, #b49665 100%);
    border-radius: 14px;
    background-size: 100% 100%;
    transition: 0.3s ease-in-out;
    overflow: hidden;
}
.contect-celeb-img img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}
.contect-celeb-img:hover {
  background-size: 200% 200%;
}
.contest-date{
  background-color: #F9F2DA;
  border: var(--border);
  border-radius: 16px;
  color: var(--choco);
  font-weight: 500;
}
.sbmt-date{
  font-size: 24px;
  font-family: var(--gar);

}
.form-heading h4{
font-family: var(--gar);
color: var(--choco);
font-size: 26px;
font-weight: 600;
margin-bottom: 4px;
}
.form-heading p{
color: var(--gray);
}
.form-wrapper{
  margin-top:24px;
}
.platform-dp{
  background-color: #F9F2DA;
}
.pdp-item{
  padding: 8px 16px;
  color: var(--dark);
  cursor: pointer;
  transition: .3s linear;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pdp-item:hover{
  background-color:#ECE6CF;
}
.tab-change-btn{
  background: #D7D0C3;
  padding: 20px 36px;
  font-size: 18px;
  font-weight: 500;
  margin-right: 8px;
  border-radius: 10px 10px 0 0;
}
.tab-change-btn.active{
  background: var(--gold_2);
  color: var(--choco);
}
.contest-ticket-content{
  border: 1px solid #c89f3a;
  border-radius: 0px 16px 16px 16px;
  overflow: hidden;
}
.contest-preview{
  padding: 50px;
}
.trfy-img{
  height: 70px;
  width: 70px;
  flex-shrink: 0;
}
.contest-preview-heading{
  display: flex;
  align-items: center;
}
.contest-heading{
  border-left: 3.5px solid var(--choco);
  margin-left: 10px;
  padding:6px 10px;
}
.contest-heading h2{
  font-size: 32px;
  font-family: var(--gar);
  color: var(--choco);
  font-weight: 600;
  margin-bottom: 2px;
}
.contest-heading p{
  font-size: 18px;
}

.td-card > .timeline .step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24px;
}
.td-card > .timeline .step:last-child {
    margin-bottom: 0px;
}
.td-card > .timeline .step .circle {
    width: 20px;
    height: 20px;
    border: 2px solid #D8C9A7;
    border-radius: 50%;
    margin-top: 6px;
    margin-right: 15px;
    position: relative;
    flex-shrink: 0;
    position: relative;
}
.td-card > .timeline .step.completed .circle.rejected::before {
    content: "";
    height: 20px;
    width: 20px;
    background-image: url(../images/reject.svg);
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0px;
}
.td-card > .timeline .step .circle.rejected::before {
    content: "";
    height: 20px;
    width: 20px;
    background-image: url(../images/reject.svg);
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0px;
}
.td-card > .timeline .step.completed .circle::before {
    content: "";
    height: 10px;
    width: 10px;
    background-image: url(../images/c-check.svg);
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.td-card > .timeline .step.completed .circle {
    background: #432B00;
    border-color: #432B00;
}
.td-card > .timeline .step.active .circle {
    border-color: #432B00;
}
.td-card > .timeline .step-content {
    flex-grow: 1;
}
.td-card > .timeline .step-title {
    font-weight: bold;
    color: var(--choco);
    margin-bottom: 3px;
    font-size: 14px;
}
.td-card > .timeline .step-desc {
    font-size: 12px;
    color: #7a7265;
}
.td-card > .timeline .step-desc {
    color: var(--choco);
}
.td-card > .timeline .step-date {
    font-size: 12px;
    color: #2B2B2B !important;
    white-space: nowrap;
}
/* faded for inactive steps */
  .td-card > .timeline .step.inactive .step-title,
  .td-card > .timeline .step.inactive .step-desc,
  .td-card > .timeline .step.inactive .step-date {
    color: var(--gray);
}
.review-process {
    background-color: #FDF9F4;
    border-radius: 8px;
    padding: 24px;
}
.review-avtar > span {
    display: block;
    height: 56px;
    width: 56px;
    border-radius: 100%;
    overflow: hidden;
    background-image: var(--gold_2);
    padding: 1px;
}
.review-avtar > span > img {
    height: 54px;
    width: 54px;
    border-radius: 100%;
}
.review-text h3 {
    font-family: var(--gar);
    font-size: 28px;
    font-weight: 600;
    color: var(--choco);
    margin-bottom: 8px;
}
.review-text p {
    font-size: 18px;
    color: #706868;
}
.review-process hr {
    margin: 24px 0px;
}
.review-process h4 {
    font-size: 20px;
    font-weight: 600;
    color: #201611;
    margin-bottom: 12px;
}
.review-process .r-link {
    font-size: 16px;
    color: #201611;
    font-weight: 600;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.review-process .r-link > span {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-weight: 400;
}
.review-process .r-link > span > a {
    color: #201611;
}
.two-btn .app-btn {
    width: calc(100% - 207px) !important;
}
.payment-dead {
    background-image: var(--gold_2);
    padding: 1px;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 16px;
}
.payment-dead > .payment-dead-card {
    background-color: #F9F2DA;
    border-radius: 8px;
    font-size: 16px;
    color: #432B00;
    font-weight: 500;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
}

.video-player{
  width: 100%;
  aspect-ratio: 16/6;
  border-radius: 12px;
  overflow: hidden;
  background-color:#000;
  margin: 24px 0;
}
.c-item-name, .c-qty{
  font-size: 16px;
  color: var(--dark);
  vertical-align: middle;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.c-qty{
  text-align: right;
}
.contest-price-breake-out li {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.contest-price-breake-out li:last-child {
  margin-bottom: 0px;
}


.sucsess-text > h2 > span {
    font-family: var(--gar);
    font-weight: 600;
    font-size: 32px;
    background: radial-gradient(50% 50% at 50% 50%, #DDBE82 0%, #6E4A0C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
.sucsess-text > p {
    color: #432B00;
}

.iti__flag-container > .iti__selected-flag {
    padding: 0px;
    background: transparent !important;
}
.iti__flag-container .iti__country-list {
    left: -16px;
    top: 46px;
    max-width: 550px;
    border-color: rgba(67, 43, 0, 0.4);
    border-radius: 6px;
    background: #f9f4ec;
    box-shadow: none;
    overflow-x: hidden;
}

/* // pre loader */
.pre-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 400px;
  margin: 50px auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.loader-header {
  margin-bottom: 15px;
}

.loader-text {
  font-size: 18px;
  font-weight: 600;
  background: linear-gradient(180deg, #724e11 0%, #b49665 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: pulse 1.5s infinite;
  text-align: center;
}

/* Pulse effect */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Progress Bar Container */
.progress-container {
  width: 100%;
  height: 14px;
  background: #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

/* Progress Bar with Shimmer */
.progress-bar {
  width: 0;
  height: 100%;
  background: linear-gradient(180deg, #724e11 0%, #b49665 100%);
  border-radius: 8px;
  position: relative;
  animation: fillProgress 5s linear infinite;
}

/* Shimmer Overlay */
.progress-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  height: 100%;
  width: 50%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shimmer 2s infinite;
}

/* Progress Animation */
@keyframes fillProgress {
  0% { width: 0; }
  50% { width: 100%; }
  100% { width: 0; }
}

/* Shimmer Animation */
@keyframes shimmer {
  0% { left: -50%; }
  100% { left: 100%; }
}


.pre-loader{
  height: 46vh;
}
#phone-verification-modal{
  overflow: visible !important;
}

button.back-to-top {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff;
    height: 0px;
    width: 0px;
    overflow: hidden;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    color: transparent;
    clear: both;
    visibility: hidden;
    position: fixed;
    cursor: pointer;
    display: block;
    border: none;
    right: 50px;
    bottom: 75px;
    font-size: 0px;
    outline: 0 !important;
    z-index: 99;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

button.back-to-top:hover,
button.back-to-top:active,
button.back-to-top:focus {
outline: 0 !important;
}

button.back-to-top::before,
button.back-to-top::after {
    content: "";
    display: block;
    vertical-align: middle;
    border-bottom: solid 10px #432B00;
    border-left: solid 10px transparent;
    line-height: 0;
    border-right: solid 10px transparent;
    height: 0;
    margin: 18px auto 0;
    width: 0;
    border-radius: 20px;
    visibility: hidden;
}

button.back-to-top.show::after,
button.back-to-top.show::before {
    visibility: visible;
}

button.back-to-top::after {
    border-bottom-color: #fff;
    position: relative;
    top: -24px;
}

button.back-to-top.show {
    display: block;
    background: #fff;
    color: #00ab6c;
    font-size: 25px;
    right: 25px;
    bottom: 50px;
    height: 50px;
    width: 50px;
    visibility: visible;
    box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.25);
}

button.back-to-top.show:active {
    box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.25);
    z-index: 999;
}