:root {
  --color-primary: #0093ad;
  --color-secondary: #1f2855;
}

:root{
  scroll-behavior: auto;
}

body {
  font-family: 'Poppins', sans-serif;
  /* font-family: 'Manrope', sans-serif; */
}

::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

.var-bg-primary {
  background-color: var(--color-primary);
}

.var-bg-secondary {
  background-color: var(--color-secondary);
}

.var-btn-outline-primary {
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.var-btn-outline-primary.active {
  color: #fff !important;
  background-color: var(--color-primary) !important;
}

.var-btn-outline-primary:focus {
  background-color: var(--color-primary) !important;
  color: #fff !important;
}

.var-btn-outline-primary:hover {
  background-color: var(--color-primary) !important;
  color: #fff !important;
}

.fw-400 {
  font-weight: 400;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700;
}

.fs-36 {
  font-size: 36px;
}

.fs-32 {
  font-size: 32px;
}

.fs-28 {
  font-size: 28px;
}

.fs-24 {
  font-size: 24px !important;
}

.fs-20 {
  font-size: 20px;
}

.fs-16 {
  font-size: 16px;
}

.fs-14 {
  font-size: 14px;
}

.fs-12 {
  font-size: 12px;
}

.lh-24 {
  line-height: 24px;
}

.mb-120px {
  margin-bottom: 120px;
}

.mb-40px {
  margin-bottom: 40px;
}

.mt-120px {
  margin-top: 120px;
}

.mx-1px {
  margin-left: 1px;
  margin-right: 2px;
}

.highlight {
  background-color: yellow;
  font-weight: bold;
}

.disabled-link {
  color: #999; 
  pointer-events: none; 
}

.pointer-not-allowed {
  cursor: not-allowed;
}

.pointer {
  cursor: pointer;
}

.animation-pop-down-navbar {
  animation: pop-down-navbar 0.5s;
}

@keyframes pop-down-navbar {
  from {
    height: 0px;
  }
  to {
    height: 96px;
  }
}

@media screen and (max-width: 500px) {
  @keyframes pop-down-navbar {
    from {
      height: 0px;
    }
    to {
      height: 65px;
    }
  }
}

@keyframes swipeLeft {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.swipe-left {
  animation: swipeLeft 0.5s ease-out;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-pointer:hover {
  scale: 0.9;
}

.relative-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.text-overflow-hidden {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.text-overflow-hidden p {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* .no-hover:hover {
  scale: 1 !important;
} */

#userNavbar.nav-item:hover {
  /* scale: 0.9; */
  scale: 1;
}

.bounce {
  position: relative;
  animation: bounceAnimation 2s infinite;
}

@keyframes bounceAnimation {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

.nav-item .active {
  border-bottom: solid 2px #fff;
}

.nav-link {
  /* letter-spacing: 1px; */
  letter-spacing: 0px;
}

.hero-video-v5 video {
  width: 100%;
}

.ascent-1 {
  height: 50px; margin-top: -20px; z-index: 100
}

.ascent-2 {
  height: 80px; margin-top: -50px;
}

@media screen and (max-width: 500px) {
  .ascent-1 {
    height: 25px; margin-top: -15px; z-index: 100
  }
  .ascent-2 {
    height: 40px;
  }
}
/* hero video  */

.hero-video {
  width: 100%;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.hero-video video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;      
  height: auto;     
  min-width: 100%;  
  min-height: 100%; 
  transform: translate(-50%, -50%);
  object-fit: cover; 
}

  /* hero v3 */
.hero-video-v3 video {
  filter: brightness(50%);
}

.hero-video-v4 {
  width: 100%;
  min-height: 90dvh;
  position: relative;
  overflow: hidden;
}

.hero-video-v4 video {
  top: 0 !important;
  transform: translate(-50%, 0) !important;
  height: auto;
  max-height: 90dvh !important;
  min-height: 90dvh !important;
  filter: brightness(50%);
}

.hero-video-v4 .min-vh-100 {
  height: auto;
  min-height: 90dvh !important;
  max-height: 90dvh !important;
}

.full-width {
  position: absolute;
  left: 0;
  width: auto;
  min-width: 100%;
}


.hero-video .overlay {
  position: absolute;
}

.overlay h1 {
  width: 100%;
  max-width: 680px;
  font-size: 36px;
}

@media screen and (max-width: 500px) {
  .overlay h1 {
    font-size: 28px;
  }
}

.btn-hero {
  cursor: pointer;
}

.btn-hero:hover {
  cursor: pointer;
  scale: 0.9;
}

/* end of v3  */

.hero-heading {
  width: 100%;
  min-height: 100vh;
}

.heading-content-wrapper {
  position: relative;
  background-color: #ECEFF1;
  /* padding-top: 64px; */
  padding-bottom: 40px;
  padding-left: 40px;
  padding-right: 40px;
  border-radius: 20px;
}

#item-lp-1 {
  height: 200px;
  position: absolute;
  top: -445px;
  right: -160px;
  z-index: 20;
  filter: drop-shadow(0 2px 0.25rem #0000006e);
}

#item-lp-2 {
  height: 200px;
  position: absolute;
  top: -400px;
  left: -160px;
  z-index: 20;
  filter: drop-shadow(0 2px 0.25rem #0000006e);
}

@media screen and (max-width: 1366px) {
  #item-lp-1 {
    height: 160px;
    position: absolute;
    top: -269px;
    right: -77px;
    z-index: 20;
  }
  #item-lp-2 {
    height: 160px;
    position: absolute;
    top: -250px;
    left: -77px;
    z-index: 20;
  }
}

@media screen and (max-width: 500px) {
  #item-lp-1 {
    display: none;
  }
  #item-lp-2 {
    display: none;
  }
}

.heading-content-wrapper #led-lamp {
  position: absolute;
  top: -200px;
  right: -60px;
  z-index: 20;
}

.heading-content-wrapper #atom {
  position: absolute;
  bottom: -60px;
  left: -90px;
  z-index: 20;
}

/* .heading-content-wrapper img {
  position: absolute;
  top: 15%;
  right: 20%;
} */

@media screen and (max-width: 1365px) {
  .heading-content-wrapper #led-lamp {
    /* top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(-224px); */
    top: -255px;
    right: -20px;
  }

  .heading-content-wrapper #atom {
    bottom: -155px;
    left: -20px;
  }
}

.hero-heading h1 {
  /* position: relative; */
  /* top: -150px; */
  display: inline;
  font-size: 5rem;
  font-weight: 700;
  background-color: #0377A3;
  color: #fff;
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-radius: 16px;
  /* add-on */
  /* margin-bottom: 124px !important; */
}

.hero-heading h2 {
  position: relative;
  /* margin-top: 16px; */
  font-size: 1.25rem;
  font-weight: 400;
  text-wrap: balance;
  width: 100%;
  max-width: 880px;
  padding: 16px;
  /* border-radius: 12px; */
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  z-index: 10;
}

@media screen and (max-width: 500px) {
  .hero-heading {
    padding: 16px;
  }
  .heading-content-wrapper {
    padding: 16px;
    padding-top: 32px;
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 14px;
  }
  .hero-heading h1 {
    font-size: 2.5rem;
  }
  .hero-heading h2 {
    font-size: 1rem;
  }
}

.title-landing h1 {
  display: inline;
  font-weight: 600;
  font-size: 36px;
  background-color: #0377A3;
  color: #fff;
  padding: 12px;
  border-radius: 12px;
}

@media screen and (max-width: 500px) {
  .title-landing h1 {
    font-size: 24px;
  }
}

.card-idea-animation {
  transition: transform 0.3s;
}

.card-idea-animation:hover {
  transform: rotate(2.5deg);
}

/* Detail Idea  */
/* .abstraction {
  height: 168px;
  overflow: hidden;
  text-overflow: ellipsis;
} */
.abstraction {
  /* height: 168px; */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 5; /* Number of lines to show */
}

/* Fallback for non-WebKit browsers */
@supports not (-webkit-line-clamp: 5) {
  .abstraction {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.detail .tumbnail img {
  width: 260px;
  height: 260px;
  object-fit: cover;
}

.detail .tumbnail-desktop img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.dashed {
  border-top: 1px dashed;
}

/* .card p {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
} */

.two-rows-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2; /* Number of lines to show */
}

/* Fallback for non-WebKit browsers */
@supports not (-webkit-line-clamp: 2) {
  .two-rows-text {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.three-rows-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3; /* Number of lines to show */
}

/* Fallback for non-WebKit browsers */
@supports not (-webkit-line-clamp: 3) {
  .three-rows-text {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.attachment-tumbnail {
  min-width: 150px;
  width: 100%;
  height: 150px;
  overflow: hidden;
}

.attachment-image {
  height: 150px;
  width: 100%;
  object-fit: cover;
}

.attachment-tumbnail a {
  display: none;
}

.attachment-tumbnail:hover {
  background-color: #00000080;
}

.attachment-tumbnail:hover img {
  filter: brightness(0.5);
}

.attachment-tumbnail:hover a {
  display: block;
  cursor: pointer;
}

.navbar {
  height: 96px;
}

.navbar-brand img {
  height: 60px
}

@media screen and (max-width: 500px) {
  .navbar {
    height: 65px;
  }

  .navbar-brand img {
    height: 36px
  }
}

.toggle svg {
  cursor: pointer;
} 

.toggle svg:hover {
  scale: 0.9;
  transition: scale 0.25s ease;
} 

.transition-height {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.transition-height-full {
  max-height: 100%;
  transition: max-height 0.5s ease;
}

.filter-invert {
  filter: invert(100%);
}

ul {
  list-style-type: none;
  padding: 0;
  display: block;
}

.comment li {
  padding: 10px 0px 0px 40px;
}

.comment li img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  margin-left: -40px;
}

.comment .comment-container {
  margin-left: 28px;
  background-color: #f1eded;
}

.comment-container .diamond {
  width: 10px;
  height: 10px;
  rotate: 45deg;
  margin-left: -20px;
  margin-top: 0px;
  background-color: #f1eded;
}

.comment-container .comment-content {
  margin-top: -16px;
}

.reply {
  margin-left: 28px;
}

.profil {
  width: 40px;
  height: 40px;
  object-fit: cover;
}

.input_comment{
  width: 100%;
  margin-left: 28px;
}