:root, [data-bs-theme=light] {
  /*--bs-emphasis-color: rgb(50,50,50);*/
  /*--bs-emphasis-color-rgb: 50,50,50;*/
  --bs-nav-link-font-weight: 400;
  --bs-nav-link-font-size: 1rem;
}

h1 {
  /*font-size: 4rem;*/
  font-weight: bold;
  letter-spacing: 1px;
}

h2, h3, h4, h5 {
  font-weight: bold;
  letter-spacing: 1px;
}

p, li {
  text-align: justify;
  hyphens: auto;
}

.preloader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background-color: var(--bs-light);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .4s ease;
}

.fade-out-animation {
  opacity: 0;
  visibility: hidden;
}

#carousel-1 .carousel-item::before {
  content: "";
  background-color: rgba(228,228,228,0.75);
  position: absolute;
  inset: 0;
}

.hero .info {
  position: absolute;
  margin-top: 92px;
  inset: 0;
  z-index: 2;
}

.heading-j1 {
  color: var(--bs-dark);
  /*font-family: 'Poppins';*/
  /*font-size: 3.5rem;*/
  /*letter-spacing: 0.1rem;*/
  /*font-weight: bold;*/
  /*line-height: 1;*/
  padding-bottom: 2rem;
  padding-top: 3rem;
}

.heading-j1 > span {
  font-family: 'Saira Stencil One';
  font-size: 3.5rem;
  /*line-height: 0.85;*/
  /*padding-top: 3rem;*/
  /*margin: 0;*/
}

@media (max-width: 575px) {
  .heading-j1 > span {
    font-size: 2.3rem;
  }
}

@media (max-width: 767px) {
  .heading-j1 {
    /*color: white;*/
    font-size: 1.75rem;
  }
}

.hero .info h1 {
  position: relative;
}

.hero .info h1:after {
  content: "";
  position: absolute;
  display: block;
  width: 50%;
  height: 4px;
  background: var(--bs-primary);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.para-j1 {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.25rem;
  /*color: rgba(255,255,255,0.8);*/
}

.hero .info .btn-get-started {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 30px;
  border-radius: 50px;
  transition: 0.5s;
  margin: 10px;
  color: var(--bs-dark);
  border: 3px solid var(--bs-primary);
}

.hero .info .btn-get-started:hover {
  color: var(--bs-light);
  background: var(--bs-primary);
}

.prev-icon-j1 {
  cursor: pointer;
}

.div-atas-j1 {
  /*height: 92px;*/
  /*background-color: var(--bs-dark);*/
}

.row-photo-j1, .section-artikel-j1 {
  max-width: 1200px;
  /*min-height: 100vh;*/
}

.col-photo-j1 {
  position: relative;
  top: 0px;
  left: 0px;
}

.div-photo-j1 {
  position: relative;
  aspect-ratio: 6/4;
  background-color: rgba(50,50,50,0.25);
}

.div-photo-j3 {
  position: relative;
  aspect-ratio: 4/3;
  /*background-color: rgba(50,50,50,0.25);*/
}

.div-photo-j1:before {
  position: absolute;
  content: "";
  inset: 0;
  background-color: rgba(0,0,0,.7);
  transition: all .4s ease .2s;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
}

.div-photo-j1:hover::before {
  opacity: 1;
  visibility: visible;
}

.div-photo-j1:hover .hover-area, .div-photo-j1:hover .icon-hover-area {
  opacity: 1;
  visibility: visible;
  transition: all .3s ease .1s;
}

.div-photo-j1 > img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: -1;
  transition: all 1.5s ease-in-out;
}

.div-photo-j3 > img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  /*opacity: 0;*/
  /*z-index: -1;*/
  /*transition: all 1.5s ease-in-out;*/
}

.div-photo-j1.loaded > img {
  opacity: 1 !important;
  z-index: 1 !important;
}

.heading-photo-j1 {
  position: absolute;
  bottom: 10px;
  left: 25px;
  z-index: 20;
  padding: 5px 10px;
  background-color: var(--bs-primary);
  color: rgba(255,255,255,0.8);
}

.hover-area {
  position: absolute;
  top: 50%;
  transform: translateY(-20%);
  z-index: 25;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease;
  font-size: 1.5rem;
  text-align: center;
}

.hover-area > a {
  text-decoration: none;
  color: rgba(255,255,255,0.8);
  z-index: 30;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.8);
  padding: 10px 20px;
  background-color: transparent;
  transition: all 0.3s ease-in-out;
  border-radius: 30px;
  font-size: 1rem;
}

.hover-area > a:hover {
  background-color: rgba(255,0,0,0.75);
  border: none;
}

.icon-hover-area {
  position: absolute;
  top: 50%;
  transform: translateY(-20%);
  z-index: 25;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease;
  font-size: 1.5rem;
  text-align: center;
}

.icon-hover-area > a {
  text-decoration: none;
  color: rgba(255,255,255,0.8);
  z-index: 30;
  cursor: pointer;
  padding: 5px 10px;
  background-color: transparent;
  transition: all 0.3s ease-in-out;
}

.icon-hover-area > a:hover {
  color: var(--bs-primary);
}

.icon-hover-area > a > svg {
  font-size: 2rem;
  transform: scale(1);
  transition: transform 0.3s ease-in-out;
}

.icon-hover-area > a:hover > svg {
  transform: scale(1.3);
}

.div-heading-gallery-j1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: var(--bs-dark);
}

.div-heading-gallery-j1 > h3 {
  font-weight: bold;
}

.div-heading-gallery-j1 > h3:after {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  background: var(--bs-primary);
}

.div-heading-gallery-j1 > h3, .div-heading-gallery-j1 > p {
  color: var(--bs-light);
  align-self: center;
  text-align: center;
  padding: 5px 5px;
}

.footer-j1 > div > h6, .footer-j1 > div > div > h6 {
  color: var(--bs-light);
  font-weight: bold;
  letter-spacing: 2px;
  text-decoration: none;
}

.footer-j1 > div > p {
  color: rgba(248,249,250,0.85);
  letter-spacing: normal;
}

.footer-j1 > div > div > a {
  color: rgba(248,249,250,0.85);
  cursor: pointer;
}

#get-started {
  padding-top: 95px;
}

.fit-cover {
  object-fit: cover;
}

#carousel-1 {
  height: 100vh;
  margin-top: -92px;
}

.div-header-j1 {
  position: relative;
  background-color: rgba(225,225,225,0.75);
}

.div-header-j1:before {
  position: absolute;
  content: "";
  inset: 0;
  background: url("../../assets/img/slide-3.webp") center / cover no-repeat;
  z-index: -1;
}

.div-header-j1 > div > h1 {
  position: relative;
  color: var(--bs-dark);
  /*font-family: 'Saira Stencil One';*/
  font-size: 3rem;
  font-weight: bold;
  letter-spacing: 0.25rem;
}

.div-header-j1 > div > h1:before {
  position: absolute;
  content: "";
  bottom: -10px;
  height: 4px;
  width: 100%;
  background-color: var(--bs-primary);
}

.nav-item {
  margin-left: 15px;
}

#main {
  max-width: 1200px;
  margin-inline: auto;
}

.div-img-svc-j1 {
  aspect-ratio: 1/1;
  padding: 20px;
}

.div-img-svc-j1 > img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.div-img-abt-j1 {
  aspect-ratio: 3/4;
}

.div-img-abt-j1 > img {
  object-fit: cover;
  object-position: top center;
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.footer-j1 > div > p {
  text-align: left;
}

.div-red-ul-j1 > h2, .div-red-ul-j1 > h5 {
  position: relative;
}

.div-red-ul-j1 > h2:before, .div-red-ul-j1 > h5:before {
  position: absolute;
  content: "";
  bottom: -5px;
  height: 4px;
  width: 100%;
  background-color: var(--bs-primary);
}

.navbar {
  z-index: 1000;
}

.row-logo-j1 > .col {
  display: flex;
  justify-content: center;
  /*max-width: 200px;*/
  /*margin: 15px;*/
}

.row-logo-j1 > .col > img {
  display: flex;
  object-fit: contain;
  max-width: 200px;
  max-height: 75px;
}

.profile-pic-j1 {
  aspect-ratio: 3/4;
}

.profile-pic-j1 img {
  object-fit: cover;
  object-position: top;
  width: 100%;
  height: 100%;
}