/* page styles */
.ax-hidden {
    visibility: hidden;
    position: absolute;
  }
  
  /* carousel-desa styles */
  .carousel-desa {
    --carousel-desa-height: 70vh;
    --carousel-desa-width: 100%;
    --carousel-desa-id-height: auto;
    --carousel-desa-id-width: 11%;
    top: 0px;
    width: 100%;
    position: relative;
    overflow: hidden;
  }
  .carousel-desa::-webkit-scrollbar {
    display: none;
}
  .carousel-desa-container {
    align-items: center;
    display: flex;
    min-height: var(--carousel-desa-height);
    margin: 0 auto;
    max-width: var(--carousel-desa-width);
    position: relative;
    width: 100%;
  }
  
  .carousel-desa-id {
    height: var(--carousel-desa-id-height);
    opacity: 0!important;
    position: absolute;
    transform: translateX(-50%);
    transition: all 0.3s ease-in-out;
    width: var(--carousel-desa-id-width);
    z-index: 0;
  }
  
  .carousel-desa-id-1 {
    left: 12%;
    opacity: 0;
  }
  
  .carousel-desa-id-2,
  .carousel-desa-id-4 {
    height: calc(var(--carousel-desa-id-height) * 3);
    opacity: 0.2!important;
    width: calc(var(--carousel-desa-id-width) * 4.5);
    z-index: 1;
  }
  
  .carousel-desa-id-2 {
    left: 0%;
  }
  
  .carousel-desa-id-3 {
    height: calc(var(--carousel-desa-id-height) * 3);
    opacity: 1!important;
    left: 50%;
    width: calc(var(--carousel-desa-id-width) * 4.5);
    z-index: 2;
  }
  
  .carousel-desa-id-4 {
    left: 100%;
  }
  
  .carousel-desa-id-5 {
    left: 105%;
    opacity: 0.4;
  }
  
  .carousel-desa-controls {
    display: flex;
    justify-content: center;
    top: 10px;
    position: relative;
    z-index: 99999999;
    height: 80px;
  }
  
  /* carousel-desa button styles */
  .carousel-desa-control {  
    background-color: transparent;
    border-radius: 4px;
    color: #aaa;
    cursor: pointer;
    height: 22px;
    margin: 0 auto;
    position: relative;
    transform: scale(1.5);
    transition: transform 0.5s ease-out;
    width:8%;
    font-size: 40px;
    left:4.5%;
    top: -35px

  }
  
  .carousel-desa-control:hover {
    transform: scale(1.3);
  }
  
  /* previous button */
  .carousel-desa-control-previous::after,
  .carousel-desa-control-previous::before {
    box-sizing: border-box; 
    display: block;
    height: 8px;
    position: absolute;
    top: -15px
  }
  .carousel-desa-control-previous::before {
    border-radius: 2px;
    float: right;
    width: 2px;
    content: '❮';
  }
  .carousel-desa-control-previous::after {
    float: right;
    width: 0;
  }
  
  /* next button */
  .carousel-desa-control-next::after,
  .carousel-desa-control-next::before {
    box-sizing: border-box;
    display: block;
    height: 8px;
    position: absolute;
    top: -15px
  }
  .carousel-desa-control-next::before {
    float: left;
    width: 2px;
    content: '❯';

  }
  .carousel-desa-control-next::after {
   
    float: left;
    width: 0;
  }
  
  .descDesa{
    position: relative;
    top: -80px;
  }