@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap");
@import "../font/stylesheet.css";
@import "reset.css";

/* Team Section Styles */
.section-about-team {
  background-color: #29361a;
  padding: 100px 0;
}

.team-title {
  /*font-family: 'IvyPrestoDisplay', serif !important;*/
  font-style: normal;
  font-weight: 600;
  font-size: 30px;
  line-height: 45px;
  text-align: center;
  color: #ffffff;
  margin-bottom: 80px;
}

.team-photos-slider {
  margin-bottom: 80px;
  width: 100%;
  position: relative;
  --swiper-theme-color: #ffffff;
}

.team-photos-slider .swiper-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-photo-item {
  width: 300px;
  height: 300px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  overflow: hidden;
  border-radius: 0;
  margin: 0 15px;
  aspect-ratio: 1/1;
}

/* Swiper navigation buttons */
.team-slider-next,
.team-slider-prev {
  color: #ffffff; /* arrow color */
  background: transparent; /* remove blue tint, keep clean */
  width: 36px; /* smaller size */
  height: 36px; /* smaller size */
  border-radius: 50%;
  margin-top: -18px; /* half of height to center vertically */
}

.team-slider-next:after,
.team-slider-prev:after {
  font-size: 16px; /* smaller icon */
  font-weight: bold;
  color: #ffffff; /* ensure white arrows */
}

.team-slider-next:hover,
.team-slider-prev:hover {
  background: rgba(255, 255, 255, 0.2);
}

.team-photo-item:hover,
.team-photo-item.active {
  transform: scale(1.05);
}

.team-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

.team-details-container {
  display: none;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
}

.team-details-container.show {
  display: flex;
}

@media (min-width: 768px) {
  .team-details-container {
    flex-direction: row;
    gap: 60px;
  }

  .selected-member-photo {
    flex: 0 0 400px;
    margin: 0 auto; /* center the photo container horizontally */
  }

  .selected-member-bg {
    padding-bottom: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0;
  }
}

@media (max-width: 767px) {
  .selected-member-photo {
    width: 100%;
  }

  .selected-member-bg {
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0;
  }
}

.member-details {
  flex: 1;
  padding: 20px 0;
  padding-top: 0;
}

.member-name {
  /*font-family: 'IvyPrestoDisplay', serif !important;*/
  font-style: normal;
  font-weight: 600;
  font-size: 40px;
  line-height: 45px;
  text-align: left;
  color: #ffffff;
  margin-bottom: 10px;
  margin-top: 0;
  letter-spacing: 2px;
}

.member-handle {
  font-size: 18px;
  color: #ffffff;
  margin-bottom: 30px;
  font-style: italic;
  text-align: left;
}

.member-text {
  font-size: 16px;
  line-height: 1.6;
  color: #ffffff;
  margin-bottom: 20px;
}

.instagram-link {
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  font-style: italic;
  transition: color 0.3s ease;
}

.instagram-link:hover {
  color: #cccccc;
  text-decoration: underline;
}

/* Mobile Team Styles */
.team-section-mobile {
  background-color: #29361a;
  padding: 50px 0;
}

.team-photos-container-mobile {
  display: flex;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  margin-bottom: 50px;
  width: 100%;
}

.team-photo-item-mobile {
  width: 120px;
  height: 150px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  overflow: hidden;
  border-radius: 0;
}

.team-photo-item-mobile:hover,
.team-photo-item-mobile.active {
  border-color: #8b7355;
  transform: scale(1.05);
}

.team-photo-item-mobile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-details-container-mobile {
  display: none;
}

.team-details-container-mobile.show {
  display: block;
}

.selected-member-photo-mobile {
  margin-bottom: 30px;
}

.selected-member-bg-mobile {
  width: 100%;
  height: 300px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0;
}

.member-details-mobile {
  text-align: center;
}

.member-name-section-mobile {
  margin-bottom: 20px;
}

.member-description-mobile {
  margin-bottom: 20px;
}

.member-name-section-mobile h3 {
  /*font-family: 'IvyPrestoDisplay', serif;*/
  font-style: normal;
  font-weight: 600;
  font-size: 28px;
  line-height: 35px;
  text-align: center;
  color: #ffffff;
}

.member-name-section-mobile p {
  color: #ffffff;
}

.member-description-mobile p {
  color: #ffffff;
}

.member-instagram-mobile a {
  color: #ffffff;
}

@media (max-width: 768px) {
  .team-title {
    font-size: 32px;
    margin-bottom: 50px;
  }

  .team-details-container {
    flex-direction: column;
    gap: 30px;
  }

  .selected-member-photo {
    flex: none;
  }

  .selected-member-photo img {
    height: 400px;
  }

  .member-name {
    font-size: 28px;
  }
}

/*DOCUMENTATION
1. GLOBAL


=====================*/

/*==== 1. GLOBAL =========*/

.mt-5 {
  margin-top: 5px;
}
.mt-10 {
  margin-top: 10px;
}
.mt-20 {
  margin-top: 20px;
}
.mt-30 {
  margin-top: 30px;
}
.mt-50 {
  margin-top: 50px;
}
.mt-100 {
  margin-top: 100px;
}
.mt-200 {
  margin-top: 200px;
}
.mt-300 {
  margin-top: 300px;
}

.mb-5 {
  margin-bottom: 5px;
}
.mb-10 {
  margin-bottom: 10px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-30 {
  margin-bottom: 30px;
}
.mb-50 {
  margin-bottom: 50px;
}
.mb-100 {
  margin-bottom: 100px;
}
.mb-200 {
  margin-bottom: 200px;
}
.mb-300 {
  margin-bottom: 300px;
}

.mtb-5 {
  margin-bottom: 5px;
  margin-top: 5px;
}
.mtb-10 {
  margin-bottom: 10px;
  margin-top: 10px;
}
.mtb-20 {
  margin-bottom: 20px;
  margin-top: 20px;
}
.mtb-30 {
  margin-bottom: 30px;
  margin-top: 30px;
}
.mtb-50 {
  margin-bottom: 50px;
  margin-top: 50px;
}
.mtb-100 {
  margin-bottom: 100px;
  margin-top: 100px;
}
.mtb-200 {
  margin-bottom: 200px;
  margin-top: 200px;
}
.mtb-300 {
  margin-bottom: 300px;
  margin-top: 300px;
}

.ml-5 {
  margin-left: 5px;
}
.ml-10 {
  margin-left: 10px;
}
.ml-20 {
  margin-left: 20px;
}
.ml-30 {
  margin-left: 30px;
}
.ml-50 {
  margin-left: 50px;
}
.ml-100 {
  margin-left: 100px;
}
.ml-200 {
  margin-left: 200px;
}
.ml-300 {
  margin-left: 300px;
}

.mr-5 {
  margin-right: 5px;
}
.mr-10 {
  margin-right: 10px;
}
.mr-20 {
  margin-right: 20px;
}
.mr-30 {
  margin-right: 30px;
}
.mr-50 {
  margin-right: 50px;
}
.mr-100 {
  margin-right: 100px;
}
.mr-200 {
  margin-right: 200px;
}
.mr-300 {
  margin-right: 300px;
}

.mlr-5 {
  margin-right: 5px;
  margin-left: 5px;
}
.mlr-10 {
  margin-right: 10px;
  margin-left: 10px;
}
.mlr-20 {
  margin-right: 20px;
  margin-left: 20px;
}
.mlr-30 {
  margin-right: 30px;
  margin-left: 30px;
}
.mlr-50 {
  margin-right: 50px;
  margin-left: 50px;
}
.mlr-100 {
  margin-right: 100px;
  margin-left: 100px;
}
.mlr-200 {
  margin-right: 200px;
  margin-left: 200px;
}
.mlr-300 {
  margin-right: 300px;
  margin-left: 300px;
}

.pt-5 {
  padding-top: 5px;
}
.pt-10 {
  padding-top: 10px;
}
.pt-20 {
  padding-top: 20px;
}
.pt-30 {
  padding-top: 30px;
}
.pt-50 {
  padding-top: 50px;
}
.pt-100 {
  padding-top: 100px;
}
.pt-200 {
  padding-top: 200px;
}
.pt-300 {
  padding-top: 300px;
}

.pb-5 {
  padding-bottom: 5px;
}
.pb-10 {
  padding-bottom: 10px;
}
.pb-20 {
  padding-bottom: 20px;
}
.pb-30 {
  padding-bottom: 30px;
}
.pb-50 {
  padding-bottom: 50px;
}
.pb-100 {
  padding-bottom: 100px;
}
.pb-200 {
  padding-bottom: 200px;
}
.pb-300 {
  padding-bottom: 300px;
}

.ptb-5 {
  padding-bottom: 5px;
  padding-top: 5px;
}
.ptb-10 {
  padding-bottom: 10px;
  padding-top: 10px;
}
.ptb-20 {
  padding-bottom: 20px;
  padding-top: 20px;
}
.ptb-30 {
  padding-bottom: 30px;
  padding-top: 30px;
}
.ptb-50 {
  padding-bottom: 50px;
  padding-top: 50px;
}
.ptb-100 {
  padding-bottom: 100px;
  padding-top: 100px;
}
.ptb-200 {
  padding-bottom: 200px;
  padding-top: 200px;
}
.ptb-300 {
  padding-bottom: 300px;
  padding-top: 300px;
}

.pl-5 {
  padding-left: 5px;
}
.pl-10 {
  padding-left: 10px;
}
.pl-20 {
  padding-left: 20px;
}
.pl-30 {
  padding-left: 30px;
}
.pl-50 {
  padding-left: 50px;
}
.pl-100 {
  padding-left: 100px;
}
.pl-200 {
  padding-left: 200px;
}
.pl-300 {
  padding-left: 300px;
}

.pr-5 {
  padding-right: 5px;
}
.pr-10 {
  padding-right: 10px;
}
.pr-20 {
  padding-right: 20px;
}
.pr-30 {
  padding-right: 30px;
}
.pr-50 {
  padding-right: 50px;
}
.pr-100 {
  padding-right: 100px;
}
.pr-200 {
  padding-right: 200px;
}
.pr-300 {
  padding-right: 300px;
}

.plr-0 {
  padding-right: 0;
  padding-left: 0;
}
.plr-5 {
  padding-right: 5px;
  padding-left: 5px;
}
.plr-10 {
  padding-right: 10px;
  padding-left: 10px;
}
.plr-20 {
  padding-right: 20px;
  padding-left: 20px;
}
.plr-30 {
  padding-right: 30px;
  padding-left: 30px;
}
.plr-50 {
  padding-right: 50px;
  padding-left: 50px;
}
.plr-100 {
  padding-right: 100px;
  padding-left: 100px;
}
.plr-200 {
  padding-right: 200px;
  padding-left: 200px;
}
.plr-300 {
  padding-right: 300px;
  padding-left: 300px;
}

.p-25 {
  padding: 25px;
}

.p-50 {
  padding: 10.1%;
}

.text-white {
  color: #e9e6dd;
}
.text-pure-white {
  color: white;
}
.text-black {
  color: #2b351a;
}
.text-green {
  color: #2b351a;
}
.img-fullwidth {
  width: 100%;
  transition: transform 0.3s ease-in-out;
}

.img-fullwidth:hover {
  transform: scale(1.02);
}

.img-hover-zoom-wrapper {
  overflow: hidden;
}

.nospace {
  margin: 0;
  padding: 0;
}

.bg-gray {
  background: #f7f7f7;
}
.bg-white {
  background: white;
}
.bg-green {
  background: #2b351a;
}

.m-auto {
  margin: auto;
}

.bold {
  font-weight: 700;
}

/*FONT*/

.source-regular {
  font-family: "IvyPrestoDisplay", serif;
  font-weight: 400;
}

.source-semibold {
  font-family: "IvyPrestoDisplay", serif;
  font-weight: 600;
}

.source-bold {
  font-family: "IvyPrestoDisplay", serif;
  font-weight: 700;
}

.work-light {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
}

.work-regular {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 400;
}

.work-medium {
  font-family: IvyPresto Display;
  font-weight: 500;
}

.work-bold {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 700;
}

p {
  letter-spacing: 0.5px !important;
}

a:hover {
  color: inherit;
  text-decoration: none;
}

/*JOURNAL*/

.coupleLocationSession {
  font-size: 18px;
  margin-left: 10px;
  color: #bc9e78;
  font-weight: 300;
  /*font-family: 'IvyPrestoDisplay', sans-serif;*/
  position: relative;
  z-index: 9;
}

.coupleSessionLine {
  border-left: 1px solid #bc9e78;
  height: 25px;
  margin-left: 20px;
  display: inline;
  position: relative;
  bottom: 8px;
}

.coupleLocationWedding {
  font-size: 18px;
  margin-left: 10px;
  font-weight: 300;
  color: #e9e6dd;
  /*font-family: 'IvyPrestoDisplay', sans-serif;*/
  position: relative;
  z-index: 9;
}

.coupleWeddingLine {
  border-left: 1px solid #e9e6dd;
  height: 25px;
  margin-left: 20px;
  display: inline;
  position: relative;
  bottom: 8px;
}

.container-journal {
  width: 85%;
  margin: auto;
}
.blackOpacity {
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}

.blackOpacityWrap {
  position: absolute;
  top: 50%;
  left: 50%;

  -webkit-transform: translate(-50%);
  transform: translate(-50%);
}

.journalDetailCategory {
  color: #2b351b;
  font-family: "Hanken Grotesk";
  font-size: 12px;
  font-weight: 700;
  line-height: 25px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 44px;
}

.journalDetailTitle {
  /* Style for "How to Enj" */
  max-width: 700px;
  color: #212020;
  /*font-family: 'IvyPrestoDisplay';*/
  font-size: 42px;
  font-weight: 400;
  line-height: 50px;
  margin-bottom: 52px;
}

.journalDetailCategoryMobile {
  color: #2b351b;
  margin-top: 120px;
  font-family: "Hanken Grotesk";
  font-size: 12px;
  font-weight: 700;
  line-height: 25px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 35px;
}

.journalDetailTitleMobile {
  /* Style for "How to Enj" */
  max-width: 370px;
  color: #212020;
  /*font-family: 'IvyPrestoDisplay';*/
  font-size: 21px;
  font-weight: 400;
  line-height: 30px;
  margin-bottom: 35px;
}

.journalDetailDate {
  color: #93847b;
  font-family: "Hanken Grotesk";
  font-size: 12px;
  font-weight: 400;
  line-height: 25px;
  margin-bottom: 70px;
}

.journalDetailDescription {
  color: #413d3d;
  font-family: "Hanken Grotesk";
  font-size: 12px;
  font-weight: 400;
  line-height: 19px;
}

#journalDetailArticle video {
  max-width: 100%;
  height: auto !important;
}
#journalDoodle1 {
  left: -80px;
  top: 30px;
  z-index: -1;
}

.journalDetailFooter {
  margin-top: 40px;
}

.journalDetailTag {
  max-width: 366px;
  color: #2b351b;
  font-family: "Hanken Grotesk";
  font-size: 10px;
  font-weight: 400;
  margin-left: auto;
  line-height: 20px;
  text-align: right;
}

.journalDetailShare {
  color: #252423;
  font-family: "Hanken Grotesk";
  font-size: 10px;
  font-weight: 400;
  line-height: 25px;
}

.journalDetailPrev {
  max-width: 137px;
  color: #2c3026;
  font-family: "Hanken Grotesk";
  font-size: 15px;
  font-weight: 700;
  line-height: 19px;
}

.journalDetailNext {
  max-width: 160px;
  margin-left: auto;
  color: #2c3026;
  font-family: "Hanken Grotesk";
  font-size: 15px;
  font-weight: 700;
  line-height: 19px;
  text-align: right;
}

.journalDetailPrevMobile {
  max-width: 137px;
  color: #2c3026;
  font-family: "Hanken Grotesk";
  font-size: 10px;
  font-weight: 700;
  line-height: 19px;
}

.journalDetailNextMobile {
  max-width: 160px;
  margin-left: auto;
  color: #2c3026;
  font-family: "Hanken Grotesk";
  font-size: 10px;
  font-weight: 700;
  line-height: 19px;
  text-align: right;
}

#journalDoodle2 {
  top: -30px;
}

/*HOME*/

.noOpacity {
  opacity: 1;
  transition: all 0.8s ease-in-out;
}

.grayscale {
  opacity: 0.65;
  filter: none;
  -webkit-filter: grayscale(1);
  transition: all 0.8s ease-in-out;
}

.text-full-white {
  color: white;
  transition: ease 1s;
}
.text-full-black {
  color: black;
  transition: ease 1s;
}

.hoverOpacity {
  transition: ease 1s;
}

.hoverOpacity:hover {
  opacity: 0.5;
  transform: scale(1.05);
}

.hoverOpacityOnly {
  transition: ease 1s;
}

.hoverOpacityOnly:hover {
  opacity: 0.5;
}

.hovertoKhaki {
  transition: ease 1s;
}

.hovertoKhaki:hover {
  color: #7e3b10;
}

/*Instagram Footer*/
.img_wrapper_instagram {
  padding: 0 10px;
}

#igSection {
  background: #baada7;
  padding: 20px 0;
}

#igFeed {
  padding-bottom: 50px;
  overflow: hidden;
}

#igTitle {
  padding-bottom: 20px;
  padding-top: 20px;
}

#igTitle a {
  color: #7e3b10;
  font-family: "Hanken Grotesk";
  font-size: 12px;
  font-weight: 400;
  line-height: 25px;
}

.col-ig {
  width: 12.5%;
  float: left;
}

@media screen and (max-width: 991px) {
  .coupleLocationSession {
    font-size: 10px;
    margin-left: 10px;
    color: #bc9e78;
    font-weight: 300;
    /*font-family: 'IvyPrestoDisplay', sans-serif;*/
  }

  .coupleSessionLine {
    border-left: 1px solid #bc9e78;
    height: 20px;
    margin-left: 10px;
    display: inline;
    position: relative;
    bottom: 0px;
  }

  .coupleLocationWedding {
    font-size: 10px;
    margin-left: 10px;
    font-weight: 300;
    color: #e9e6dd;
    /*font-family: 'IvyPrestoDisplay', sans-serif;*/
  }

  .coupleWeddingLine {
    border-left: 1px solid #e9e6dd;
    height: 20px;
    margin-left: 10px;
    display: inline;
    position: relative;
    bottom: 0px;
  }

  .img_wrapper_instagram {
    padding: 0 0;
  }

  #igSection {
    background: #baada7;
    padding: 20px 0;
  }

  #igFeed {
    padding-bottom: 50px;
    overflow: hidden;
  }

  #igTitle {
    padding-bottom: 20px;
    padding-top: 20px;
  }

  #igTitle a {
    color: #7e3b10;
    font-family: "Hanken Grotesk";
    font-size: 12px;
    font-weight: 400;
    line-height: 25px;
  }

  .col-ig {
    width: 25%;
    float: left;
  }
}

/*JOURNAL*/
#journalDetailArticle img,
video {
  max-width: 100%;
}

#journalIndexSection {
  padding-top: 150px;
}

#journalIndexSection .row:first-child {
  padding-right: 15px;
  padding-left: 15px;
}

.homeJournalTitle {
  margin-top: 20px;
  max-width: 269px;
  color: #283516;
  /*font-family: 'IvyPrestoDisplay';*/
  font-size: 22px;
  font-weight: 400;
  line-height: 30px;
}

.homeJournalTitleMobile {
  max-width: 200px;
  color: white;
  /*font-family: 'IvyPrestoDisplay';*/
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.homeJournalDate {
  max-width: 81px;
  /*font-family: 'IvyPrestoDisplay';*/
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: #6d6d6d;
}

.homeJournalDateMobile {
  margin: auto;
  max-width: 81px;
  /*font-family: 'IvyPrestoDisplay';*/
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: white;
}

.col-journal {
  padding: 0;
}

.categoryVertical {
  position: relative;
  /*padding: 10px;*/
  left: 10px;
  border-radius: 5px 5px 0 0;
  float: right;
  -moz-transform: rotate(270deg); /* FF3.5+ */
  -o-transform: rotate(270deg); /* Opera 10.5 */
  -webkit-transform: rotate(-90deg); /* Saf3.1+, Chrome */
  transform: rotate(-90deg);
  -moz-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  color: white;
  text-transform: uppercase;

  /* Style for "TRAVELLING" */
  color: #ece2da;
  font-family: "Hanken Grotesk";
  font-size: 11px;
  font-weight: 400;
  line-height: 25px;
  text-transform: uppercase;
  /* Text style for "TRAVELLING" */
  letter-spacing: 0.55px;
}

.journalBottomWrap {
  position: absolute;
  bottom: 30px;
  left: -20px;
  width: 85%;
}

.journalBottomWrap p {
  color: #ece2da;
  /*font-family: 'IvyPrestoDisplay';*/
  font-size: 22px;
  font-weight: 400;
  line-height: 30px;
}

.journalContentWrap {
  height: 540px;
}

.journalContent {
  background: rgba(0, 0, 0, 0.4);
  margin-left: 0;
  margin-right: 0;
}
.journalTopWrap {
  margin-top: 20px;
}

.journalTopWrap p {
  color: #ece2da;
  font-family: "Hanken Grotesk";
  font-size: 12px;
  font-weight: 400;
  line-height: 25px;
}

.journalHoverDescription {
  background: rgba(255, 255, 255, 0.8);
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /*di hover jadi 70*/
  height: 0%;
  visibility: hidden;
  transition: 0.5s ease;
}

.journalHoverDescription .hoverContentParagraph {
  position: absolute;
  bottom: 20px;
  left: 25px;
}

.journalHoverContent {
  position: absolute;
  height: 100%;
  width: 100%;
  cursor: pointer;
}

.bwImage {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  transition: 0.35s ease-in-out;
}

.bwImageOut {
  -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
  transition: 0.35s ease-in-out;
}

.journalTopWrap p {
  color: white;
  font-weight: 500;
  margin-bottom: 0px;
}

.journalTagLink {
  color: black;
}

.hoverContentParagraph a {
  color: black;
  color: #282828;
  font-family: "Hanken Grotesk";
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
}

.hoverContentParagraph p {
  margin-bottom: 30px;
  width: 90%;
  color: #282828;
  font-family: "Hanken Grotesk";
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
}

/*Photographer*/

.photographerName {
  color: #eff0eb;
  /*font-family: 'IvyPrestoDisplay';*/
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 0;
  line-height: 25px;
}

.photographerHashtag {
  color: #eff0eb;
  font-family: "Source Sans Pro";
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 37px;
}

.photographerDescription {
  max-width: 372px;
  color: #8f908d;
  font-family: "Hanken Grotesk";
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  margin-bottom: 35px;
  transition: all 0.3s ease-in-out;
  transform: translateZ(0);
  transform-origin: 50% 50%;
}

.photographerInstagram {
  color: #eff0eb;
  font-family: "Hanken Grotesk";
  font-size: 11px;
  font-weight: 400;
  line-height: 25px;
}

.photographerInstagram:hover {
  color: #eff0eb;
  font-family: "Hanken Grotesk";
  font-size: 11px;
  font-weight: 400;
  line-height: 25px;
}

#photographerSection {
  padding-top: 130px;
  padding-bottom: 9px;
}

.photographerList {
  padding-bottom: 121px;
}

/* WebKit and Opera browsers */
@-webkit-keyframes spinner {
  from {
    -webkit-transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(-360deg);
  }
}

/* all other browsers */
@keyframes spinner {
  from {
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  to {
    -moz-transform: rotateY(-360deg);
    -ms-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
}

#stage {
  margin: 1em auto;
  -webkit-perspective: 1200px;
  -moz-perspective: 1200px;
  -ms-perspective: 1200px;
  perspective: 1200px;
}

#spinner {
  -webkit-animation-name: spinner;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 6s;

  animation-name: spinner;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 6s;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

#spinner:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

@keyframes flickerAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.animate-flicker {
  -webkit-animation: flickerAnimation 3s infinite;
  -moz-animation: flickerAnimation 3s infinite;
  -o-animation: flickerAnimation 3s infinite;
  animation: flickerAnimation 3s infinite;
  width: 80px;
  margin: auto;
}

.loader-center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

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

.custom-swiper-button-next {
  right: 0px;
  left: auto;
}

.custom-swiper-button-prev {
  right: auto;
  left: 10px;
}

.custom-swiper-button-prev {
  position: absolute;
  top: 50%;
  width: 27px;
  height: 44px;
  margin-top: -22px;
  z-index: 10;
  cursor: pointer;
  background-size: 27px 44px;
  background-position: center;
  background-repeat: no-repeat;
}

.custom-swiper-button-next {
  position: absolute;
  top: 50%;
  width: 27px;
  height: 44px;
  margin-top: -22px;
  z-index: 10;
  cursor: pointer;
  background-size: 27px 44px;
  background-position: center;
  background-repeat: no-repeat;
}

.widthMargin {
  width: 85%;
  margin: Auto;
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .centerRecent {
    position: relative;
    top: -5%;
  }

  .aboutContainer {
    max-width: 700px;
  }

  .helloAbout {
    font-size: 20px;
  }

  .descriptionAbout {
    font-size: 14px;
    line-height: 2;
  }
}

.modalWidth {
  max-width: 500px;
}
.centerRecent {
  position: relative;
  top: 10%;
}

@media screen and (min-width: 1200px) and (max-width: 1365px) {
  .centerRecent {
    position: relative;
    top: 12%;
  }
}

@media screen and (min-width: 1366px) and (max-width: 1349px) {
  .centerRecent {
    position: relative;
    top: 10%;
  }
}

@media screen and (min-width: 1367px) and (max-width: 1439px) {
  .centerRecent {
    position: relative;
    top: 15%;
  }
}

@media screen and (min-width: 1440px) and (max-width: 1599px) {
  .centerRecent {
    position: relative;
    top: 15%;
  }
}

@media screen and (min-width: 1600px) and (max-width: 1919px) {
  .centerRecent {
    position: relative;
    top: 18%;
  }
}

@media screen and (min-width: 1920px) {
  .centerRecent {
    position: relative;
    top: 20%;
  }
}

@media screen and (min-width: 1921px) {
  .aboutContainer {
    max-width: 800px;
  }

  .helloAbout {
    font-size: 30px;
  }

  .descriptionAbout {
    font-size: 18px;
    line-height: 2;
  }
}

.recentTopBottom1 {
  position: relative;
  top: 15px;
}

.recentTopBottom2 {
  position: relative;
  top: -150px;
}

.recentTopBottom3 {
  position: relative;
  top: -10px;
}

.recentHome1 {
  background-size: cover;
  background-position: center center;
  height: 320px;
  width: 100%;
}

.recentHome2 {
  background-size: cover;
  background-position: center center;
  height: 350px;
  width: 100%;
}

.recentHome3 {
  background-size: cover;
  background-position: center center;
  height: 300px;
  width: 100%;
}

.homeProductDescription {
  font-size: 25px;
}

.homeProductCategory {
  font-size: 16px;
}

#profilDokter h5 {
  font-size: 14px;
}

#profilDokter h2 {
  font-size: 36px;
}

#profilDokter h3 {
  font-size: 18px;
}

.navCustom {
  width: 40px;
  border-radius: 0;
  height: 3px;
  background: white;
}

/*.swiper-pagination {
  position: absolute;
  top: 10px;
  right: 10px;
  width: auto !important;
  left: auto !important;
  margin: 0;
}*/
.swiper-pagination-bullet {
  width: 40px !important;
  border-radius: 0 !important;
  height: 3px !important;
  background: white !important;
  color: white !important;
  opacity: 0.5 !important;
}
.swiper-pagination-bullet-active {
  width: 40px !important;
  border-radius: 0 !important;
  height: 3px !important;
  background: white !important;
  color: white;
  opacity: 1 !important;
}
/*@font-face {
    font-family: "Garamond";
    font-weight: normal;
    src: url("../font/Adobe-Garamond-Pro-Regular.woff") format('woff');
}

@font-face {
    font-family: "Courier";
    font-weight: normal;
    src: url("../font/courier-new-webfont.woff") format('woff');
}

@font-face {
    font-family: "Lato";
    font-weight: 300;
    src: url("../font/Lato-Light.woff") format('woff');
}

@font-face {
    font-family: "Lato";
    font-weight: normal;
    src: url("../font/Lato-Regular.woff") format('woff');
}
*/

header {
  position: absolute;
  width: 100%;
  z-index: 10;
  background-color: #efefe8;
}

/* Genuine section positioning context */
.section-genuine {
  position: relative;
  padding: 60px 0; /* normal flow spacing */
}

/* Witnessing Genuine Connections */
.section-genuine .genuine-title {
  position: static;
  max-width: 696px;
  margin: 0 auto 16px; /* gap to paragraph like reference */
  /*font-family: 'IvyPrestoDisplay', serif;*/
  font-style: normal;
  font-weight: 600; /* Semibold per Figma */
  font-size: 46px; /* match Figma */
  line-height: 76px; /* as in Figma */
  letter-spacing: 0px;
  text-align: center;
  color: #845420;
}

/* Description paragraph */
.section-genuine .genuine-description {
  position: static;
  max-width: 560px; /* narrower block like reference */
  margin: 0 auto 30px; /* sit right under title */
  /*font-family: 'IvyPrestoDisplay', serif;*/
  font-style: normal;
  font-weight: 400;
  font-size: 18px; /* smaller body */
  line-height: 36px; /* slightly more spacing between lines */
  text-align: center;
  color: #65574e;
}

/* Responsive overrides */
@media (max-width: 1400px) {
  .section-genuine .genuine-title {
    /* left: 50%;
    transform: translateX(-50%); */
  }
}

@media (max-width: 1200px) {
  .section-genuine {
    min-height: unset;
    padding: 60px 20px;
  }
  .section-genuine .genuine-title,
  .section-genuine .genuine-description,
  .section-genuine .tagline-text {
    position: static;
    width: 100%;
    height: auto;
    transform: none;
    z-index: 5;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .section-genuine .genuine-title {
    font-size: 54px;
    line-height: 60px;
    margin-bottom: 20px;
  }
  .section-genuine .genuine-description {
    font-size: 20px;
    line-height: 38px;
    margin-bottom: 30px;
  }
  .section-genuine .tagline-text {
    font-size: 28px;
    line-height: 38px;
    margin-bottom: 40px;
  }
}

@media (max-width: 767.98px) {
  .section-genuine {
    padding: 40px 16px;
  }
  .section-genuine .genuine-title {
    font-size: 36px;
    line-height: 44px;
  }
  .section-genuine .genuine-description {
    font-size: 18px;
    line-height: 32px;
  }
  .section-genuine .tagline-text {
    font-size: 22px;
    line-height: 32px;
  }
  /* Flip tagline: image first, text below on mobile */
  .tagline-col-image {
    order: 0;
  }
  .tagline-col-text {
    order: 1;
    margin-top: 16px;
  }
  /* Force flip even if grid uses floats */
  .tagline-row {
    display: flex !important;
    flex-direction: column-reverse !important;
    flex-wrap: nowrap !important;
  }
  .tagline-row > [class*="col-"] {
    float: none !important;
    width: 100% !important;
  }
}

/* Desktop/tablet: ensure text left, image right for this row */
@media (min-width: 992px) {
  .tagline-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }
  .tagline-row > [class*="col-"] {
    float: none !important;
    width: 50% !important;
  }
  .tagline-col-text {
    order: 1;
  }
  .tagline-col-image {
    order: 1;
  }
}

/* Tagline paragraph (left column line) */
.section-genuine .tagline-text {
  position: static;
  max-width: 490px;
  margin: 0 auto 40px;
  /*font-family: 'IvyPrestoDisplay', serif;*/
  font-style: normal;
  font-weight: 600;
  font-size: 28px;
  line-height: 45px;
  text-align: center;
  color: #65574e;
}

.Aligner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.Aligner-item {
  max-width: 50%;
}

.Aligner-item--top {
  align-self: flex-start;
}

.Aligner-item--bottom {
  align-self: flex-end;
}

.kotak {
  border-radius: 0;
}

#desktopMenu {
  position: absolute;
}
#logo {
  max-width: 80px;
  max-height: 50px;
}

#logoMobile {
  max-width: 70px;
  max-height: 50px;
}

#primarymenu {
  margin-top: 5px;
  position: absolute;
  right: 0;
}

#primarymenu li {
  float: left;
  font-size: 12px;
  margin-left: 50px;
  list-style-type: none;
  color: #012f66;
}

#primarymenu a {
  color: #2a361b;
  font-family: "Playfair Display", serif;
  font-size: 14px;
  font-weight: 600px;
  text-transform: uppercase;
}

#primarymenu a:hover {
  transition: linear 0.5s;
  opacity: 0.5;
  text-decoration: none;
}

/*Menu Couple Sessions*/
#coupleMenuSessions {
  margin-top: 15px;
  position: absolute;
  right: 0;
}

#coupleMenuSessions li {
  float: left;
  font-size: 12px;
  margin-left: 50px;
  list-style-type: none;
  color: #bc9e78;
}

#coupleMenuSessions a {
  color: #bc9e78;
}

#coupleMenuSessions a:hover {
  transition: linear 0.5s;
  opacity: 0.5;
}

/*Menu Couple Wedding*/
#coupleMenuWedding {
  margin-top: 15px;
  position: absolute;
  right: 0;
}

#coupleMenuWedding li {
  float: left;
  font-size: 12px;
  margin-left: 50px;
  list-style-type: none;
  color: #e9e6dd;
}

#coupleMenuWedding a {
  color: #e9e6dd;
}

#coupleMenuWedding a:hover {
  transition: linear 0.5s;
  opacity: 0.5;
}

#galleryPrimaryMenu a:hover {
  transition: linear 0.5s;
  opacity: 0.5;
}

#galleryPrimaryMenu {
  margin-top: 15px;
  position: absolute;
  right: 0;
}

#galleryPrimaryMenu li {
  float: left;
  font-size: 12px;
  margin-left: 50px;
  list-style-type: none;
  color: #2b351a;
}

#galleryPrimaryMenu a {
  color: #2b351a;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 0 !important;
  padding: 5px 0;
  padding-top: 5px;
  padding-right: 0px;
  padding-bottom: 5px;
  padding-left: 0px;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

.linomargin {
  margin: 0px !important;
}

#mobileMenuPosition {
  position: absolute;
  bottom: 20%;
  right: 0;
}
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 99999999;
  top: 0;
  right: 0;
  background-color: #e9e6dd;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 30px 8px 32px;
  text-decoration: none;
  font-size: 14px;
  text-align: right;
  color: #2b351a;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: -10px;
  font-size: 25px;
  margin-left: 50px;
}

.btn-bo {
  border: 0px solid;
  color: white;
  background-color: #2b351a;
  border-color: #2b351a;
  border-radius: 0;
  padding: 10px 15px;
}

.f-14 {
  font-size: 14px;
}
.f-12 {
  font-size: 12px;
}
.f-10 {
  font-size: 10px;
}
.form-bo {
  margin: auto;
  display: block;
  width: 85%;
  height: 34px;
  padding: 6px 0px 10px 0px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 0px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition:
    border-color ease-in-out 0.15s,
    -webkit-box-shadow ease-in-out 0.15s;
  -o-transition:
    border-color ease-in-out 0.15s,
    box-shadow ease-in-out 0.15s;
  transition:
    border-color ease-in-out 0.15s,
    box-shadow ease-in-out 0.15s;
}

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}

#menustrip {
  font-size: 20px;
  cursor: pointer;
  position: relative;
}

.submenu {
  margin-left: 10px;
  display: none;
}

.swiper-container {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  z-index: -999;
}

.about-slider-image .swiper-slide img,
.about-slider-image-mobile .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-slider-image .swiper-slide,
.about-slider-image-mobile .swiper-slide {
  aspect-ratio: 1 / 1;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  background: white !important;
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgb(0, 122, 255);
}

/*HOME PAGE*/

#homeGalleryKiri {
  height: 100vh;
  padding: 50px;
}

#homeGalleryKanan {
  height: 100vh;
}

.homeGalleryDescription {
  padding: 0 30px;
}

div.social-float-parent {
  position: relative;
}
div#social-float {
  position: fixed;
  right: 50px;
  bottom: 50px;
}
div#social-float-mobile {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 99;
  opacity: 0.6;
}
div#social-float-bread {
  position: fixed;
  right: 50px;
  top: 50%;
  transform: rotate(90deg);
  padding-bottom: -50px;
}
#breadcrumbBo {
  position: relative;
}

#topbuttondesktop {
  position: fixed;
  z-index: 99;
  bottom: 30px;
  right: 30px;
  opacity: 0.6;
}

.topbutton-hide {
  visibility: hidden;
}

.topbutton-show {
  visibility: visible;
}

#searchbar {
  position: absolute;
  margin-top: 25px;
  right: 0px;
  width: 210px;
  background: transparent;
  border: 0px;
  border-bottom: 0.3px solid rgba(149, 152, 154, 0.9);
  padding: 10px;
  font-size: 14px;
  display: none;
  color: white;
}

#searchBarMobile {
  margin-right: 30px;
  width: 80%;
  background: transparent;
  border: 0px;
  border-bottom: 0.3px solid rgba(149, 152, 154, 0.9);
  padding: 10px;
  font-size: 12px;
  display: none;
}

#searchbutton {
  cursor: pointer;
}

#mobileSearchButton {
  cursor: pointer;
  text-align: right;
}

.categoryTitle {
  font-size: 40px;
}

.mobileCategoryTitle {
  font-size: 20px;
}

#socialMediaFooter a {
  color: #2b351a;
  margin-right: 5px;
  font-size: 18px;
}

#homeDoodleMobile1 {
  width: 20%;
  position: absolute;
  left: 70%;
  z-index: 9;

  top: 0;
}

#recentDoodle {
  position: absolute;
  z-index: -1;
  right: 0;
  top: 25px;
  width: 60%;
}

#homeDoodleMobile2 {
  width: 25%;
  position: absolute;
  left: 0%;
  z-index: 9;
  top: 150px;
}

/*CONTACT PAGE*/
.contactInput {
  background: transparent;
  border: 0px;
  border-bottom: 0.3px solid black;
  padding: 10px 0px;
  font-size: 20px;
  margin-bottom: 30px;
  width: 100%;
}

.contactInput::placeholder,
.contact-form-element label {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  opacity: 1;
  /* Firefox */
  font-family: "Playfair Display", serif;
  color: #000000;
  font-size: 20px;
  font-weight: 400;
  line-height: 35px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.contactInput:focus {
  outline: none !important;
  border-bottom: 1px solid black;
  box-shadow: none;
}

.contactTextArea {
  background: transparent;
  border: 1px solid black;
  padding: 10px;
  font-size: 20px;
  width: 100%;
}

.contactTextArea:focus {
  outline: none !important;
  border: 1px solid black;
  box-shadow: none;
}

.contactSubmitButton {
  border: 0;
  background: transparent;
  font-size: 20px;
  /*font-family: 'IvyPrestoDisplay', serif;*/
  color: #65574e;
  cursor: pointer;
  padding-bottom: 5px;
  border-bottom: 1px solid #65574e;
  transition: all 0.3s ease;
  margin-top: 50px !important; /* Reduced margin */
}

.contactSubmitButton:hover {
  color: #000;
  border-bottom-color: #000;
}

.contactInput[type="date"]::before {
  color: #000000;
  content: attr(placeholder);
}
.contactInput[type="date"] {
  color: #000000;
}
.contactInput[type="date"]:focus,
.contactInput[type="date"]:valid {
  color: #000000;
}
.contactInput[type="date"]:focus::before,
.contactInput[type="date"]:valid::before {
  content: "" !important;
}

/*GALLERY COUPLE PAGE*/

.klikMuncul {
  display: none;
}
.accordion {
  background-color: transparent;
  color: #2b351a;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  font-size: 60px;
  z-index: 2;
  position: relative;
}

.active,
.accordion:hover {
  color: white;
}

.couplePanel {
  padding: 0 18px;
  background-color: transparent;
  max-height: 0;
  overflow: hidden;
  position: relative;
  top: 50px;
  z-index: 1;
  transition: max-height 0.2s ease-out;
}

#coupleList {
  padding-left: 100px;
  padding-top: 100px;
  padding-bottom: 300px;
}

#coupleList a > div {
  display: none;
}

#coupleList a:hover > div {
  display: block;
}

.gallerySeeMore {
  padding-left: 100px;
  margin-bottom: 100px;
}

.coupleContainer {
  position: absolute;
  padding-bottom: 150px;
  width: 100%;
}

.coupleImage {
  width: 100%;
}

.navhover {
  position: absolute;
  top: 0;
  max-width: 500px;
  margin-left: 100px;
  z-index: 0;
}

.coupleContainerNew {
  width: 50%;
  margin: auto;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

.coupleName {
  font-size: 60px;
  color: #bc9e78;
  position: relative;
  /*font-family: 'IvyPrestoDisplay', sans-serif;*/
  font-weight: 400;
}

.coupleName:hover {
  color: #e9e6dd;
  /*font-family: 'IvyPrestoDisplay', sans-serif;*/
  font-weight: 400;
}

.coupleNameWedding {
  font-size: 60px;
  color: #e9e6dd;
  position: relative;
  /*font-family: 'IvyPrestoDisplay', sans-serif;*/
  font-weight: 400;
}

.coupleNameWedding:hover {
  color: #bc9e78;
  /*font-family: 'IvyPrestoDisplay', sans-serif;*/
  font-weight: 400;
}

/*ARTICLE PAGE*/

.circleAfter::after {
  content: " •";
  color: #e9e6dd;
  font-size: 30px;
  position: relative;
  top: 5px;
}
.circleBefore::before {
  content: "• ";
  color: #e9e6dd;
  font-size: 30px;
  position: relative;
  top: 5px;
}

.articleName {
  color: #2b351a;
  font-size: 90px;
  margin-bottom: 0;
}

.articleNameMobile {
  margin-top: 200px;
  font-size: 27px;
}

#articleKiriName {
  transform: rotate(-90deg);
  position: relative;
  left: -25%;
  top: -50px;
}

#shareArticle {
  margin-top: 50px;
}
#shareArticle a {
  margin-right: 10px;
  color: #2b351a;
}

#shareArticle a img {
  height: 15px;
}

.articleImage1 {
  position: absolute;
  width: 50%;
  left: 5%;
}

.articleImage2 {
  position: absolute;
  width: 20%;
  right: 10%;
  top: -60%;
}

.articleImage3 {
  position: absolute;
  width: 20%;
  left: 35%;
  top: -80%;
}

.articleImage4 {
  position: absolute;
  width: 20%;
  left: 5%;
  top: -150%;
}

.articleImage5 {
  position: absolute;
  width: 100%;
  left: 0;
  top: -140%;
}

.articleImage6 {
  position: absolute;
  width: 35%;
  left: 60%;
  top: 20%;
}

.articleImage7 {
  position: absolute;
  width: 50%;
  left: 5%;
  top: -120%;
}

.articleImage8 {
  position: absolute;
  width: 25%;
  left: 5%;
  top: 20%;
}

.articleImage9 {
  position: absolute;
  width: 40%;
  left: 45%;
  top: -70%;
}

.articleImage10 {
  position: absolute;
  width: 45%;
  left: 0%;
  top: -70%;
}

.articleImage11 {
  position: absolute;
  width: 20%;
  left: 60%;
  top: -130%;
}

.articleImage12 {
  position: absolute;
  width: 40%;
  left: 30%;
  top: -100%;
}

.articleImage13 {
  position: absolute;
  width: 35%;
  left: 5%;
  top: -90%;
}

.articleImage14 {
  position: absolute;
  width: 50%;
  left: 45%;
  top: -190%;
}

.articleImage15 {
  position: absolute;
  width: 70%;
  left: 15%;
  top: -155%;
}

.articleImage16 {
  position: absolute;
  width: 40%;
  left: 5%;
  top: -80%;
}

.articleImage17 {
  position: absolute;
  width: 40%;
  left: 55%;
  top: -110%;
}

.articleImage18 {
  position: absolute;
  width: 40%;
  left: 12%;
  top: -150%;
}

.articleImage19 {
  position: absolute;
  width: 50%;
  left: 5%;
  top: -120%;
}

.articleImage20 {
  position: absolute;
  width: 35%;
  left: 57%;
  top: -220%;
}

/*SEARCH RESULT PAGE*/

.textSearchMobile {
  font-size: 12px;
}

.swiper-button-next {
  height: 20px !important;
}

.swiper-button-prev {
  height: 20px !important;
}

#doodleSearch1Mobile {
  position: absolute;
  right: 0%;
  top: 110px;
  z-index: -1;
  height: 12%;
}

/*SEARCHPAGE RESPONSIVE*/
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .textSearch {
    font-size: 12px;
  }

  #searchResultSlider {
    margin-top: 5%;
    height: 400px;
    margin-left: 10%;
  }

  #searchResultSlider .swiper-wrapper {
    height: 250px;
  }

  #searchResultSlider .swiper-wrapper .swiper-slide {
    position: relative;
    width: 25%;
  }

  #searchResultSlider img {
    display: block;
    width: 100%;
    /* max-width: 100%;
      max-height: 300px;*/
  }

  .searchResultDesktop2 {
    position: absolute;
    top: 0;
    height: 100%;
  }

  .searchResultDesktop1 {
    position: absolute;
    bottom: 0;
  }

  .custom-button-prev {
    position: absolute;
    top: 50%;
    z-index: 99;
    left: 2%;
  }

  .custom-button-next {
    position: absolute;
    right: 2%;
    top: 50%;
    z-index: 99;
  }

  #doodleSearch1 {
    position: absolute;
    left: 20%;
    width: 20%;
  }

  #doodleSearch2 {
    position: absolute;
    top: 115%;
    right: 35%;
    z-index: 9;
    width: 15%;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1365px) {
  .textSearch {
    font-size: 14px;
  }

  #searchResultSlider {
    margin-top: 5%;
    height: 500px;
    margin-left: 10%;
  }

  #searchResultSlider .swiper-wrapper {
    height: 350px;
  }

  #searchResultSlider .swiper-wrapper .swiper-slide {
    position: relative;
    width: 25%;
  }

  #searchResultSlider img {
    display: block;
    width: 100%;
    /* max-width: 100%;
  max-height: 300px;*/
  }

  .searchResultDesktop2 {
    position: absolute;
    top: 0;
    height: 100%;
  }

  .searchResultDesktop1 {
    position: absolute;
    bottom: 0;
  }

  .custom-button-prev {
    position: absolute;
    top: 50%;
    z-index: 99;
    left: 2%;
  }

  .custom-button-next {
    position: absolute;
    right: 2%;
    top: 50%;
    z-index: 99;
  }

  #doodleSearch1 {
    position: absolute;
    left: 20%;
    width: 20%;
  }

  #doodleSearch2 {
    position: absolute;
    top: 77%;
    right: 35%;
    z-index: 9;
    width: 15%;
  }
}

@media screen and (min-width: 1366px) and (max-width: 1439px) {
  .textSearch {
    font-size: 12px;
  }

  #searchResultSlider {
    margin-top: 5%;
    height: 500px;
    margin-left: 10%;
  }

  #searchResultSlider .swiper-wrapper {
    height: 350px;
  }

  #searchResultSlider .swiper-wrapper .swiper-slide {
    position: relative;
    width: 25%;
  }

  #searchResultSlider img {
    display: block;
    width: 100%;
    /* max-width: 100%;
      max-height: 300px;*/
  }

  .searchResultDesktop2 {
    position: absolute;
    top: 0;
    height: 100%;
  }

  .searchResultDesktop1 {
    position: absolute;
    bottom: 0;
  }

  .custom-button-prev {
    position: absolute;
    top: 50%;
    z-index: 99;
    left: 2%;
  }

  .custom-button-next {
    position: absolute;
    right: 2%;
    top: 50%;
    z-index: 99;
  }

  #doodleSearch1 {
    position: absolute;
    left: 20%;
    width: 20%;
  }

  #doodleSearch2 {
    position: absolute;
    top: 100%;
    right: 35%;
    z-index: 9;
    width: 15%;
  }
}

@media screen and (min-width: 1440px) and (max-width: 1599px) {
  .textSearch {
    font-size: 12px;
  }

  #searchResultSlider {
    margin-top: 5%;
    height: 500px;
    margin-left: 10%;
  }

  #searchResultSlider .swiper-wrapper {
    height: 400px;
  }

  #searchResultSlider .swiper-wrapper .swiper-slide {
    position: relative;
    width: 25%;
  }

  #searchResultSlider img {
    display: block;
    width: 100%;
    /* max-width: 100%;
      max-height: 300px;*/
  }

  .searchResultDesktop2 {
    position: absolute;
    top: 0;
    height: 100%;
  }

  .searchResultDesktop1 {
    position: absolute;
    bottom: 0;
  }

  .custom-button-prev {
    position: absolute;
    top: 50%;
    z-index: 99;
    left: 2%;
  }

  .custom-button-next {
    position: absolute;
    right: 2%;
    top: 50%;
    z-index: 99;
  }

  #doodleSearch1 {
    position: absolute;
    left: 20%;
    width: 20%;
  }

  #doodleSearch2 {
    position: absolute;
    top: 85%;
    right: 35%;
    z-index: 9;
    width: 15%;
  }
}

@media screen and (min-width: 1600px) and (max-width: 1919px) {
  .recentTopBottom1 {
    position: relative;
    top: 15px;
  }

  .recentTopBottom2 {
    position: relative;
    top: -170px;
  }

  .recentTopBottom3 {
    position: relative;
    top: -30px;
  }

  .textSearch {
    font-size: 12px;
  }

  #searchResultSlider {
    margin-top: 5%;
    height: 500px;
    margin-left: 10%;
  }

  #searchResultSlider .swiper-wrapper {
    height: 450px;
  }

  #searchResultSlider .swiper-wrapper .swiper-slide {
    position: relative;
    width: 25%;
  }

  #searchResultSlider img {
    display: block;
    width: 100%;
    /* max-width: 100%;
      max-height: 300px;*/
  }

  .searchResultDesktop2 {
    position: absolute;
    top: 0;
    height: 100%;
  }

  .searchResultDesktop1 {
    position: absolute;
    bottom: 0;
  }

  .custom-button-prev {
    position: absolute;
    top: 50%;
    z-index: 99;
    left: 2%;
  }

  .custom-button-next {
    position: absolute;
    right: 2%;
    top: 50%;
    z-index: 99;
  }

  #doodleSearch1 {
    position: absolute;
    left: 20%;
    width: 20%;
  }

  #doodleSearch2 {
    position: absolute;
    top: 85%;
    right: 35%;
    z-index: 9;
    width: 15%;
  }
}

@media screen and (min-width: 1920px) {
  .recentTopBottom1 {
    position: relative;
    top: 15px;
  }

  .recentTopBottom2 {
    position: relative;
    top: -170px;
  }

  .recentTopBottom3 {
    position: relative;
    top: -30px;
  }
  .textSearch {
    font-size: 12px;
  }

  #searchResultSlider {
    margin-top: 5%;
    height: 550px;
    margin-left: 10%;
  }

  #searchResultSlider .swiper-wrapper {
    height: 500px;
  }

  #searchResultSlider .swiper-wrapper .swiper-slide {
    position: relative;
    width: 25%;
  }

  #searchResultSlider img {
    display: block;
    width: 100%;
    /* max-width: 100%;
      max-height: 300px;*/
  }

  .searchResultDesktop2 {
    position: absolute;
    top: 0;
    height: 100%;
  }

  .searchResultDesktop1 {
    position: absolute;
    bottom: 0;
  }

  .custom-button-prev {
    position: absolute;
    top: 50%;
    z-index: 99;
    left: 2%;
  }

  .custom-button-next {
    position: absolute;
    right: 2%;
    top: 50%;
    z-index: 99;
  }

  #doodleSearch1 {
    position: absolute;
    left: 20%;
    width: 20%;
  }

  #doodleSearch2 {
    position: absolute;
    top: 80%;
    right: 35%;
    z-index: 9;
    width: 15%;
  }
}

/*ABOUT PAGE*/

.descriptionAbout {
  line-height: 2;
}

#doodleAbout {
  position: absolute;
  top: 55%;
  z-index: 99;
  right: 10%;
  width: 300px;
}

#lineAbout {
  position: absolute;
  top: 15%;
  z-index: 99;
  left: 40%;
  width: 550px;
}

#doodleAboutMobile {
  position: absolute;
  top: 35%;
  right: -15%;
  width: 500px;
}

/*RESPONSIVE*/
/*.container-firstpage {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}


@media (min-width: 768px) {
  .container-firstpage {
    width: 744px;
  }


}
@media (min-width: 992px) {
  .container-firstpage {
    width: 964px;
  }

}
@media (min-width: 1458px){
  .container-firstpage {
      width: 1440px;
  }
}   */

@media screen and (max-width: 767px) {
  .modalWidth {
    max-width: 85%;
    margin: auto;
  }

  #coupleList {
    padding-left: 50px;
    padding-top: 200px;
    padding-bottom: 100px;
  }
  .coupleName {
    /*font-size: 27px;*/
    font-size: 18px;
    color: #bc9e78;
    position: relative;
    /*font-family: 'IvyPrestoDisplay', sans-serif;*/
    font-weight: 400;
  }

  .coupleNameWedding {
    /*font-size: 27px;*/
    font-size: 18px;
    color: #e9e6dd;
    position: relative;
    /*font-family: 'IvyPrestoDisplay', sans-serif;*/
    font-weight: 400;
  }

  .coupleImage {
    width: 50%;
  }

  .coupleContainer {
    position: absolute;
    padding-bottom: 70px !important;
    width: 100%;
  }

  .coupleImage {
    width: 100%;
  }

  .navhover {
    position: absolute;
    top: 0;
    max-width: 230px;
    margin-left: 30px;
    z-index: 0;
  }

  .coupleContainer {
    position: absolute;
    padding-bottom: 50px;
    width: 100%;
  }

  .gallerySeeMore {
    padding-left: 50px;
    margin-bottom: 100px;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
}

@media screen and (min-width: 1063px) and (max-width: 1199px) {
  .recentHome1 {
    height: 320px;
    width: 220px;
  }

  .recentHome2 {
    height: 326px;
    width: 220px;
  }

  .recentHome3 {
    height: 363px;
    width: 300px;
  }

  .articleName {
    color: #2b351a;
    font-size: 50px;
    margin-bottom: 0;
  }

  #articleKiriName {
    transform: rotate(-90deg);
    position: relative;
    left: -20%;
    top: 40px;
  }

  .articleHeight {
    position: relative;
    height: 275px;
  }

  .articleImage1 {
    position: absolute;
    width: 50%;
    left: 5%;
  }

  .articleImage2 {
    position: absolute;
    width: 20%;
    right: 10%;
    top: -40%;
  }

  .articleImage3 {
    position: absolute;
    width: 20%;
    left: 35%;
    top: -60%;
  }

  .articleImage4 {
    position: absolute;
    width: 20%;
    left: 5%;
    top: -130%;
  }

  .articleImage5 {
    position: absolute;
    width: 100%;
    left: 0;
    top: -100%;
  }

  .articleImage6 {
    position: absolute;
    width: 35%;
    left: 60%;
    top: 100%;
  }

  .articleImage7 {
    position: absolute;
    width: 50%;
    left: 5%;
    top: -50%;
  }

  .articleImage8 {
    position: absolute;
    width: 25%;
    left: 5%;
    top: 130%;
  }

  .articleImage9 {
    position: absolute;
    width: 40%;
    left: 45%;
    top: 60%;
  }

  .articleImage10 {
    position: absolute;
    width: 42%;
    left: 0%;
    top: 70%;
  }

  .articleImage11 {
    position: absolute;
    width: 20%;
    left: 60%;
    top: 0%;
  }

  .articleImage12 {
    position: absolute;
    width: 40%;
    left: 30%;
    top: 50%;
  }

  .articleImage13 {
    position: absolute;
    width: 35%;
    left: 5%;
    top: 50%;
  }

  .articleImage14 {
    position: absolute;
    width: 50%;
    left: 45%;
    top: -50%;
  }

  .articleImage15 {
    position: absolute;
    width: 70%;
    left: 15%;
    top: 0;
  }

  .articleImage16 {
    position: absolute;
    width: 40%;
    left: 5%;
    top: 80%;
  }

  .articleImage17 {
    position: absolute;
    width: 40%;
    left: 55%;
    top: 50%;
  }

  .articleImage18 {
    position: absolute;
    width: 40%;
    left: 12%;
    top: 40%;
  }

  .articleImage19 {
    position: absolute;
    width: 50%;
    left: 5%;
    top: 50%;
  }

  .articleImage20 {
    position: absolute;
    width: 35%;
    left: 57%;
    top: -50%;
  }
}

@media screen and (min-width: 992px) and (max-width: 1062px) {
  /*HOME*/

  .recentHome1 {
    height: 320px;
    width: 220px;
  }

  .recentHome2 {
    height: 326px;
    width: 220px;
  }

  .recentHome3 {
    height: 363px;
    width: 300px;
  }

  .articleName {
    color: #2b351a;
    font-size: 50px;
    margin-bottom: 0;
  }

  #articleKiriName {
    transform: rotate(-90deg);
    position: relative;
    left: -20%;
    top: 40px;
  }

  .articleHeight {
    position: relative;
    height: 275px;
  }

  .articleImage1 {
    position: absolute;
    width: 50%;
    left: 5%;
  }

  .articleImage2 {
    position: absolute;
    width: 20%;
    right: 10%;
    top: -40%;
  }

  .articleImage3 {
    position: absolute;
    width: 20%;
    left: 35%;
    top: -60%;
  }

  .articleImage4 {
    position: absolute;
    width: 20%;
    left: 5%;
    top: -130%;
  }

  .articleImage5 {
    position: absolute;
    width: 100%;
    left: 0;
    top: -100%;
  }

  .articleImage6 {
    position: absolute;
    width: 35%;
    left: 60%;
    top: 100%;
  }

  .articleImage7 {
    position: absolute;
    width: 50%;
    left: 5%;
    top: -50%;
  }

  .articleImage8 {
    position: absolute;
    width: 25%;
    left: 5%;
    top: 130%;
  }

  .articleImage9 {
    position: absolute;
    width: 40%;
    left: 45%;
    top: 60%;
  }

  .articleImage10 {
    position: absolute;
    width: 42%;
    left: 0%;
    top: 70%;
  }

  .articleImage11 {
    position: absolute;
    width: 20%;
    left: 60%;
    top: 0%;
  }

  .articleImage12 {
    position: absolute;
    width: 40%;
    left: 30%;
    top: 50%;
  }

  .articleImage13 {
    position: absolute;
    width: 35%;
    left: 5%;
    top: 50%;
  }

  .articleImage14 {
    position: absolute;
    width: 50%;
    left: 45%;
    top: -50%;
  }

  .articleImage15 {
    position: absolute;
    width: 70%;
    left: 15%;
    top: 0;
  }

  .articleImage16 {
    position: absolute;
    width: 40%;
    left: 5%;
    top: 80%;
  }

  .articleImage17 {
    position: absolute;
    width: 40%;
    left: 55%;
    top: 50%;
  }

  .articleImage18 {
    position: absolute;
    width: 40%;
    left: 12%;
    top: 40%;
  }

  .articleImage19 {
    position: absolute;
    width: 50%;
    left: 5%;
    top: 50%;
  }

  .articleImage20 {
    position: absolute;
    width: 35%;
    left: 57%;
    top: -50%;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1365px) {
  .articleName {
    color: #2b351a;
    font-size: 60px;
    margin-bottom: 0;
  }

  #articleKiriName {
    transform: rotate(-90deg);
    position: relative;
    left: -10%;
    top: 80px;
  }
  .aboutContainer {
    max-width: 700px;
  }

  .helloAbout {
    font-size: 18px;
  }

  .descriptionAbout {
    font-size: 12px;
    line-height: 2;
  }

  .coupleContainer {
    position: absolute;
    padding-bottom: 200px;
    width: 100%;
  }

  .coupleImage {
    width: 100%;
  }

  .navhover {
    position: absolute;
    top: 0;
    max-width: 600px;
    margin-left: 100px;
    z-index: 0;
  }

  .articleName {
    color: #2b351a;
    font-size: 70px;
    margin-bottom: 0;
  }

  .articleHeight {
    position: relative;
    height: 350px;
  }

  .articleImage1 {
    position: absolute;
    width: 50%;
    left: 5%;
  }

  .articleImage2 {
    position: absolute;
    width: 20%;
    right: 10%;
    top: -40%;
  }

  .articleImage3 {
    position: absolute;
    width: 20%;
    left: 35%;
    top: -60%;
  }

  .articleImage4 {
    position: absolute;
    width: 20%;
    left: 5%;
    top: -130%;
  }

  .articleImage5 {
    position: absolute;
    width: 100%;
    left: 0;
    top: -100%;
  }

  .articleImage6 {
    position: absolute;
    width: 35%;
    left: 60%;
    top: 100%;
  }

  .articleImage7 {
    position: absolute;
    width: 50%;
    left: 5%;
    top: -50%;
  }

  .articleImage8 {
    position: absolute;
    width: 25%;
    left: 5%;
    top: 130%;
  }

  .articleImage9 {
    position: absolute;
    width: 40%;
    left: 45%;
    top: 60%;
  }

  .articleImage10 {
    position: absolute;
    width: 42%;
    left: 0%;
    top: 70%;
  }

  .articleImage11 {
    position: absolute;
    width: 20%;
    left: 60%;
    top: 0%;
  }

  .articleImage12 {
    position: absolute;
    width: 40%;
    left: 30%;
    top: 50%;
  }

  .articleImage13 {
    position: absolute;
    width: 35%;
    left: 5%;
    top: 50%;
  }

  .articleImage14 {
    position: absolute;
    width: 50%;
    left: 45%;
    top: -50%;
  }

  .articleImage15 {
    position: absolute;
    width: 70%;
    left: 15%;
    top: 0;
  }

  .articleImage16 {
    position: absolute;
    width: 40%;
    left: 5%;
    top: 80%;
  }

  .articleImage17 {
    position: absolute;
    width: 40%;
    left: 55%;
    top: 50%;
  }

  .articleImage18 {
    position: absolute;
    width: 40%;
    left: 12%;
    top: 40%;
  }

  .articleImage19 {
    position: absolute;
    width: 50%;
    left: 5%;
    top: 50%;
  }

  .articleImage20 {
    position: absolute;
    width: 35%;
    left: 57%;
    top: -50%;
  }
}

@media screen and (min-width: 1366px) and (max-width: 1440px) {
  .aboutContainer {
    max-width: 800px;
  }

  .helloAbout {
    font-size: 20px;
  }

  .descriptionAbout {
    font-size: 14px;
    line-height: 2;
  }

  .coupleContainer {
    position: absolute;
    padding-bottom: 400px;
    width: 100%;
  }

  .coupleImage {
    width: 100%;
  }

  .navhover {
    position: absolute;
    top: 0;
    max-width: 900px;
    margin-left: 100px;
    z-index: 0;
  }

  .homeGalleryDescription {
    padding: 0 100px;
  }

  .articleName {
    color: #2b351a;
    font-size: 70px;
    margin-bottom: 0;
  }

  #articleKiriName {
    transform: rotate(-90deg);
    position: relative;
    left: -10%;
    top: 80px;
  }

  .articleHeight {
    position: relative;
    height: 400px;
  }

  .articleImage1 {
    position: absolute;
    width: 50%;
    left: 5%;
  }

  .articleImage2 {
    position: absolute;
    width: 20%;
    right: 10%;
    top: -40%;
  }

  .articleImage3 {
    position: absolute;
    width: 20%;
    left: 35%;
    top: -60%;
  }

  .articleImage4 {
    position: absolute;
    width: 20%;
    left: 5%;
    top: -130%;
  }

  .articleImage5 {
    position: absolute;
    width: 100%;
    left: 0;
    top: -100%;
  }

  .articleImage6 {
    position: absolute;
    width: 35%;
    left: 60%;
    top: 100%;
  }

  .articleImage7 {
    position: absolute;
    width: 50%;
    left: 5%;
    top: -50%;
  }

  .articleImage8 {
    position: absolute;
    width: 25%;
    left: 5%;
    top: 130%;
  }

  .articleImage9 {
    position: absolute;
    width: 40%;
    left: 45%;
    top: 60%;
  }

  .articleImage10 {
    position: absolute;
    width: 42%;
    left: 0%;
    top: 70%;
  }

  .articleImage11 {
    position: absolute;
    width: 20%;
    left: 60%;
    top: 0%;
  }

  .articleImage12 {
    position: absolute;
    width: 40%;
    left: 30%;
    top: 50%;
  }

  .articleImage13 {
    position: absolute;
    width: 35%;
    left: 5%;
    top: 50%;
  }

  .articleImage14 {
    position: absolute;
    width: 50%;
    left: 45%;
    top: -50%;
  }

  .articleImage15 {
    position: absolute;
    width: 70%;
    left: 15%;
    top: 0;
  }

  .articleImage16 {
    position: absolute;
    width: 40%;
    left: 5%;
    top: 80%;
  }

  .articleImage17 {
    position: absolute;
    width: 40%;
    left: 55%;
    top: 50%;
  }

  .articleImage18 {
    position: absolute;
    width: 40%;
    left: 12%;
    top: 40%;
  }

  .articleImage19 {
    position: absolute;
    width: 50%;
    left: 5%;
    top: 50%;
  }

  .articleImage20 {
    position: absolute;
    width: 35%;
    left: 57%;
    top: -50%;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1660px) {
  .aboutContainer {
    max-width: 800px;
  }

  .helloAbout {
    font-size: 22px;
  }

  .descriptionAbout {
    font-size: 16px;
    line-height: 2;
  }

  .coupleContainer {
    position: absolute;
    padding-bottom: 400px;
    width: 100%;
  }

  .coupleImage {
    width: 100%;
  }

  .navhover {
    position: absolute;
    top: 0;
    max-width: 900px;
    margin-left: 100px;
    z-index: 0;
  }

  .homeGalleryDescription {
    padding: 0 75px;
  }

  .articleName {
    color: #2b351a;
    font-size: 75px;
    margin-bottom: 0;
  }

  #articleKiriName {
    transform: rotate(-90deg);
    position: relative;
    left: -10%;
    top: 80px;
  }

  .articleHeight {
    position: relative;
    height: 450px;
  }

  .articleImage1 {
    position: absolute;
    width: 50%;
    left: 5%;
  }

  .articleImage2 {
    position: absolute;
    width: 20%;
    right: 10%;
    top: -40%;
  }

  .articleImage3 {
    position: absolute;
    width: 20%;
    left: 35%;
    top: -60%;
  }

  .articleImage4 {
    position: absolute;
    width: 20%;
    left: 5%;
    top: -130%;
  }

  .articleImage5 {
    position: absolute;
    width: 100%;
    left: 0;
    top: -100%;
  }

  .articleImage6 {
    position: absolute;
    width: 35%;
    left: 60%;
    top: 100%;
  }

  .articleImage7 {
    position: absolute;
    width: 50%;
    left: 5%;
    top: -50%;
  }

  .articleImage8 {
    position: absolute;
    width: 25%;
    left: 5%;
    top: 130%;
  }

  .articleImage9 {
    position: absolute;
    width: 40%;
    left: 45%;
    top: 60%;
  }

  .articleImage10 {
    position: absolute;
    width: 42%;
    left: 0%;
    top: 70%;
  }

  .articleImage11 {
    position: absolute;
    width: 20%;
    left: 60%;
    top: 0%;
  }

  .articleImage12 {
    position: absolute;
    width: 40%;
    left: 30%;
    top: 50%;
  }

  .articleImage13 {
    position: absolute;
    width: 35%;
    left: 5%;
    top: 50%;
  }

  .articleImage14 {
    position: absolute;
    width: 50%;
    left: 45%;
    top: -50%;
  }

  .articleImage15 {
    position: absolute;
    width: 70%;
    left: 15%;
    top: 0;
  }

  .articleImage16 {
    position: absolute;
    width: 40%;
    left: 5%;
    top: 80%;
  }

  .articleImage17 {
    position: absolute;
    width: 40%;
    left: 55%;
    top: 50%;
  }

  .articleImage18 {
    position: absolute;
    width: 40%;
    left: 12%;
    top: 40%;
  }

  .articleImage19 {
    position: absolute;
    width: 50%;
    left: 5%;
    top: 50%;
  }

  .articleImage20 {
    position: absolute;
    width: 35%;
    left: 57%;
    top: -50%;
  }
}

@media screen and (min-width: 1661px) and (max-width: 1920px) {
  .aboutContainer {
    max-width: 800px;
  }

  .helloAbout {
    font-size: 30px;
  }

  .descriptionAbout {
    font-size: 18px;
    line-height: 2;
  }

  .coupleContainer {
    position: absolute;
    padding-bottom: 400px;
    width: 100%;
  }

  .coupleImage {
    width: 100%;
  }

  .navhover {
    position: absolute;
    top: 0;
    max-width: 900px;
    margin-left: 100px;
    z-index: 0;
  }

  #homeGalleryKiri {
    height: 100vh;
    padding: 50px;
  }

  #homeGalleryKanan {
    height: 100vh;
  }

  .homeGalleryDescription {
    padding-top: 80px;
    padding-left: 80px;
    padding-right: 80px;
  }

  .articleName {
    color: #2b351a;
    font-size: 80px;
    margin-bottom: 0;
  }

  #articleKiriName {
    transform: rotate(-90deg);
    position: relative;
    left: -10%;
    top: 80px;
  }

  .articleHeight {
    position: relative;
    height: 530px;
  }

  .articleImage1 {
    position: absolute;
    width: 50%;
    left: 5%;
  }

  .articleImage2 {
    position: absolute;
    width: 20%;
    right: 10%;
    top: -40%;
  }

  .articleImage3 {
    position: absolute;
    width: 20%;
    left: 35%;
    top: -60%;
  }

  .articleImage4 {
    position: absolute;
    width: 20%;
    left: 5%;
    top: -130%;
  }

  .articleImage5 {
    position: absolute;
    width: 100%;
    left: 0;
    top: -100%;
  }

  .articleImage6 {
    position: absolute;
    width: 35%;
    left: 60%;
    top: 100%;
  }

  .articleImage7 {
    position: absolute;
    width: 50%;
    left: 5%;
    top: -50%;
  }

  .articleImage8 {
    position: absolute;
    width: 25%;
    left: 5%;
    top: 130%;
  }

  .articleImage9 {
    position: absolute;
    width: 40%;
    left: 45%;
    top: 60%;
  }

  .articleImage10 {
    position: absolute;
    width: 42%;
    left: 0%;
    top: 70%;
  }

  .articleImage11 {
    position: absolute;
    width: 20%;
    left: 60%;
    top: 0%;
  }

  .articleImage12 {
    position: absolute;
    width: 40%;
    left: 30%;
    top: 50%;
  }

  .articleImage13 {
    position: absolute;
    width: 35%;
    left: 5%;
    top: 50%;
  }

  .articleImage14 {
    position: absolute;
    width: 50%;
    left: 45%;
    top: -50%;
  }

  .articleImage15 {
    position: absolute;
    width: 70%;
    left: 15%;
    top: 0;
  }

  .articleImage16 {
    position: absolute;
    width: 40%;
    left: 5%;
    top: 80%;
  }

  .articleImage17 {
    position: absolute;
    width: 40%;
    left: 55%;
    top: 50%;
  }

  .articleImage18 {
    position: absolute;
    width: 40%;
    left: 12%;
    top: 40%;
  }

  .articleImage19 {
    position: absolute;
    width: 50%;
    left: 5%;
    top: 50%;
  }

  .articleImage20 {
    position: absolute;
    width: 35%;
    left: 57%;
    top: -50%;
  }
}

@media screen and (min-width: 1921px) {
  .articleName {
    color: #2b351a;
    font-size: 90px !important;
    margin-bottom: 0;
  }

  #articleKiriName {
    transform: rotate(-90deg);
    position: relative;
    left: -10%;
    top: 80px;
  }

  .articleHeight {
    position: relative;
    height: 600px;
  }

  .articleImage1 {
    position: absolute;
    width: 50%;
    left: 5%;
  }

  .articleImage2 {
    position: absolute;
    width: 20%;
    right: 10%;
    top: -40%;
  }

  .articleImage3 {
    position: absolute;
    width: 20%;
    left: 35%;
    top: -60%;
  }

  .articleImage4 {
    position: absolute;
    width: 20%;
    left: 5%;
    top: -130%;
  }

  .articleImage5 {
    position: absolute;
    width: 100%;
    left: 0;
    top: -100%;
  }

  .articleImage6 {
    position: absolute;
    width: 35%;
    left: 60%;
    top: 100%;
  }

  .articleImage7 {
    position: absolute;
    width: 50%;
    left: 5%;
    top: -50%;
  }

  .articleImage8 {
    position: absolute;
    width: 25%;
    left: 5%;
    top: 130%;
  }

  .articleImage9 {
    position: absolute;
    width: 40%;
    left: 45%;
    top: 60%;
  }

  .articleImage10 {
    position: absolute;
    width: 42%;
    left: 0%;
    top: 70%;
  }

  .articleImage11 {
    position: absolute;
    width: 20%;
    left: 60%;
    top: 0%;
  }

  .articleImage12 {
    position: absolute;
    width: 40%;
    left: 30%;
    top: 50%;
  }

  .articleImage13 {
    position: absolute;
    width: 35%;
    left: 5%;
    top: 50%;
  }

  .articleImage14 {
    position: absolute;
    width: 50%;
    left: 45%;
    top: -50%;
  }

  .articleImage15 {
    position: absolute;
    width: 70%;
    left: 15%;
    top: 0;
  }

  .articleImage16 {
    position: absolute;
    width: 40%;
    left: 5%;
    top: 80%;
  }

  .articleImage17 {
    position: absolute;
    width: 40%;
    left: 55%;
    top: 50%;
  }

  .articleImage18 {
    position: absolute;
    width: 40%;
    left: 12%;
    top: 40%;
  }

  .articleImage19 {
    position: absolute;
    width: 50%;
    left: 5%;
    top: 50%;
  }

  .articleImage20 {
    position: absolute;
    width: 35%;
    left: 57%;
    top: -50%;
  }
}

/* ---- grid ---- */
.img-height {
  max-height: 100%;
  max-width: 100%;
}
.grid {
  width: 100%;
}

/* clearfix */
.grid:after {
  content: "";
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-sizer,
.grid-item {
  width: 10%;
}

.grid-item {
  height: 300px;
  float: left;
  margin-bottom: 5%;
}

.grid-item-size-1 {
  width: 100%;
  height: 500px;
  margin-left: 3%;
}
.grid-item-size-2 {
  width: 48%;
  height: 600px;
  margin-left: 7%;
}

.grid-item-size-3 {
  width: 24%;
  height: 500px;
  margin-left: 2%;
}
.grid-item-size-4 {
  width: 30%;
  height: 400px;
  margin-left: 50%;
}

.grid-item-size-5 {
  width: 40%;
  height: 600px;
  margin-left: 10%;
}
.grid-item-size-6 {
  width: 22%;
  height: 600px;
  margin-left: 8%;
  margin-top: 25%;
}

.grid-item-size-7 {
  width: 25%;
  height: 500px;
  margin-left: 11%;
}
.grid-item-size-8 {
  width: 50%;
  height: 500px;
  margin-left: 25%;
}

.grid-item-size-9 {
  width: 40%;
  height: 500px;
  margin-left: 10%;
}
.grid-item-size-10 {
  width: 25%;
  height: 400px;
  margin-left: 16%;
}

.grid-item-size-11 {
  width: 30%;
  height: 500px;
  margin-left: 10%;
}
.grid-item-size-12 {
  width: 30%;
  height: 400px;
  margin-left: 3%;
}

.grid-item-size-13 {
  width: 70%;
  height: 600px;
  margin-left: 0%;
}
.grid-item-size-14 {
  width: 50%;
  height: 400px;
  margin-left: 40%;
}

.grid-item-size-15 {
  width: 40%;
  height: 600px;
  margin-left: 6%;
}
.grid-item-size-16 {
  width: 30%;
  height: 400px;
  margin-left: 10%;
}

.grid-item-size-17 {
  width: 30%;
  height: 600px;
  margin-left: 40%;
}
.grid-item-size-18 {
  width: 40%;
  height: 400px;
  margin-left: 7%;
}

.grid-item-size-19 {
  width: 47%;
  height: 500px;
  margin-left: 27%;
}
.grid-item-size-20 {
  width: 30%;
  height: 600px;
  margin-left: 56%;
}

.grid-item-size-21 {
  width: 40%;
  height: 500px;
  margin-left: 15%;
}
.grid-item-size-22 {
  width: 20%;
  height: 400px;
  margin-left: 3%;
}

.grid-item-size-23 {
  width: 50%;
  height: 600px;
  margin-left: 3%;
}
.grid-item-size-24 {
  width: 30%;
  height: 400px;
  margin-left: 30%;
}

.grid-item-size-25 {
  width: 70%;
  height: 700px;
  margin-left: 10%;
}

.offscreen {
  position: absolute;
  left: -999em;
}

video {
  object-fit: cover;
}

.search-new {
  display: block;
  margin: 0 auto;
  border: 0;
  border-bottom: 2px solid #2b351a;
  padding: 5px 0;
  width: 85%;
  font-size: 50px;
  background: none;
  color: #2b351a;
  outline: none;
  text-align: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
}

.search-close {
  font-size: 40px;
  color: #2b351a;
  margin: 0 auto;
  text-align: right;
  padding: 5px 0;
  width: 85%;
  cursor: pointer;
}

.centerVertical {
  position: absolute;
  top: 45%;
  transform: translateY(-45%);
  width: 100%;
}

.logo-hero {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
}
.bg-light-brown {
  background-color: #e9e9df;
}

.vektor-section-2 {
  position: absolute;
  top: 34%;
  left: 70%;
  transform: translate(-50%, -50%);
}
.section-genuine .title {
  color: #844520;
  font-weight: 500;
}
.section-genuine .description {
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
}

.genuine-left-content {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.genuine-right-content {
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.genuine-title {
  color: #844520;
  font-weight: 500;
  font-size: 3rem;
  line-height: 1.2;
  text-align: left;
  margin-bottom: 30px;
}

.genuine-description {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  text-align: left;
  margin-bottom: 0;
}

.genuine-right-content .description-tagline {
  font-size: 18px;
  font-weight: 600;
  color: #844520;
  font-style: italic;
  margin-bottom: 0;
  text-align: left;
}

.img {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: block;
}

.genuine-main-image {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  width: 70%;
  aspect-ratio: 1 / 1; /* make it square */
  height: auto; /* let aspect ratio control height */
  overflow: hidden; /* crop overflow so image stays neat */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* keep image static, override parallax transform */
  transform: none !important;
  will-change: auto !important;
  /* initial look: lower saturation as per brief */
  /* filter: saturate(0.6) grayscale(0.2); */
  transition: filter 0.5s ease;
}

.genuine-parallax-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}

/* Caption style and hover animation */
.genuine-main-image .parallax-title h4 {
  color: #ffffff;
  opacity: 0.5; /* 50% before hover */
  transition: opacity 0.5s ease;
}

.genuine-main-image:hover {
  filter: none; /* restore normal saturation */
}

.genuine-main-image:hover .parallax-title h4 {
  opacity: 1; /* full after hover */
}

/* Tagline Section Styles */
.tagline-left-content {
  padding: 30px 40px 30px 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.tagline-text {
  font-size: 24px;
  font-weight: 600;
  color: #844520;
  font-style: italic;
  line-height: 1.4;
  margin: 0;
  text-align: left;
}

.tagline-right-content {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tagline-image {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  height: 350px;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* keep static and set initial desaturated look */
  transform: none !important;
  will-change: auto !important;
  overflow: hidden;
  filter: saturate(0.6) grayscale(0.2);
  transition: filter 0.5s ease;
}

.tagline-parallax-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}

/* Mobile responsive styles for genuine section */
@media (max-width: 768px) {
  .genuine-left-content {
    padding: 15px;
    order: 2;
  }

  .genuine-right-content {
    padding: 30px 20px;
    text-align: center;
    order: 1;
  }

  .genuine-title {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 20px;
  }

  .genuine-description {
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
  }

  .genuine-right-content .description-tagline {
    font-size: 16px;
    text-align: center;
  }

  .genuine-main-image {
    height: 350px;
    margin-top: 20px;
  }

  /* Tagline section mobile styles */
  .tagline-left-content {
    padding: 20px 15px;
    text-align: center;
    order: 1;
  }

  .tagline-text {
    font-size: 20px;
    text-align: center;
  }

  .tagline-right-content {
    padding: 15px;
    order: 2;
  }

  .tagline-image {
    height: 280px;
    margin-top: 15px;
  }
}
.title-center-header {
  margin: 0 20% 0 20%;
  font-size: 5vw;
  text-align: center;
}
.position-relative {
  position: relative;
  width: 100%;
}
.parallax-content .parallax-shadow {
  background: none;
}

.parallax-img-right .parallax-shadow {
  transform: translateY(-50%);
}
.parallax-content .parallax-shadow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

.parallax-shadow:hover::before {
  background-color: transparent;
}

.parallax-title h4 {
  color: white;
  transition: opacity 0.3s ease;
}

.parallax-shadow:hover .parallax-title h4 {
  opacity: 0.5;
}

.parallax-img-left,
.parallax-img-right {
  position: absolute;
}
.parallax-img-left .img,
.parallax-img-right .img {
  width: 100%;
}
.parallax-img-left .img,
.parallax-img-left {
  width: 493px;
  height: 395px;
}
.parallax-img-right .img,
.parallax-img-right {
  width: 635px;
  height: 342px;
}
.parallax-img-left .img,
.parallax-img-right .img {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.parallax-img-right {
  right: 0;
  top: 28vw;
}
.parallax-title h4 {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #ffffff;
  transition: color 0.3s ease;
}
.parallax {
  z-index: 1;
  position: relative;
  overflow: hidden;
}

/* Title opacity default/hover */
.genuine-parallax-link .parallax-title h4,
.tagline-parallax-link .parallax-title h4 {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.genuine-parallax-link:hover .parallax-title h4,
.tagline-parallax-link:hover .parallax-title h4 {
  opacity: 1;
}

.location-content {
  --transition-duration: 500ms;
  --transition-easing: ease-out;
  background-size: cover;
  background-position: center center;
  padding-bottom: 100%;
  position: relative;
  backdrop-filter: blur(2px);
  transition: transform var(--transition-duration) var(--transition-easing);
  overflow: hidden;
}
/* .location-content::before {
  content: "";
  background: rgba(255, 255, 255, 0.4);
  width: 60%;
  height: 100%;
  top: 0%;
  left: -125%;
  transform: skew(45deg);
  position: absolute;
  transition: left var(--transition-duration) var(--transition-easing);
} */
/* Shiny animation on hover */
/* .location-content:hover::before {
  left: 150%;
} */

/* .location-content:hover {
  transform: translateY(-25%); 
  background: rgba(255, 255, 255, 0.3); 
} */
.location-opacity {
  background: transparent;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
}

.location-opacity h6 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  transition: opacity 0.3s ease;
  opacity: 1; /* full opacity by default */
  font-size: 30px !important;
}

.location-content:hover .location-opacity h6 {
  opacity: 0.5; /* reduce text opacity on hover */
}

.blog-title {
  text-align: center;
  position: relative;
}
.blog-title img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.blog-title h4 {
  font-size: 24px;
  font-weight: 400;
  line-height: 45px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #2a361b;
}
/*--------------------
     Blog
-------------------*/
.blog-container-fix .container-fluid {
  padding: 0 5%; /* Adjust percentage as needed */
}

.blog-item {
  display: flex;
  flex-direction: column-reverse;
  height: 100%;
  width: 100%;
  position: relative;
}
.blog-item .blog__img {
  position: relative;
  overflow: hidden;
  margin-bottom: 25px;
  width: 100%;
  padding-bottom: 125%; /* 4:5 Aspect Ratio */
}
.blog-item .blog__img a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.blog-item .blog__img img {
  -webkit-transition: all 0.9s ease;
  -moz-transition: all 0.9s ease;
  -ms-transition: all 0.9s ease;
  -o-transition: all 0.9s ease;
  transition: all 0.9s ease;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-item:hover .blog__img img {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
  width: 100%;
}
.image-box {
  position: relative;
  width: 100%;
  padding-bottom: 125%; /* 4:5 Aspect Ratio */
  background-size: cover; /* Cover the entire area */
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden; /* Prevent image overflow */
  -webkit-transition: all 0.9s ease;
  -moz-transition: all 0.9s ease;
  -ms-transition: all 0.9s ease;
  -o-transition: all 0.9s ease;
  transition: all 0.9s ease;
}
.image-box:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
  width: 100%;
}
.blog__content {
  text-align: center;
  flex-grow: 1;
}
.blog__content .blog__title {
  margin-left: 20px;
  margin-right: 20px;
  min-height: 80px;
}
.blog__content .blog__title a {
  font-size: 26px;
  font-weight: 400;
  line-height: 35px;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #2a361b;
}
.blog__content .blog__date {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 14.52px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}
.blog-readmore {
  text-align: center;
}
.blog-readmore a {
  font-size: 18px;
  font-weight: 400;
  line-height: 35px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #2a361b;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blog-readmore i {
  color: #2a361b;
}
.blog-readmore a:hover {
  text-decoration: none;
}
.blog-readmore img {
  width: 32px;
}
.float-right {
  text-align: right;
}

.journalDetailFooter {
  position: relative;
  padding: 50px 0;
  border-top: 1px solid #e9e9df;
}

.section-footer {
  position: relative;
  z-index: 1;
}
.footer-desc {
  text-align: center;
}
.footer-desc h4 {
  font-size: 22px;
  font-weight: 700;
  line-height: 45px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #65574e;
}
.footer-desc p,
.footer-instagram p {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #65574e;
}
.footer-desc .footer-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer-desc .footer-btn a {
  width: 282px;
  height: 38px;
  border-radius: 8px;
  background-color: #29361a;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 14px;
  font-weight: 300;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}
.footer-desc .footer-btn a:hover {
  background-color: #29361a;
}
.footer-instagram {
  text-align: center;
  width: 100%;
}

#eapps-instagram-feed-1 {
  margin: 0 auto !important;
}
.footer-social {
  text-align: center;
}
.footer-social h4,
.instagram-feed {
  display: flex;
  justify-content: center;
}

.footer-instagram h4 {
  font-size: 22px;
  font-weight: 400;
  line-height: 45px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #65574e;
}
.footer-social .url li {
  height: 40px;
}
.footer-social .url {
  font-size: 20px;
  font-weight: 400;
  line-height: 35px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  list-style: none;
  padding: 0;
}
.footer-social .url a {
  color: #65574e;
  font-size: 22px;
}
.footer-social .url a:hover {
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}
.footer-social .social__icons {
  display: flex;
  justify-content: center;
}
.mrpr-0 {
  margin-right: 0;
  padding-right: 0;
}
.footer-bottom-content .copyright {
  font-family: "Inria Serif", serif;
  font-size: 11px;
  font-weight: 400;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #65574e;
}
.footer-bottom-content .copyright-text {
  font-size: 11px;
  font-weight: 400;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #65574e;
}

.differential-scroll-container {
  position: relative;
  overflow: hidden;
}
.differential-scroll-column {
  width: 50%;
  float: left;
}

/* PARALLAX PORTFOLIO */
.contents {
  position: relative;
  display: flex;
  /* border: 5px solid #212125; */
}
.left_content {
  width: 50%;
  padding: 0px 0px 0px 100px;
}
.left_content p {
  font-size: 16px;
  font-weight: 400;
  line-height: 38px;
  letter-spacing: 0.05em;
  text-align: right;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #29361a;
}
.sticky_wrap {
  position: sticky;
  display: inline-block;
  left: 100%;
  top: 50%;
  font-size: 20px;
}
.right_content {
  position: relative;
  width: 50%;
  margin: 2rem 2rem 2rem 8rem;
}
.text-rotate {
  position: absolute;
  display: inline-block;
  top: 35%;
  left: -5%;
  transform: rotate(-90deg);
  font-size: 28px;
  font-weight: 500;
  color: #29361a;
}

.portfolio-name {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.portfolio-name .name {
  font-size: 20px;
  font-weight: 600;
  line-height: 29.66px;
  letter-spacing: 0.05em;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #29361a;
}

.portfolio-name .date {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 14.4px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #29361a;
}

.portfolio-mobile h2 {
  font-size: 24px;
  font-weight: 600;
  line-height: 35.59px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #29361a;
}
.portfolio-mobile p {
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #29361a;
}
.portfolio-mobile .portfolio-name .name {
  font-size: 16px;
}
.portfolio-mobile .portfolio-name .date {
  font-size: 10px;
}

.img-hero-portfolio-detail {
  max-height: 700px;
  width: 100%;
  object-fit: cover;
}
.d-center {
  display: flex;
  align-items: center;
}
.portfolio-detail-content-name .name {
  font-size: 48px;
  font-weight: 400;
  line-height: 71.18px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #844520;
}
.portfolio-detail-content-name .location {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 21.6px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #29361a;
}
.portfolio-detail-content-name .date {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  line-height: 21.6px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #29361a;
}
.portfolio-detail-content-name .vektor {
  position: absolute;
  left: 14px;
  top: 215px;
}
.portfolio-detail-contact a {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.portfolio-detail-contact a:hover {
  text-decoration: none;
}
.portfolio-detail-contact .like {
  font-size: 16px;
  font-weight: 600;
  line-height: 23.73px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #65574e;
  margin: 0;
}
.portfolio-detail-contact .plan {
  font-size: 16px;
  font-weight: 400;
  line-height: 23.73px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #65574e;
}
.portfolio-detail-desc-top {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: justify;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #000000;
}
.also-check {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  line-height: 14.52px;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  border-bottom: 1px solid #29361a;
}
.also-check a {
  color: #29361a;
  font-weight: 400;
}
.also-check a h6 b {
  color: #844520;
  font-weight: 700 !important;
}
.portfolio-detail-mobile-title {
  text-align: center;
}
.portfolio-detail-mobile-title .location {
  font-size: 12px;
  font-weight: 600;
  line-height: 17.8px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #29361a;
}
.portfolio-detail-mobile-title .location {
  font-weight: 700;
}
.portfolio-detail-mobile-title .name {
  font-size: 30px;
  font-weight: 400;
  line-height: 44.49px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #844520;
}
.portfolio-detail-mobile-title .date {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 13.2px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #29361a;
}
.portfolio-detail-mobile-title .portfolio-detail-contact .plan,
.portfolio-detail-mobile-title .portfolio-detail-contact .like {
  font-size: 12px !important;
  color: #29361a;
  line-height: normal;
}

.also-like-title img {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.also-like-title h4 {
  font-size: 24px;
  font-weight: 400;
  line-height: 35.59px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #29361a;
}

.blog-first-title .vektor {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.blog-first-title h1 {
  font-size: 42px;
  font-weight: 400;
  line-height: 35.59px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #29361a;
}
.blog-first-img {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  padding-bottom: 554px;
}
.blog-first-content {
  padding-left: 50px;
}
.blog-first-content h4 {
  font-size: 28px;
  font-weight: 400;
  line-height: normal;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #29361a;
  padding-bottom: 40px;
}
.blog-first-content p {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -0.05em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #000000;
  padding-bottom: 40px;
}
.blog-first-readmore a {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -0.05em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #2a361b;
}

.blog-detail-center {
  width: 90%;
  margin: auto;
}
.blog-detail-center .title {
  font-size: 40px;
  font-weight: 400;
  line-height: 52px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #844520;
}
.blog-detail-center .location {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 21.6px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #000000;
}
.blog-detail-center .location b {
  font-weight: 700;
}
.blog-detail-center .date {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #000000;
}
.content-desc h6 {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 22.5px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #000000;
}
.content-desc p {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 22.5px;
  text-align: justify;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #000000;
}
.content-bottom p {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 22.5px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #000000;
}

.vektor-about {
  position: absolute;
  top: 18%;
  left: 46%;
  transform: translate(-50%, -50%);
}
.about-title h2 {
  font-size: 54px;
  font-weight: 400;
  line-height: 55px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #fff;
}
.about-content p {
  font-size: 28px;
  font-weight: 400;
  line-height: 38px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #fff;
}

.about-slider-image,
.about-slider-image-mobile {
  width: 100%;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
}

.about-slider-image-mobile .swiper-slide,
.about-slider-image .swiper-slide,
.about-slider-content-mobile-header .swiper-slide,
.about-slider-content-mobile-text .swiper-slide,
.about-slider-content .swiper-slide {
  background-size: cover;
  background-position: center;
}

.about-slider-content-mobile-text,
.about-slider-content-mobile-header,
.about-slider-content {
  height: 80%;
  width: 100%;
}

.about-slider-image,
.about-slider-image-mobile {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}

.about-slider-image-mobile .swiper-slide,
.about-slider-image .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}

.about-slider-image-mobile .swiper-slide-thumb-active,
.about-slider-image .swiper-slide-thumb-active {
  opacity: 1;
}

.about-slider-image-mobile .swiper-slide img,
.about-slider-content-mobile-text .swiper-slide img,
.about-slider-image .swiper-slide img,
.about-slider-content .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-slider-content-text .about-text-title h3 {
  font-size: 40px;
  font-weight: 400;
  line-height: 45px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #844520;
  padding-bottom: 50px;
}
.about-slider-content-text .about-text-description .one {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 27px;
  letter-spacing: -0.05em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #000000;
  padding-bottom: 50px;
}
.about-slider-content-text .about-text-description .two {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: -0.05em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #000000;
}
.about-instagram-link {
  text-align: right;
}
.about-instagram-link a {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.1em;
  text-align: right;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #000000;
}

.contact-title {
  text-align: center;
}
.contact-title h2 {
  font-size: 46px;
  font-weight: 400;
  line-height: 35px;
  letter-spacing: 2px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #ffffff;
}
.contact-info {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contact-info a {
  position: relative;
  font-size: 16px;
  font-weight: 400;
  line-height: 35px;
  letter-spacing: 2px;
  text-decoration: none;
  color: #ffffff;
  transition: color 0.3s ease;
  padding-bottom: 15px; /* space for the underline */
}

.contact-info a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 1px;
  background-color: #ffffff;
  transition: all 0.3s ease;
}

.contact-info:hover a {
  color: #cccccc;
}

.contact-info:hover a::after {
  background-color: #cccccc;
}

.contact-info .underline {
  display: none; /* Hide the old span underline */
}
.contact-form-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15rem 15rem 0 15rem;
}
.contact-form-text h4 {
  font-size: 28px;
  font-weight: 400;
  line-height: 35px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #000000;
}
.contact-form-text p {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #844520;
}
.contact-form-text .contact-wa {
  width: 282px;
  height: 38px;
  border-radius: 8px;
  background-color: #29361a;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 14px;
  font-weight: 300;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}
.contact-form-text .contact-wa:hover {
  background-color: #29361a;
}
.contact-form-text .contact-instagram {
  width: 282px;
  height: 38px;
  border-radius: 8px;
  background-color: #844520;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 14px;
  font-weight: 300;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}
.contact-form-text .contact-instagram:hover {
  background-color: #844520;
}
.contact-form-element {
  width: 100%;
}
.footer-text-contact h4 {
  font-family: IvyPresto Display;
  font-size: 28px;
  font-weight: 400;
  line-height: 40px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #ffffff;
}

/* modal menu */
#staticBackdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}
#staticBackdrop .modal-header-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#staticBackdrop .modal-content {
  background-color: #efefe8;
}
#staticBackdrop .close-menu {
  cursor: pointer;
  background-color: transparent;
  border: none;
}
#staticBackdrop .navbar-nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
#staticBackdrop .mobile-menu ul li a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
  color: #2a361b;
  font-size: 14px;
  font-weight: 400px;
  text-transform: uppercase;
}
#staticBackdrop .mobile-menu ul li {
  padding: 8px;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  width: 100%;
}
/* Navbar Submenu */
.submenu {
  list-style: none;
  background: #efefe8;
  position: absolute;
  top: 100%;
  left: 20%;
  display: none; /* Hide submenu by default */
  min-width: 150px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  overflow: hidden;
}
.list-submenu {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 10px;
}
.list-submenu li {
  margin-left: 0 !important;
  padding: 5px;
}
.submenu li a {
  padding: 10px 20px;
}
.has-submenu:hover .submenu {
  display: block; /* Show submenu on hover */
}
@media (max-width: 768px) {
  .mobile-submenu {
    position: static;
    display: block;
  }
  .has-submenu:hover .mobile-submenu {
    display: block !important;
  }
}

#homeSliderMobile .logo-hero {
  width: 300px;
}
.blog-home-mobile .swiper-slide {
  background-color: #e9e9df;
  width: 80%;
}

/* Home Banner Mobile */
.homeBanner .swiper {
  width: 100%;
  height: 100%;
}

.homeBanner .swiper-slide {
  background-position: center;
  background-size: cover;
}

.homeBanner .swiper-slide img {
  display: block;
  width: 100%;
}

.vektor-contact {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.section-location-category {
  padding-top: 250px;
}
.d-flex-stretch {
  display: flex;
  align-items: stretch;
}

/* Style for the main container */
.section-portfolio .main-container {
  display: flex;
  flex-direction: row;
  height: 100vh;
}

/* Style for the first row (independent scroll) */
.section-portfolio .scroll-row {
  width: 50%;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}
.section-portfolio .scroll-row::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Opera */
}

/* Content styling for the scrollable row */
.section-portfolio .scroll-row .content {
  padding: 20px;
  height: 200%; /* Example: Content taller than the row */
  box-sizing: border-box;
  position: relative;
  /* -webkit-animation: scroll-up 15s linear infinite;
  animation: scroll-up 15s linear infinite; */
}

/* Keyframes untuk animasi scroll */
@keyframes scroll-up {
  0% {
    transform: translateY(100%); /* Mulai dari bawah */
  }
  100% {
    transform: translateY(-100%); /* Bergerak ke atas */
  }
}

/* Style for the second row (main content) */
.section-portfolio .main-row {
  width: 50%;
  overflow-y: auto;
  padding: 30px;
  box-sizing: border-box;
}

.about-arrow-swiper {
  position: absolute !important;
  margin-top: 500px !important;
  color: #efefe8 !important; /* Change arrow color */
  background-color: #2a361b; /* Add background */
  width: 50px !important; /* Custom width */
  height: 50px !important; /* Custom height */
  border-radius: 50%; /* Make it circular */
}

.about-arrow-swiper.swiper-button-next {
  right: -9px; /* Adjust position */
}

.about-arrow-swiper.swiper-button-prev {
  left: -9px; /* Adjust position */
}

.about-arrow-swiper-mobile {
  position: absolute !important;
  color: #efefe8 !important; /* Change arrow color */
  background-color: #2a361b; /* Add background */
  width: 30px !important; /* Custom width */
  height: 30px !important; /* Custom height */
  border-radius: 50%;
}

.about-arrow-swiper::after,
.about-arrow-swiper-mobile::after {
  content: "" !important;
}

.sticky-wa {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1;
}

.section-also-like {
  z-index: 2;
  background-color: #fff;
  position: relative;
}

.also h6:hover,
.blog-readmore a:hover span,
.blog-first-readmore a:hover,
.blog__content .blog__title a:hover,
.footer-social .url a:hover,
.blog-readmore a:hover i {
  color: #844520;
}

.footer-desc .footer-btn a:hover {
  background-color: #844520;
}

#hero {
  position: relative;
  z-index: -2;
  top: 0;
}

/* Hero logo overlay styles */
.hero-logo-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}

.hero-logo {
  filter: brightness(0) invert(1);
}

article {
  z-index: 0;
}

.about-slider-image .swiper-slider img {
  cursor: pointer;
}

/* FAQ Page Specific Styles */
.faq-section {
  padding: 100px 0 80px 0;
  background: #fff;
}

.faq-main-title {
  font-family: "IvyPrestoDisplay", serif;
  font-size: 38px;
  font-weight: 400;
  color: #8b4513;
  margin-bottom: 10px;
  line-height: 0.5;
}

.faq-subtitle {
  font-family: "IvyPrestoDisplay", serif;
  font-size: 32px;
  font-weight: 400;
  color: #8b4513;
  margin-bottom: 20px;
  line-height: 1.2;
}

.faq-intro {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 16px;
  color: #666;
  padding-top: 30px;
  padding-bottom: 30px;
  /* margin-bottom: 60px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto; */
}

.faq-container {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.faq-nav {
  width: 280px;
  flex-shrink: 0;
}

.faq-nav .nav-sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 120px;
}

.faq-nav .nav-title {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
}

.faq-nav .nav-sidebar .nav-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.faq-nav .nav-sidebar .nav-list .nav-item {
  margin-bottom: 8px;
}

.faq-nav .nav-sidebar .nav-list .nav-item a {
  display: block;
  padding: 12px 0;
  color: #666;
  text-decoration: none;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  transition: color 0.3s ease;
}

.faq-nav .nav-sidebar .nav-list .nav-item a:hover,
.faq-nav .nav-sidebar .nav-list .nav-item.active a {
  color: #8b4513;
}

.faq-content {
  flex-grow: 1;
  max-width: calc(100% - 340px);
}

.faq-group {
  margin-bottom: 50px;
}

.faq-group-title {
  font-family: "Playfair Display", serif;
  font-size: 20px;
  font-weight: 400;
  color: #8b4513;
  margin-bottom: 30px;
  line-height: 1.3;
}

.accordion-item {
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 0;
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  padding: 0;
}

.accordion-body p {
  margin: 0;
  padding: 0 0 25px 0;
  font-family: "Hanken Grotesk", sans-serif;
  color: #666;
  line-height: 1.6;
  font-size: 14px;
}

.accordion-item.active .accordion-header .icon {
  transform: rotate(45deg);
}

.accordion-item.active .accordion-body {
  padding-bottom: 0;
}

@media (max-width: 768px) {
  .faq-container {
    flex-direction: column;
    gap: 30px;
  }

  .faq-nav {
    width: 100%;
  }

  .faq-nav .nav-sidebar {
    position: static;
  }

  .faq-content {
    max-width: 100%;
  }

  .faq-main-title {
    font-size: 36px;
  }

  .faq-subtitle {
    font-size: 24px;
  }
}