@font-face {
    font-family: "Lora";
    src: url(../font/lora-regular.ttf);
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Lora";
    src: url(../font/lora-semibold.ttf);
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Ergisa";
    src: url(../font/ergisa-regular.otf);
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "High Spirited";
    src: url(../font/high-spirited.otf);
}

@font-face {
    font-family: "UVN BucThu";
    src: url(../font/UVNBucThu.ttf);
}

body {
  background-color: #333;
  font-family: "Lora";
  font-size: 16px;
  color: #2d2d2d;
  --color-primary: rgb(207, 146, 40);
  --text-color-primary: rgb(207, 146, 40);
  --color-primary-raw: 207, 146, 40;
}
body a {
  text-decoration: none;
  color: inherit;
}
body img {
  max-width: 100%;
}

.card-wrapper.theme-lightgreen {
  --color-primary: rgb(83, 121, 35);
  --color-primary-raw: 83, 121, 35;
  --text-color-primary: rgb(83, 121, 35);
}
.card-wrapper.theme-lightgreen img.img-themeable {
  filter: brightness(0) saturate(100%) invert(39%) sepia(15%) saturate(2010%) hue-rotate(44deg) brightness(100%) contrast(84%);
}
.card-wrapper.theme-lightgreen div.div-themeable {
  background: var(--color-primary) !important;
}
.card-wrapper.theme-lightgreen #card-timeline {
  --color-primary: #fff;
  --text-color-primary: #fff;
}

#card-gift {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--color-primary);
}

#card-gift .inner{
    position: relative;
    padding: 0 20px;
    z-index: 1;
}

#card-gift .card-section-title, #card-banks .card-section-title {
    text-align: center;
    font-family: "High Spirited";
    font-size: 80px;
    line-height: 1;
    font-weight: 500;
    color: var(--text-color-primary);
}
#card-gift .card-section-subtitle, #card-banks .card-section-subtitle {
  margin-bottom: 24px;
  color: var(--color-primary);
  text-align: center;
}
#card-gift .present-box {
  text-align: center;
}
#card-gift .present-box .present-box-inner {
  color: var(--color-primary);
  border: 2px solid currentColor;
  padding: 16px;
  border-radius: 8px;
  display: inline-block;
  margin: auto;
  cursor:pointer;
}
#card-gift .present-box .present-box-inner img {
  width: 200px;
}


#card-banks {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--color-primary);
}

#card-banks .inner{
    position: relative;
    padding: 0 24px;
    z-index: 1;
}

.bank-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.bank-list .bank-box {
    flex: 1; 
    padding: 16px;
    border: 2px dashed var(--color-primary);
    border-radius: 12px;
    text-align: center;
    color: var(--color-primary);
}

.bank-list .bank-box.single {
    border: 0;
}

.bank-list .bank-box .title {
  text-transform: uppercase;
  margin-bottom: 10px;
  font-weight: 500;
}
.bank-list .bank-box .qr-code img {
  width: 100%;
  display: block;
  cursor: zoom-in;
  margin: auto;
  max-width:300px;
}

.bank-list .bank-box.single .qr-code img {
  max-width: 85%;
}

.bank-list .bank-box .info > div {
  margin: 10px 0;
}
.bank-list .bank-box .info > div:last-child {
  margin-bottom: 0;
}

#card-info .parents{
    margin-top:36px;
}

#card-info .parents .parent{
    flex:1;
}

#card-info .parents .parent .label{
    font-weight:500;
}

#card-info .logo img {
    width: 210px;
}

#card-info .logo .signatures {
    font-family: inherit;
    top: 40%;
}
#card-info .logo .signatures > span:first-child {
    margin-left: 8px;
}

#card-info .logo .signatures > span:last-child {
    margin-left:0;
    transform: translateY(20px) translateX(-8px);
}


#card-groom-bride > .inner {
  position: relative;
  z-index: 1;
  padding-top:50px;
}
#card-groom-bride h2 {
  margin-bottom: 50px;
  font-size: 30px;
  text-align: center;
  color: var(--color-primary);
  text-transform: uppercase;
}
#card-groom-bride h2 .font1 {
  text-transform: none;
  font-size: 60px;
  font-family: "High Spirited";
}

#card-groom-bride div.sub-title {
    margin-bottom: 50px;
    color: var(--text-color-primary);
    text-align: center;
    margin-top: -44px;
    padding: 0 16px;
}

#card-groom-bride .groom-bride {
    color: var(--text-color-primary);
}

#card-groom-bride .groom-bride .groom {
  display: flex;
}
#card-groom-bride .groom-bride .groom .img,
#card-groom-bride .groom-bride .groom .info {
  width: 50%;
}
#card-groom-bride .groom-bride .groom .info > div {
  top: 40px;
  left: 45%;
  transform: translateX(-50%);
  width: 100%;
}

#card-groom-bride .groom-bride .groom .img .img-inner {
  width: calc(100% + 24px);
  transform: rotate(-10deg) translateX(-10px);
}
#card-groom-bride .groom-bride .bride {
  display: flex;
}
#card-groom-bride .groom-bride .bride .img,
#card-groom-bride .groom-bride .bride .info {
  width: 50%;
}
#card-groom-bride .groom-bride .bride .info > div {
  top: 16px;
  left: 52%;
  transform: translateX(-50%);
  width: 100%;
}
#card-groom-bride .groom-bride .info {
  position: relative;
}
#card-groom-bride .groom-bride .info > div {
  position: absolute;
  text-align: center;
}
#card-groom-bride .groom-bride .info > div .label {
  font-size: 40px;
  line-height: 1;
  font-weight: 500;
}
#card-groom-bride .groom-bride .info > div .name {
  font-size: 24px;
  text-transform: uppercase;
}

#card-groom-bride .groom-bride .info > div .dob {
  font-size: 20px;
}
#card-groom-bride .groom-bride .img {
  position: relative;
  flex: 1;
  text-align: center;
  z-index: 1;
}
#card-groom-bride .groom-bride .img .img-inner {
  text-align: center;
  position: relative;
  margin: auto;
  width: 100%;
  background: #fff;
  padding: 12px;
  box-shadow: 1px 3px 1px 0 #b6b6b6;
  border-radius: 2px;
  transform: rotate(-15deg);
}
#card-groom-bride .groom-bride .img .img-inner img {
  position: relative;
}
#card-groom-bride .groom-bride .img:last-child {
  transform: rotate(20deg) translate(-15%, -15%);
  z-index: 0;
}

@media screen and (min-width: 450px) {
 
  #card-groom-bride .groom-bride .bride .info > div {
    top: 16px;
    transform: scale(1.15) translateX(-50%);
  }
  #card-groom-bride .groom-bride .groom .info > div {
    top: 80px;
    transform: scale(1.15) translateX(-50%);
  }

}