/* common */
body {
  font-family: "Kiwi Maru", "Arial", sans-serif;
  background-image: url(../assets/img/bg.png);
  background-repeat: inherit;
  background-position: center top;
}

.dotgothic16-regular {
  font-family: "DotGothic16", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.fw-smaller {
  font-size: smaller;
}
.page-section {
  padding-top: 6rem !important;
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}
@media (min-width: 992px) {
  .my-title {
    text-align: start !important;
  }
  .my-profile {
    justify-content: left !important;
  }
}
/* nav */
#nav {
  background: rgb(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}
.nav-icon {
  width: 56px;
  height: 40px;
}
.nav-link {
  position: relative;
}
.btn-social {
  height: 2rem;
  width: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
/* commission */
.line {
  position: absolute;
  border: 5px solid #afb2e7;
  height: 1100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: -1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  background-position: right center;
  background-size: 1px 100%;
  background-repeat: no-repeat;
}
.commission-text {
  color: #38419d;
}
.commission-item {
  height: auto;
}
@media (min-width: 992px) {
  .commission-item {
    height: 220px;
  }
}
.commission-icon {
  color: #38419d;
  width: 50px;
  height: 50px;
  top: 2%;
}
.step-box {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #38419d;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.rounded-box {
  border-radius: 10px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
  background-color: aliceblue;
}
.commission-table {
  --bs-table-bg: rgba(255, 255, 255, 0.5) !important;
}
.commission-table ul {
  list-style-type: none;
  padding-left: 0;
}
.commission-table ul li::before {
  content: "\2022";
  font-size: 1rem;
  margin-right: 0.5rem;
}

/* works */
.work-item {
  display: block;
  position: relative;
  overflow: hidden;
  max-width: 530px;
  margin: auto auto 1rem;
}
.work-item .caption {
  display: flex;
  height: 100%;
  width: 100%;
  background-color: rgba(30, 30, 30, 0.4);
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
}
.work-item .caption .caption-content {
  color: aliceblue;
  margin: auto 2rem 2rem;
}
@media (min-width: 992px) {
  #galleryYoutube iframe {
    height: 400px;
  }
}

/* contact */
.contact-item {
  position: relative;
  width: fit-content;
  z-index: 10;
}

.work-video {
  height: 200px;
}
@media (min-width: 992px) {
  .work-video {
    height: 400px;
  }
}

.contact-icon {
  color: #38419d;
  width: 50px;
  height: 50px;
  top: 5%;
}

/* marker */
.nav-link::after {
  content: "";
  position: absolute;
  left: 55%;
  transform: translateX(-50%);
  bottom: 2px;
  width: 100%;
  height: 0.5rem;
  background-image: url(../assets/img/marker_purple.png);
  filter: brightness(140%);
  background-size: 100% 100%;
  z-index: -1;
}

.contact-item-animation::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1rem;
  background-image: url(../assets/img/marker_purple.png);
  filter: brightness(140%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: drawLine 1s forwards;
  z-index: -1;
}

.heading-animation::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1rem;
  background-image: url(../assets/img/marker_blue.png);
  filter: brightness(110%);
  background-size: 100% 100%;
  animation: drawLine 1s forwards;
  z-index: -1;
}

/* animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes drawLine {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}