/* @media only screen and (max-width: 1920px) and (min-width: 1367px) { */
html,body,nav{
  /* overflow-x: hidden; */
  /* min-width: 400px; */
}
 .bck-img{
    width: 100%;
    height: max-content;
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    background-attachment: fixed;
    background-position: center top;
  }
  .thmb-img{
    z-index: 2;
    object-fit: cover; 
    position: absolute;
  }
  .thmb-img2{
    z-index: 2;
    object-fit: cover;
    position: absolute;
    height: 700px;
  }
  .crd-rav-2{
    z-index: 3;
    position: absolute;
    margin-top: 10vw !important;
    width: 40% !important;
    height: max-content;
    border-radius: 20px !important;
    margin-left: 6vw;
  }
  .col-peng{
    margin-left: 0rem;
  }
  .text-pengacara{
    z-index: 7;
    position: absolute;
    margin-top: -8rem !important;
    margin-left: 37rem;
    color: #fff;
    font-size: 2vw;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  .crd-rav{
    z-index: 3;
    position: absolute;
    width: 15rem;
    height: 15rem;
    margin-left: 1rem;
    border-radius: 0px!important;
    border:0!important
  }
  .peng-kam{
    width: 15rem;
    height: 15rem;
  }
  .slider1{
    position: relative;
    display: block !important;
    z-index: 10;
    width: calc(16rem * 2);
  }
  .slider1:before{
    content: "Pengacara Kami";
    position: absolute;
    top:-3rem;
    z-index: 10;
    font-size: 2rem;
    color: #fff;
    font-weight: bold;
    text-shadow: 1px 1px 5px #000; 
    -webkit-text-stroke: 0.5px rgba(0,0,0,0.5);
  }
  .slider1 .slick-prev:before{
    content: none !important;
  }
  .slider1 .slick-next:before{
    content: none !important;
  }
  .content-rav{
    background-color:#fff;
    max-width: 1200px;
    padding: 3rem 0;
  }
  .slider {
    position: absolute;
    z-index: 1;
  }
  .xitem{
    padding:10px;
  }
  .slick-slide{
    height: auto!important;
  }
  .slider .slick-prev:before{
    content: none !important;
  }
  .slider .slick-next:before{
  content: none !important;
  }

  .crd-area-praktek-lg{
    border-radius: 12px !important;
  }
  .crd-area-praktek-img-lg{
    width: 22rem;
    height: 24rem !important;
    border-radius: 12px;
    object-fit: cover;
  }
  .crd-area-praktek-icon{
    margin-top: 2rem;
    width: 5rem;
    height: 5rem;
  }
  .area-praktek-rav3{
    position: absolute;
    top: 0px;
    margin-top: -9.9rem;
    text-align: left;
    left: 70%;
    width: 100%;
    transform: translate(-50%, -0%);
  }
  .text-area-ravi{
    font-size: 1.2em;
    margin-top: -1em;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #fff;
  }
  .nama-pengacara2{
    position: absolute;
    z-index: 6;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: left;
    font-weight: 600;
    height: 80px;
    background-color: #837a7a;
    opacity: 0.7;
    margin-top: 13rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #fff !important;
  }
  .crd-ravPeng{
    z-index: 3;
    position: absolute;
    top: 0px;
    width: 18rem;
    height: 18rem;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0px !important;
  }
  .crd-pengacara-home-img{
    height: 18rem;
    object-fit: cover;
  }
  .crd-ravPeng2{
    z-index: 3;
    position: absolute;
    top: 0px;
    width: 18rem;
    height: 18rem;
    margin: auto;
    border-radius: 0px !important;
  }
  .img-berita-home{
    height: 18rem;
    object-fit: cover;
  }
  .img-berita-home-vid{
    background-color: #232323;
    height: 18rem !important;
    object-fit: contain;
  }
  .berita-teks{
    position: absolute;
    z-index: 6;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    height: 100px;
    background-color: #161515;
    opacity: 0.8;
    margin-top: 12rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #fff !important;
  }
  .txt-judul3-3{
    overflow: hidden;
    width: calc(100% - 8px);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    font-size: large;
  }
  .txt-isi3-3{
    margin-top: 0rem !important;
    top: 1.4rem;
    font-size: 0.9em;
    margin-left: 0.1em;
    position: absolute;
    text-decoration:none;
  }
  .txt-tgl3{
    margin-top: 17rem !important;
    font-size: 12px !important;
  }
  .img-pengacara{
    height: 18rem !important;
    object-fit: cover;
  }
  .nama-pengacara{
    position: absolute;
    z-index: 6;
    margin-left: auto;
    margin-right: auto;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: left;
    font-weight: 600;
    height: 80px;
    background-color: #837a7a;
    opacity: 0.7;
    padding: .5rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #fff !important;
  }

  /* admin sidebar */
  .admin-width{
    width: 1550px !important;
  }
  /* end admin sidebar */


  
  .crd-ravPeng-berita{
    z-index: 3;
    position: absolute;
    top: 0px;
    margin: 0;
    right: 0;
    left: 0;
    padding: 0;
    border-radius: 12px !important;
  }
  
  .btn-rav1{
    background-color: #ff0000 !important;
    color: #fff !important;
    width: 50%;
    height: min-content;
    text-align: center;
    font-size: 1vw !important;
  }
  .btn-rav1:hover{
    background-color: #9b0101 !important;
    color: #fff !important;
    width: 50%;
    text-decoration: none;
    height: min-content;
    text-align: center;
    font-size: 1vw !important;
  }
  .bck-white{
    background-color: #fff;
    height: max-content;
  }
  .rav-foot{
    z-index: 4;
  }
  

  .about-home{
    text-align: justify;
  }
  .btn-misi-lg{
    margin-top: 1.6rem;
  }
  .about-home-lg{
    width: 90%;
    margin-left: 5% !important;
  }

  .content-rav4{
    z-index: 4;
    margin-top: 43.8rem !important;
    height: max-content;
    width: 80%  ;
  }
  .red-text{
    color: #ff0000;
    font-size: 40px;
    font-weight: 400;
    /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
    font-family: "Lato", sans-serif;
    margin-top: 20px;
  }
  .red-text-berita-lg{
    color: #ff0000;
    font-size: 28px;
    font-weight: 400;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin-top: 20px;
  }
  .black-text{
    font-size: 18px;
  }

  .content-rav2{
    z-index: 5;
    background-color: #080808;
  }

  .img-foot-rav{
    width: 23rem !important;
    height: 5rem;
  }
  .footer-deskripsi{
    color: #fff; 
    text-indent: 1em;
    width: 90% !important;
    text-align: justify;
  }
  .text-foot-rav{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin-top: 0;
  }
  .content-rav3{
    z-index: 5;
    background-color: #c4c4c4;
    height: max-content;
    width: 100%;
    margin: 0px 0px 0px 0px;
  }

  .text-foot-rav2{
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #000;
    font-size: 18px;
  }
  .icon-foot-rav{
    width: 60px;
    height: 60px;
  }
  .icon-foot-rav-2{
    width: 3rem;
    height: 3rem;
    margin-left: 0rem;
  }
  .icon-foot-rav-3{
    margin-top: 3rem;
    width: 3rem;
    height: 3rem;
  }
  .footer-telp{
    margin-top: 3rem;
  }
  .rav-nav{
    background-color: #080808 !important;
    opacity: 0.8;
    z-index: 1050; /* lebih tinggi dari konten */
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
  }
  .nav-link{
    color: #fff;
    font-size: 20px;
    margin-left: 12px;
    font-family: Arial, Helvetica, sans-serif;
    height: max-content;
    white-space: nowrap;
  }
  .img-nav-rav{
    height: 5rem;
    opacity: 1 !important;
  }
  .chat-rav{
    z-index: -6;
    width: max-content;
    margin-left: 92%;
  }
  .wa{
    width: 7rem;
  }
  .nav-link:hover{
    color: #ff0000 ;
    text-decoration: none !important;
  }
  .about-rav{
    z-index: 6;
  }
  .img-about-rav{
    width: 50%;
    height: 50%;
  }
  
  .area-praktek-rav {
    position: absolute;
    top: 15%;
    font-size: 2vw;
    text-align: center !important;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #fff;
  }
  .area-praktek-rav2{
    position: absolute;
    top: 0;
    font-size: 0.9vw;
    text-align: left;
    left: 30%;
    margin-top: -70%;
    width: 100%;
    transform: translate(-50%, -50%);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #fff;
  }
  
  
  .text-layanan{
    position: absolute;
    z-index: 6;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 0px;
    margin-top: 6.5rem;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #ffffff!important;
    padding:1rem;
  }
  .text-layanan:hover{
    /* color: #9b0101 !important; */
    background: -webkit-linear-gradient(#a32222, #bd0a0a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .judul-berita{
    position: absolute;
    z-index: 6;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    height: 0px;
    right: 0;
    text-align: left;
    font-weight: 500;
    font-size: 1.6rem !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #fff !important;
  }
  .isi-berita{
    position: absolute;
    z-index: 6;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    height: 0px;
    text-align: left;
    font-size: 1rem !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #fff !important;
  }
  
  
  

  .berita-teks-lg-profile{
    position: absolute;
    z-index: 0;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    height: 180px;
    background-color: #161515;
    opacity: 0.5;
    border-radius: 12px;
    margin-top: -11.3rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #fff !important;
  }

  .txt-judul-lg{
    margin-top: 0;
    text-decoration:none;
  }
  .txt-isi-lg{
    margin-top: 2rem !important;
    text-decoration:none;
  }

  .txt-judul{
    margin-top: 45%;
    text-decoration:none;
  }
  .txt-isi{
    margin-top: 55% !important;
    text-decoration:none;
  }
  .txt-tgl{
    margin-top: 18rem;
  }
  .tgl-berita {
    position: absolute;
    z-index: 6;
    right: 10px;
    bottom: 10px; /* tambahkan ini agar posisinya di pojok kanan bawah */
    text-align: right;
    font-size: 0.9rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #fff !important;
  }

  .active{
    color: #ff0000 !important;
  }
  .active2{
    color: #dcbc0e !important;
  }
  .area-praktek-txt:hover{
    color: #ff0000 !important;
  }
  .link-berita{
    color: #fff !important;
    text-decoration: none !important;
  }
  .link-berita:hover{
    color: #ff0000 !important;
    text-decoration: none !important;
  }
  .crd-rav-eff:hover{
    box-shadow: 0px 8px 10px #78787a;
    transform:scale(1.1);
    transition: transform 330ms ease-in-out;
  }
  .crd-stf-rav-eff:hover{
    box-shadow: 0px 8px 10px #78787a;
    transform:scale(1.1);
    transition: transform 330ms ease-in-out;
  }
  .crd-layn-rav-eff:hover{
    box-shadow: 0px 14px 18px #78787a;
    transform:scale(1.03);
    transition: transform 330ms ease-in-out;
  }
  .slick-track{
  z-index: -10;
  }
  .slick-prev:before {
    color: red !important;
    font-size: 3rem!important;
  }

  .slick-next:before {
    color: red !important;
    font-size: 3rem!important;
  }
  .slick-next{
    right: -0.3rem!important;
  }
  .slick-prev{
    left: -2rem!important;
    z-index: 9;
  }
  .redII:hover{
    color: #d10000 !important;
    text-decoration: none !important;
  }
  
  .area-ket{
    text-indent: 1em;
  }
  #x_alert{position: fixed;top:0;left: 0;width: 96.5%;height: 100%;z-index: 9999999;background: rgba(0,0,0,.5);padding: 24px;} 
  .x_alert_box{width: fit-content;margin: auto;box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .8);border-radius: 5px;overflow: auto;max-height: 100%;} 
  .x_alert_header{padding: 8px;color: #fff;font-size: 1.5em;text-align: center;border-top-left-radius: 5px;border-top-right-radius: 5px;background: #546E7A;} 
  .x_alert_body{padding: 24px;background: #fff;} 
  .x_alert_footer{background: #CFD8DC;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;text-align: center;} 
  .x_btn{display: inline-block;min-width: 40%;margin: 6px 12px;padding: 8px;border-radius: 5px;color: #fff;background: #000;} 
  .x_color_success{background: #1B5E20;} 
  .x_color_warning{background: #FB8C00;} 
  .x_color_danger{background: #b71c1c;} 
  .x_color_cancel{background: #263238;}

  #nav2{
    display: none;
  }
  
  .single-item .slick-prev:before{
    content: none !important;
  }
  .single-item .slick-next:before{
    content: none !important;
  }
  .crd-href:hover{
    color: #fff !important;
    text-decoration: none !important;
  }
  
  

  .prak-2{
    display: none !important;
  }

  .img-about{
    width: 28rem; 
    height: 34rem;
    object-fit: cover
  }
  .layanan-judul{
    margin-top: 4rem; 
    margin-bottom: 5rem;
  }
  .layanan-judul-txt{
    /* margin-left: 1.2rem; */
    margin-left: 0rem;
  }
  .layanan-desk-txt{
    /* margin-left: 1.2rem; */
    margin-left: 0rem;
    text-align: justify;
    margin-top: -10px;
    font-size: 20px;
    font-family: Arial;
  }
  .judul-layanan{
    /* margin-left: 1.2rem; */
    margin-left: 0rem;
    text-align: justify;
    font-size: 26px;
    font-family: Arial; 
  }
  .keterangan-layanan{
    margin-left: 1.2rem;
    margin-left: 0rem;
    text-align: justify;
    margin-top: -10px;
    font-size: 20px;
    font-family: Arial;
    font-weight: bold;
  }
  .layanan-btn{
    display: none !important;
  }
  .load-layanan{
    display: block;
  }
  
  .profile-foto-anggota{
    width: 75%; 
    height: 650px;
    object-fit: cover;
    margin-left: 3.2rem;
  }
  .margin-peng{
    margin-left: 3.2rem;
  }
  .artikel-profile{
    display: block !important;
  }
  .artikel-profile2{
    display: none !important;
  }
  .txt-judul{
    margin-top: -4rem !important;
    position: absolute;
    top: -6rem;
    margin-left: 0.5em;
    text-decoration:none;
  }
  .txt-isi{
    margin-top: -3rem !important;
    top: -4.6rem;
    margin-left: 0.8em;
    position: absolute;
    text-decoration:none;
  }
  .txt-tgl{
    margin-top: -2% !important;
    font-size: 12px !important;
  }

  .txt-judul3{
    margin-top: 0rem !important;
    position: absolute;
    top: 6rem;
    margin-left: 0.5em;
    text-decoration:none;
  }

  .txt-isi3{
    margin-top: 0rem !important;
    top: 8rem;
    margin-left: 0.8em;
    position: absolute;
    text-decoration:none;
  }
  
  .bhome2{
    display: none !important;
  }
  .about-margin{
    margin-left: 1.2rem;
  }
  .foot1{
    margin-left:  0rem;
  }
  .foot-maps-rav{
    margin: 0px 0px 0px 0px;
  }
  .slider1-1{
    display: none !important;
  }
  .slider1{
    display: block !important;
  }
  .img-berita{
    width: 80%; 
    height: 350px;
    object-fit: cover
  }
  .isi-berita-berita{ 
    text-align: justify; 
    font-weight: 400 !important
  }
  .area-margin{
    width: 90%; 
    text-align: justify
  }
  .margin-berita-all{
    margin-top:18rem;
  }

  .staf-ahli-home{
    display: block;
  }
  .staf-ahli-home2{
    display: none;
  }

/* } */

.xwa_chat{
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 9999;
}
.x{
  color: #fff;
  padding: 0.3rem !important;
}
.x:hover{
  color: #e40606 !important;
  background-color: #d3d3d3;
}
.nav-link{
  color: #fff;
  font-size: 20px;
  margin-left: 12px;
  font-family: Arial, Helvetica, sans-serif;
  height: max-content;
}
.nav-link:hover{
  color: #ff0000 !important;
  text-decoration: none !important;
}
.xsplit{
  position: relative;
}
.xsplit>div{
  margin-left: 70px;
}
.xsplit>img{
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 8px;
}
.navbar-brand{
  max-width: 80%;
}
.navbar-dark .navbar-nav .nav-link{
  color: #fff !important;;
}
.navbar-dark .navbar-nav .nav-link:hover{
  color:red!important;
}
.navbar-dark .navbar-nav .nav-link.active{
  color:red!important;
}
.ravi-lg{
  display: block;
}
.ravi-sm{
  display: none !important;
}
/*=============================================================================================*/
@media only screen and (max-width: 800px) {
  .content-rav{
    width: 100% !important;
  }
  .staf-ahli-home,.tentan-raf{
    display: none;
  }
  
  .staf-ahli-home2{
    display: block;
  }
  .SliderStaf .slick-prev:before{
    color:red;
  }
  .SliderStaf .slick-next:before{
      color:red;
  }
  .crd-area-praktek2{
    width: 18rem !important;
    height: 20rem !important;
    margin-left: 2%;
    border-radius: 0px !important;
  }
  .b1{
      margin-top: 0rem;
  }
  .nama-pengacara{
      position: absolute;
      z-index: 6;
      margin-left: auto;
      margin-right: auto;
      left: 0;
      right: 0;
      text-align: left;
      font-size: 1em !important;
      font-weight: 600;
      height: 40px;
      background-color: #837a7a;
      opacity: 0.5;
      margin-top: 11.4rem !important;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      color: #fff !important;
  }
  .nama-pengacara-home-sm{
      position: absolute;
      z-index: 12;
      margin-left: auto;
      margin-right: auto;
      left: 0;
      right: 0;
      text-align: left;
      font-size: 1em !important;
      font-weight: 600;
      height: 40px;
      background-color: #837a7a;
      opacity: 0.5;
      margin-top: -2.4rem !important;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      color: #fff !important;
  }
  .crd-area-praktek-img-sm2{
    width: 18rem;
    height: 20rem !important; 
    border-radius: 0px;
    object-fit: cover;
  }
  .slider1{
    width: calc(100% - 16px);
    margin-left: 0px!important;
    position: absolute!important;
    bottom: 2rem;
  }
  .banner_bg{
    height: calc(100vw + 6rem) !important;
  }
  .ravi-lg{
    display: none !important;
  }
  .ravi-sm{
    display:block !important}
}