@font-face {
  font-family: SmoochSans-Black;
  src: url(../fonts/smoochsans/ttf/SmoochSans-Black.ttf);
}
@font-face {
  font-family: SmoochSans-Bold;
  src: url(../fonts/smoochsans/ttf/SmoochSans-Bold.ttf);
}
@font-face {
  font-family: SmoochSans-ExtraBold;
  src: url(../fonts/smoochsans/ttf/SmoochSans-ExtraBold.ttf);
}
@font-face {
  font-family: SmoochSans-Extrabold;
  src: url(../fonts/smoochsans/ttf/SmoochSans-ExtraLight.ttf);
}
@font-face {
  font-family: SmoochSans-Light;
  src: url(../fonts/smoochsans/ttf/SmoochSans-Light.ttf);
}
@font-face {
  font-family: SmoochSans-Medium;
  src: url(../fonts/smoochsans/ttf/SmoochSans-Medium.ttf);
}
@font-face {
  font-family: SmoochSans-Reguler;
  src: url(../fonts/smoochsans/ttf/SmoochSans-Regular.ttf);
}
@font-face {
  font-family: SmoochSans-SemiBold;
  src: url(../fonts/smoochsans/ttf/SmoochSans-SemiBold.ttf);
}
@font-face {
  font-family: SmoochSans-Thin;
  src: url(../fonts/smoochsans/ttf/SmoochSans-Thin.ttf);
}
.SmoochSans-Black{
  font-family: SmoochSans-Black !important;
}
.SmoochSans-Bold{
  font-family: SmoochSans-Bold !important;
}
.SmoochSans-ExtraBold{
  font-family: SmoochSans-ExtraBold !important;
}
.SmoochSans-Light{
  font-family: SmoochSans-Light !important;
}
.SmoochSans-Medium{
  font-family: SmoochSans-Medium !important;
}
.SmoochSans-Reguler{
  font-family: SmoochSans-Reguler !important;
}
.SmoochSans-SemiBold{
  font-family: SmoochSans-SemiBold !important;
}
.SmoochSans-Thin{
  font-family: SmoochSans-Thin !important;
}


.vr-line-1-white{
    margin-top: 20px;
    margin-bottom: 20px;
    border: .5px solid rgba(255, 255, 255, 0.134);    
    width: 100%;
}
.vr-line-1-white-2{
    margin-top: 20px;
    margin-bottom: 20px;
    border: .5px solid white;    
    width: 100%;
}

@media ( min-width: 991px ) and ( max-width: 1085px) {
    .nav-link {
      max-width: 80px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
    }
  }
 
.form-control-custom{
  border: 2px solid rgb(171, 171, 171) !important;
  background-color: white !important;
}

.container-title-warranty{
  display: flex;
  justify-content: center;
}
.title-warranty{
  width: 50% !important;
}
  
.card-warranty-claim{
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 20px;
  border:  1px solid white;
  backdrop-filter: blur(200px) !important;
  -webkit-backdrop-filter: blur(200px) !important;
}

.fw-bold{
  font-weight: bold !important;
}
.fw-semibold{
  font-weight: 600 !important;
}

.text-end{
  text-align: end !important;
}

@media (max-width: 768px) {
  .text-sm-center{
    text-align: center !important;
  }
 
}

@media (min-width: 768px) {
    .text-md-start{
      text-align: start !important;
    }
   
}

.bg-dark-black{
  background-color: black !important;
}

.container-img-product{
  width: 500px;
  height: 300px;
}
.container-img-product img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.title-hiro{
  font-size: 80px !important;
  color: white;
  font-weight: bolder;
}

@media (max-width: 768px) {
  .title-hiro{
    font-size: 40px !important;
  }
}
.icon-technology-container{
  height: 150px !important;
}
.icon-technology-container img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;;
}
.fs-13px{
  font-size: 13px !important;
}

.container-img-rev{
  height: 100%;
  padding: 50px;
}
.parallelogram{
  object-fit: contain !important;
  transform: skew(-10deg);
  box-shadow: 12px 12px 0px #82170a;
}



/* transform translite Y */
.transformtransY-1{
  transition: all ease-in-out 0.3s;
}
.transformtransY-1:hover{
  transform: translateY(-0.5rem);
}



.btn-gradient{
  background-image: linear-gradient(to bottom left, #7c1700, #1c0201, #7d110e) !important;
  color:rgba(255, 255, 255, 0.678) !important;
}


.borderradius-full{
  border-radius: 100px !important;
}

.hr-line-primary-5px{
  height: 5px !important;
  background-color: #82170a !important;
}



.container-img-certificate{
  width:  250px !important;
  height: 200px !important;
}

.container-img-certificate img{
  width:  100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.gap-custom-1{
  gap: 10px !important;
}
.gap-custom-2{
  gap: 30px !important;
}
.gap-custom-3{
  gap: 50px !important;
}

.blog-hiro-img{
  width: 780px !important;
  height: 280px !important;
  background-color: #eaeaea;
}
.blog-hiro-img img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.page-item.active .page-link {
  background-color: red !important;
  border-color: red !important;
  color: white !important;
}
.page-item .page-link {
  color: #1c0201d6 !important;
}

/* 3 baris dan elipsis */
.news-description{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}


.img-hiro-detail-container{
  width: 100% !important;
  height: 500px !important;
}
.img-hiro-detail-container img{
  width: 100% !important;
  height: 500px !important;
  object-fit: cover !important;
  overflow: hidden !important;
}



.container-img-galleri{
  width: 100% !important;
  height: 500px !important;
}
.container-img-galleri img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  overflow: hidden !important;
}

.input-custom-disable{
  background-color: #f1f1f4 !important;
}

.card-img-new{
  width: 100% !important;
  height: 300px !important;
  background-color: #eaeaea !important;
}

.card-img-new img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  overflow: hidden !important;
}

.bg-dark-black-grandient-1{
  background-image: linear-gradient(to bottom left, #400c00,  #000000, #400c00) !important;
}
.bg-dark-black-grandient-2{
  background-image: linear-gradient(to bottom left, #1c0500, #1c0201, #1c0500) !important;
}
.bg-dark-black-grandient-3{
  background: #330101;
  background: linear-gradient(196deg, rgba(51, 1, 1, 1) 0%, rgba(0, 0, 0, 1) 100%);
}
.bg-dark-black-grandient-4{
  background: #330101;
  background: linear-gradient(36deg, rgba(51, 1, 1, 1) 0%, rgba(0, 0, 0, 1) 100%);
}


.bg-dark-opacity{
  background-color: rgba(0, 0, 0, 0.1);
}

.bg-light-opacity{
  background-color: rgba(255, 255, 255, 0.193) !important;
}

.warranty-card-result{
  width: 100% !important;
  background-color: #464646 !important;
}

/* costum css */
.warranty-section {
     background-size: cover;
    background-position: center;
    padding: 100px 0;
    color: white;
}

.text-dark-back{
  color: black !important;
}