/*------------------------------------------------------------------
Project:  ComingSoon
Version:  
Last change:  
Assigned to:  Bach Le
Primary use:  
-------------------------------------------------------------------*/

/* PAGE LOADER */
:root {
  --brown: #4e2a1d;
  --brown-light: #7a4a35;
  --cream: #f5efe6;
  --warm: #d4b896;
  --gold: #c9a96e;
}
.page-loader {
  display: block;
  position: fixed;
  z-index: 999999;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-loader::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px;
  pointer-events: none;
  z-index: 100;
  opacity: 0.6;
}

/* Radial warm glow behind logo */
.glow {
  position: fixed;
  width: 600px;
  height: 600px;
  background: radial-gradient(
    ellipse at center,
    rgba(201, 169, 110, 0.18) 0%,
    transparent 70%
  );
  border-radius: 50%;
  animation: pulse-glow 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pulse-glow {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
  }
}

/* Thin decorative border lines */
.frame {
  position: fixed;
  inset: 28px;
  border: 1px solid rgba(78, 42, 29, 0.12);
  pointer-events: none;
  animation: frame-in 1.8s cubic-bezier(0.77, 0, 0.18, 1) forwards;
  transform-origin: center;
  opacity: 0;
}
.frame::before,
.frame::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--gold);
  border-style: solid;
}
.frame::before {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
}
.frame::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 2px 2px 0;
}

@keyframes frame-in {
  0% {
    opacity: 0;
    transform: scale(1.04);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Container */
.loader-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  position: relative;
  z-index: 10;
}

/* SVG Logo */
.logo-svg {
  width: clamp(260px, 45vw, 420px);
  opacity: 0;
  animation: logo-appear 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}

@keyframes logo-appear {
  0% {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Paths draw-on effect via stroke animation */
.logo-svg path {
  fill: none;
  stroke: var(--brown);
  stroke-width: 1.2;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: draw 4s ease forwards;
}

/* Stagger each path */
.logo-svg path:nth-child(1) {
  animation-delay: 0.1s;
}
.logo-svg path:nth-child(2) {
  animation-delay: 0.2s;
}
.logo-svg path:nth-child(3) {
  animation-delay: 0.3s;
}
.logo-svg path:nth-child(4) {
  animation-delay: 0.4s;
}
.logo-svg path:nth-child(5) {
  animation-delay: 0.5s;
}
.logo-svg path:nth-child(6) {
  animation-delay: 0.6s;
}
.logo-svg path:nth-child(7) {
  animation-delay: 0.7s;
}
.logo-svg path:nth-child(8) {
  animation-delay: 0.75s;
}
.logo-svg path:nth-child(9) {
  animation-delay: 0.8s;
}
.logo-svg path:nth-child(10) {
  animation-delay: 0.85s;
}
.logo-svg path:nth-child(11) {
  animation-delay: 0.9s;
}
.logo-svg path:nth-child(12) {
  animation-delay: 0.95s;
}
.logo-svg path:nth-child(13) {
  animation-delay: 1s;
}
.logo-svg path:nth-child(14) {
  animation-delay: 1.05s;
}
.logo-svg path:nth-child(15) {
  animation-delay: 1.1s;
}
.logo-svg path:nth-child(16) {
  animation-delay: 1.15s;
}

@keyframes draw {
  0% {
    stroke-dashoffset: 2000;
    fill: transparent;
  }
  70% {
    stroke-dashoffset: 0;
    fill: transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill: var(--brown);
    stroke-width: 0;
  }
}

/* Divider line */
.divider {
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: line-grow 1s ease-out 1.6s forwards;
}

@keyframes line-grow {
  to {
    width: clamp(160px, 28vw, 260px);
  }
}

/* Progress bar */
.progress-track {
  width: clamp(160px, 28vw, 260px);
  height: 2px;
  background: rgba(78, 42, 29, 0.1);
  border-radius: 2px;
  overflow: hidden;
  opacity: 0;
  animation: fade-in 0.5s ease 1.8s forwards;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--brown-light), var(--gold));
  border-radius: 2px;
  animation: progress 3.5s cubic-bezier(0.4, 0, 0.2, 1) 2s forwards;
}

@keyframes progress {
  0% {
    width: 0%;
  }
  40% {
    width: 55%;
  }
  70% {
    width: 78%;
  }
  90% {
    width: 92%;
  }
  100% {
    width: 100%;
  }
}

/* Loading label */
.label {
  font-family: "Montserrat", sans-serif;
  font-weight: 200;
  font-size: 0.6rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--brown);
  opacity: 0;
  animation: fade-in 0.8s ease 2s forwards;
}

@keyframes fade-in {
  to {
    opacity: 0.55;
  }
}

/* Dots pulse */
.dots span {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold);
  margin: 0 3px;
  opacity: 0;
  animation: dot-pulse 1.4s ease-in-out infinite;
}
.dots span:nth-child(1) {
  animation-delay: 0s;
}
.dots span:nth-child(2) {
  animation-delay: 0.22s;
}
.dots span:nth-child(3) {
  animation-delay: 0.44s;
}

@keyframes dot-pulse {
  0%,
  100% {
    opacity: 0.15;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
}

@keyframes fade-in {
  to {
    opacity: 0.55;
  }
}
.dots {
  opacity: 0;
  animation: fade-in 0.8s ease 2.2s forwards;
}
/* END PAGE LOADER */

/*//////////////////////////////////////////////////////////////////
[ FONT ]*/

@font-face {
  font-family: Poppins-Regular;
  src: url("../fonts/Poppins/Poppins-Regular.ttf");
}

@font-face {
  font-family: Poppins-Bold;
  src: url("../fonts/Poppins/Poppins-Bold.ttf");
}

@font-face {
  font-family: Poppins-Thin;
  src: url("../fonts/Poppins/Poppins-Thin.ttf");
}

@font-face {
  font-family: Poppins-Black;
  src: url("../fonts/Poppins/Poppins-Black.ttf");
}

@font-face {
  font-family: "albertsans";
  src:
    url("../fonts/albertsans-variablefont_wght-webfont.woff2") format("woff2"),
    url("../fonts/albertsans-variablefont_wght-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

.albert-font {
  font-family: "albert_sansregular", sans-serif;
}

/*//////////////////////////////////////////////////////////////////
[ RS PLUGIN ]*/
/*---------------------------------------------*/
.container {
  max-width: 1200px;
}

/*//////////////////////////////////////////////////////////////////
[ Simple slide100 ]*/
.simpleslide100 {
  display: block;
  position: fixed;
  z-index: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.simpleslide100-item {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/*==================================================================
    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
==================================================================*/

/*==================================================================
[ Color ]*/
.cl0 {
  color: #fff;
}

/*//////////////////////////////////////////////////////////////////
[ S-Text 0 - 15 ]*/
.s1-txt1 {
  font-family: Poppins-Regular;
  font-size: 12px;
  color: #fff;
  line-height: 1;
  text-transform: uppercase;
}

/*//////////////////////////////////////////////////////////////////
[ M-Text 16 - 25 ]*/
.m1-txt1 {
  font-family: Poppins-Regular;
  font-size: 18px;
  color: #4e2a1d;
  line-height: 1.2;
  text-transform: uppercase;
}

/*//////////////////////////////////////////////////////////////////
[ L-Text >= 26 ]*/
.l1-txt1 {
  font-family: Poppins-Thin;
  font-size: 72px;
  line-height: 1.1;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 15px;
}

.l1-txt2 {
  font-family: albertsans;
  font-size: 120px;
  line-height: 1;
  color: #fff;
  text-transform: uppercase;
}

/*==================================================================
   SHAPE SHAPE SHAPE SHAPE SHAPE SHAPE SHAPE SHAPE SHAPE SHAPE SHAPE
==================================================================*/
/*//////////////////////////////////////////////////////////////////
[ Size ]*/
.size1 {
  width: 100%;
  min-height: 100vh;
}

.size2 {
  min-width: 140px;
  height: 50px;
}

.size3 {
  width: 36px;
  height: 36px;
}

/*//////////////////////////////////////////////////////////////////
[ Width ]*/
.wsize1 {
  width: 195px;
}

/*//////////////////////////////////////////////////////////////////
[ Height ]*/

/*//////////////////////////////////////////////////////////////////
[ Background ]*/
.bg0 {
  background-color: #fff;
}

.bg-img1 {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/*//////////////////////////////////////////////////////////////////
[ Border ]*/

/*==================================================================
   WHERE WHERE WHERE WHERE WHERE WHERE WHERE WHERE WHERE WHERE WHERE  
==================================================================*/
.where1 {
  align-self: flex-start;
}

/*==================================================================
 HOW HOW HOW HOW HOW HOW HOW HOW HOW HOW HOW HOW HOW HOW HOW HOW HOW 
==================================================================*/
.placeholder0::-webkit-input-placeholder {
  color: #999999;
}
.placeholder0:-moz-placeholder {
  color: #999999;
}
.placeholder0::-moz-placeholder {
  color: #999999;
}
.placeholder0:-ms-input-placeholder {
  color: #999999;
}

/*---------------------------------------------*/
.overlay1 {
  position: relative;
  z-index: 1;
}
.overlay1::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #7579ff;
  background: -webkit-linear-gradient(bottom, #b224ef, #7579ff);
  background: -o-linear-gradient(bottom, #b224ef, #7579ff);
  background: -moz-linear-gradient(bottom, #b224ef, #7579ff);
  background: linear-gradient(bottom, #b224ef, #7579ff);
  opacity: 0.3;
}

.overlay1::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
}

/*---------------------------------------------*/
.wrappic1 {
  display: block;
  flex-grow: 1;
}

.wrappic1 img {
  max-width: 100%;
}

/*---------------------------------------------*/
.how-btn1 {
  padding: 0 15px;
  background-color: #fff;
  border-radius: 25px;
}

.how-btn1:hover {
  background-color: #4e2a1d;
  color: #fff;
}

/*---------------------------------------------*/
.how-social {
  color: #fff;
  font-size: 18px;
  border: 1px solid #fff;
  background-color: transparent;
  border-radius: 50%;
}

.how-social:hover {
  background-color: #fff;
  color: #4e2a1d;
}

/*//////////////////////////////////////////////////////////////////
[ Pseudo ]*/

/*------------------------------------------------------------------
[ Focus ]*/
.focus-in0:focus::-webkit-input-placeholder {
  color: transparent;
}
.focus-in0:focus:-moz-placeholder {
  color: transparent;
}
.focus-in0:focus::-moz-placeholder {
  color: transparent;
}
.focus-in0:focus:-ms-input-placeholder {
  color: transparent;
}

/*------------------------------------------------------------------
[ Hover ]*/
.hov-cl0:hover {
  color: #fff;
}
.hov-bg0:hover {
  background-color: #fff;
}

/*---------------------------------------------*/

/*==================================================================
  RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE
==================================================================*/

/*//////////////////////////////////////////////////////////////////
[ XL ]*/
@media (max-width: 1200px) {
  .m-0-xl {
    margin: 0;
  }
  .m-lr-0-xl {
    margin-left: 0;
    margin-right: 0;
  }
  .m-lr-15-xl {
    margin-left: 15px;
    margin-right: 15px;
  }
  .m-l-0-xl {
    margin-left: 0;
  }
  .m-r-0-xl {
    margin-right: 0;
  }
  .m-l-15-xl {
    margin-left: 15px;
  }
  .m-r-15-xl {
    margin-right: 15px;
  }

  .p-0-xl {
    padding: 0;
  }
  .p-lr-0-xl {
    padding-left: 0;
    padding-right: 0;
  }
  .p-lr-15-xl {
    padding-left: 15px;
    padding-right: 15px;
  }
  .p-l-0-xl {
    padding-left: 0;
  }
  .p-r-0-xl {
    padding-right: 0;
  }
  .p-l-15-xl {
    padding-left: 15px;
  }
  .p-r-15-xl {
    padding-right: 15px;
  }

  .w-full-xl {
    width: 100%;
  }

  /*---------------------------------------------*/
}

/*//////////////////////////////////////////////////////////////////
[ LG ]*/
@media (max-width: 992px) {
  .m-0-lg {
    margin: 0;
  }
  .m-lr-0-lg {
    margin-left: 0;
    margin-right: 0;
  }
  .m-lr-15-lg {
    margin-left: 15px;
    margin-right: 15px;
  }
  .m-l-0-lg {
    margin-left: 0;
  }
  .m-r-0-lg {
    margin-right: 0;
  }
  .m-l-15-lg {
    margin-left: 15px;
  }
  .m-r-15-lg {
    margin-right: 15px;
  }

  .p-0-lg {
    padding: 0;
  }
  .p-lr-0-lg {
    padding-left: 0;
    padding-right: 0;
  }
  .p-lr-15-lg {
    padding-left: 15px;
    padding-right: 15px;
  }
  .p-l-0-lg {
    padding-left: 0;
  }
  .p-r-0-lg {
    padding-right: 0;
  }
  .p-l-15-lg {
    padding-left: 15px;
  }
  .p-r-15-lg {
    padding-right: 15px;
  }

  .w-full-lg {
    width: 100%;
  }

  /*---------------------------------------------*/
}

/*//////////////////////////////////////////////////////////////////
[ MD ]*/
@media (max-width: 768px) {
  .m-0-md {
    margin: 0;
  }
  .m-lr-0-md {
    margin-left: 0;
    margin-right: 0;
  }
  .m-lr-15-md {
    margin-left: 15px;
    margin-right: 15px;
  }
  .m-l-0-md {
    margin-left: 0;
  }
  .m-r-0-md {
    margin-right: 0;
  }
  .m-l-15-md {
    margin-left: 15px;
  }
  .m-r-15-md {
    margin-right: 15px;
  }

  .p-0-md {
    padding: 0;
  }
  .p-lr-0-md {
    padding-left: 0;
    padding-right: 0;
  }
  .p-lr-15-md {
    padding-left: 15px;
    padding-right: 15px;
  }
  .p-l-0-md {
    padding-left: 0;
  }
  .p-r-0-md {
    padding-right: 0;
  }
  .p-l-15-md {
    padding-left: 15px;
  }
  .p-r-15-md {
    padding-right: 15px;
  }

  .w-full-md {
    width: 100%;
  }
  /*---------------------------------------------*/
}

/*//////////////////////////////////////////////////////////////////
[ SM ]*/
@media (max-width: 576px) {
  .m-0-sm {
    margin: 0;
  }
  .m-lr-0-sm {
    margin-left: 0;
    margin-right: 0;
  }
  .m-lr-15-sm {
    margin-left: 15px;
    margin-right: 15px;
  }
  .m-l-0-sm {
    margin-left: 0;
  }
  .m-r-0-sm {
    margin-right: 0;
  }
  .m-l-15-sm {
    margin-left: 15px;
  }
  .m-r-15-sm {
    margin-right: 15px;
  }

  .p-0-sm {
    padding: 0;
  }
  .p-lr-0-sm {
    padding-left: 0;
    padding-right: 0;
  }
  .p-lr-15-sm {
    padding-left: 15px;
    padding-right: 15px;
  }
  .p-l-0-sm {
    padding-left: 0;
  }
  .p-r-0-sm {
    padding-right: 0;
  }
  .p-l-15-sm {
    padding-left: 15px;
  }
  .p-r-15-sm {
    padding-right: 15px;
  }

  .w-full-sm {
    width: 100%;
  }

  /*---------------------------------------------*/
  .respon1 {
    font-size: 45px;
  }
}

/*//////////////////////////////////////////////////////////////////
[ SSM ]*/
@media (max-width: 480px) {
  .m-0-ssm {
    margin: 0;
  }
  .m-lr-0-ssm {
    margin-left: 0;
    margin-right: 0;
  }
  .m-lr-15-ssm {
    margin-left: 15px;
    margin-right: 15px;
  }
  .m-l-0-ssm {
    margin-left: 0;
  }
  .m-r-0-ssm {
    margin-right: 0;
  }
  .m-l-15-ssm {
    margin-left: 15px;
  }
  .m-r-15-ssm {
    margin-right: 15px;
  }

  .p-0-ssm {
    padding: 0;
  }
  .p-lr-0-ssm {
    padding-left: 0;
    padding-right: 0;
  }
  .p-lr-15-ssm {
    padding-left: 15px;
    padding-right: 15px;
  }
  .p-l-0-ssm {
    padding-left: 0;
  }
  .p-r-0-ssm {
    padding-right: 0;
  }
  .p-l-15-ssm {
    padding-left: 15px;
  }
  .p-r-15-ssm {
    padding-right: 15px;
  }

  .w-full-ssm {
    width: 100%;
  }
  /*---------------------------------------------*/
}