
*{
    color: #0e1318;
    font-family: "Noto Sans Gujarati", sans-serif;
    max-width: 100vw;
    padding: 0;
    margin: 0;
}


p{
  text-align: justify;
  color: rgba(0, 0, 0, 0.8);
}

.text-red{
  color: #c31e39;
  letter-spacing: 1.5px;
}

.bg-second{
  background: #EFEBE0;
}

.wave-container::before {   
content: "";
width: 100%;
height: 87px;
position: absolute;
bottom: -0.3%;
left: 0;
background-size: auto;
background-repeat: repeat no-repeat;
background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 134' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 1C19.5523 3 32.2291 5 51.5 9C104.5 19 200 43 300 65C400 88 500 111 600 102C700 93 800 53 900 30C987.526 5 1085.36 -1 1150 0C1169.54 -1 1180.49 0 1200 1V134H1150C1100 134 1000 134 900 134C800 134 700 134 600 134C500 134 400 134 300 134C200 134 100 134 50 134H0V1.98128Z' fill='%23ffffff'/></svg>");
}


.hero{
  padding-top: 10vh;
  width: 40vw;
}

.hero h1{
  font-size: 54px;
}

.hero p{
  font-size: 16px;
}

#navbar{
  background-color: transparent;
  transition: background-color 0.3s ease;
}

#navbar.scrolled{
  background-color: rgb(139, 0, 0); 
  color: #970C10;
}


.nav-link{
color: #EFF4F0;
margin: 0px 16px; 
padding-left: 8px;
font-size: 14px;
font-weight: 500;
}

.nav-link:hover{
transform: scale(1.1);
color: white
}

.about-home::after{
content: "";
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
background: black;
opacity: 0.5;
}

.image-home-layer{
bottom:-10%;
right:-30%;
}

#about p{
font-size: 14px;
padding-left: 24px;
padding-right: 12px;
}

.my-7{
margin: 100px 0;
}

.my-8{
margin: 150px 0;
}

.py-6{
padding: 80px 0;
}


#pelatihan span, .pelatihan-list span {
font-size: 14px;
}

.button-red {
background:#970C10; 
color:white
}

.link-active{
background:#970C10; 
color:white;
border-radius: 6px;
}


.dropdown-item{
font-size: 14px;
color: #970C10
}

#navbar.scrolled .navbar-nav .link-active{
  color: #000000;
  background-color: rgb(255, 255, 255); 
}

.btn:hover{
background: #000000;
color: white;
}

.btn:hover i{
color: white
}

#client img{
width:150px;
}


#footer{
background: #262626;
}

#footer a, #footer i, #footer p{
color: white;
opacity: 0.5;
}


.admin #navbar{
    background-color: black;
  }
  

.admin .nav-link{
  color: #637381;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 12px;
  margin: 4px 0;
  }

  .admin .nav-link i{
    color: #637381;

  }

.sidebar-active{
    background-color: #ffeaec;
    border-radius: 8px;
    color: rgb(111, 11, 11) !important;
}

.admin i{
    font-size: 18px;
}

.admin p{
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

.font-breadcrumb{
  font-size: 14px;
}

.truncate {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Menampilkan maksimal 3 baris */
  -webkit-box-orient: vertical;  
}

.galeri-image{
  opacity: 1;
}

.galeri-deskripsi{
  z-index: 2;
  background: #970C10;
  color: white;
  height: 0;
  opacity: 0;
  transition: .5s ease;
}

.galeri:hover .galeri-image{
  opacity: 0.8;
}

.galeri:hover .galeri-deskripsi{
  height: 30%;
  opacity: 1;
}

.tentang-kami p{
  color:#637381;
  margin: 28px 0 48px;
}

.misi li {
  color: #637381;
  padding: 4px 0;
}

.visi p{
  color: #637381;
}

.grid-galeri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
}

.item {
  background-color: gray;
}

.item:nth-child(10n+1), .item:nth-child(10n+7) {
  grid-row: span 2;
  grid-column: span 2;
}

.item:nth-child(10n+2), .item:nth-child(10n+6) {
  margin-bottom: 0.2rem;
}

.item:nth-child(10n+3), .item:nth-child(10n+8) {
  margin-top: 0.2rem;
}


.kontak a{
   color: #c31e39;
    letter-spacing: 1.5px;
    font-size: 1.2rem;
    text-decoration:none;
    margin-top: 8px;
}

