.jumbotron{
  background-color: #123849;
  height: 230px;
  width: 100%;
  /* border-radius: 2px; */
  /* margin-top: 15px; */
  overflow: hidden;
}

.child-jumbotron{
  width: 100%;
  height: 100%;
  background-color: black;
  background-image: url('../img/jumbotron-2.jpg');
  background-size: cover;
  background-position: center;
  transition: ease .3s;
}

.jumbotron:hover .child-jumbotron,
.jumbotron:focus .child-jumbotron {
  transform: scale(1.1);
}

.text-jumbotron{
  background-image: linear-gradient(90deg, var(--mainColor), rgba(0, 0, 0, 0));
  width: 100%;
  height: 100%;
  position: relative;
  bottom: 230px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 20px;
  color: white;
}

.text-jumbotron h4{
  font-size: 15px;
  text-transform: uppercase;
}

.text-jumbotron h1{
  font-size: 30px;
  text-transform: uppercase;
}

.text-jumbotron p{
  font-size: 12px;
}

.btn-service{
  border: none;
  background-image: linear-gradient(90deg, #287993, #31c3bc);
  color: white;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 7px 15px;
  transition: ease 1s;
  text-align: center;
  text-decoration: none;
}

.breadcrumb-item a{
  text-decoration: none;
  color: var(--mainColor);
}

.case-page{
  background-color: var(--mainColor);
  padding: 40px 0;
  margin:0 0 15px 0;
}

.service-page h2{
  width: 100%;
  text-align: center;
  font-weight: bold;
}

.service-menu{
  background-color: white;
  border: 1px #bababa solid;
  border-radius: 2px;
  transition: ease .3s;
}

.service-menu:hover{
  box-shadow: 0px 7px 15px #38383846;
}

.service-menu ul{
  margin-top: -15px;
}

.service-menu ul li{
  margin-left: -15px;
}

.service-gold{
  border-color: gold;
}

.diskon-silver{
  background-color: silver;
  padding: 5px 10px;
  border-radius: 20px;
  font-weight: bold;
}

.diskon-gold{
  background-color: gold;
  color: #86681c;
  padding: 5px 10px;
  border-radius: 20px;
  font-weight: bold;
}

.rp{
  font-size: 24px;
}

.nominal{
  font-size: 45px;
  letter-spacing: -4px;
  font-weight: bold;
}

.btn-silver{
  width: 100%;
  border-radius: 2px;
  background-color: silver;
}

.btn-gold{
  width: 100%;
  border-radius: 2px;
  background-color: gold;
}

.btn-gold:hover{
  background-color: rgb(201, 173, 12);
}

.btn-silver:hover{
  background-color: rgb(168, 165, 165);
}

.box-point{
  height: 100px;
}

.trust{
  background-color: var(--mainColor);
}

.trust .bi{
  font-size: 60px;
}

.advokat-swiper{
  height: 230px;
}

.advokat-swiper .swiper-slide{
  background-color: white;
  width: 100%;
  padding: 20px;
  height: 180px;
  border-radius: 2px;
}

.swiper-pagination-bullet{
  background-color: var(--mainColor);
}

.advokat-img{
  width: 100px;
  height: 100%;
  object-fit: cover;
  background-position: center;
  border-radius: 2px;
  margin-right: 20px;
  /* box-shadow: 5px 5px 10px #0000007c; */
  filter: drop-shadow(0 0 5px #0000007c);
}

.advokat-text-1 p:nth-child(1){
  font-size: 18px;
  margin: 0;
}

.advokat-text-1 p:nth-child(2){
  font-size: 12px;
  margin: 0;
  opacity: 50%;
}

.advokat-text-2 p:nth-child(1){
  font-size: 12px;
  margin: 0;
  opacity: 50%;
}

.advokat-text-2 p:nth-child(2){
  font-size: 14px;
  margin: 0;
}

.advokat-text-2 p:nth-child(2) span{
  opacity: 50%;
}

.advokat-text-2 .bi{
  color: gold;
}

.blog-swiper{
  height: 450px;
}

.blog-swiper .swiper-slide{
  background-color: white;
  width: 100%;
  padding: 20px;
  height: 400px;
  border-radius: 2px;
  text-decoration: none;
}

.blog-img{
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.blog-swiper .swiper-slide p{
  color: #191919;
}

.blog-swiper .swiper-slide p:hover{
  color: #191919;
}

.swiper-slide-blog-1 p:nth-child(1){
  font-size: 14px;
  margin: 10px 0 0 0;
}

.swiper-slide-blog-1 p:nth-child(2){
  font-size: 24px;
  line-height: 26px;
  margin: 5px 0 0 0;
  text-transform: capitalize;
}

.swiper-slide-blog-2 p:nth-child(1){
  color: var(--mainColor);
  font-size: 14px;
  margin: 0;
}

.swiper-slide-blog-2 p:nth-child(1) span{
  color: rgb(220, 192, 33);
}

.swiper-slide-blog:hover .swiper-slide-blog-1 p:nth-child(2){
  color: #297994;
}

.cut-title{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

@media (min-width: 992px) {

  .jumbotron{
    margin: 0;
    height: 550px;
  }

  .text-jumbotron{
    bottom: 550px;
    padding: 30px 40px;
  }

  .text-jumbotron h4{
    font-size: 30px;
  }

  .text-jumbotron h1{
    font-size: 70px;
  }

  .text-jumbotron p{
    font-size: 22px;
    width: 60%;
  }

  .case-page{
    padding: 40px 0;
    margin: 0 0 20px 0;
  }

  .service-page h2{
    width: 40%;
  }

  .box-point{
    height: 150px;
  }
  

}