html {
  scroll-padding-top: 100px; /* adjust this to your navbar height */
}

 
 #navbar1 .container-fluid{
    padding-left: 70px;
    padding-right: 70px;

   }
   #download-btn.navbar-brand{
      background-color: #1d2087;
      color: white;
      border-radius: 25px;
      padding: 6px clamp(0.625rem, 0.556rem + 0.37vw, 1rem);
      font-size: clamp(0.7rem, 0.663rem + 0.198vw, 0.9rem);
      margin: 0;
      text-decoration: underline;
    }

    .remitech img{
      height: clamp(3.125rem, 2.778rem + 1.852vw, 5rem)
    }

    .flag img{
      width: clamp(20px, 5vw, 32px);
      box-shadow: 0 1px 4px rgba(0,0,0,0.3); /* X Y Blur Color */
    }

    .flag.navbar-brand{
      margin: 0;
    }

   .bg-image {
    display: flex;  
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center;
    margin: 0;
    padding: 0;
    position: relative;
   }

   .beranda3 p{
    color: #1d2087; 
    font-size: clamp(0.75rem, 0.692rem + 0.309vw, 1.063rem);
    font-family: Indexfont-8;
   }

   .cetarsquare {
      background: white;
      border-radius: 5px;
      padding-top: 10px;
      padding-bottom: 10px;
      border: 1px solid black;
      width: clamp(8.75rem, 8.056rem + 3.704vw, 12.5rem);
      height: clamp(200px, 13vw, 290px);

    }
    .cetarimg img{
      width: clamp(60px, 5.3vw, 130px);
    }

    .cetarfont{
      font-size: clamp(0.688rem, 0.676rem + 0.062vw, 0.75rem);
      padding: 0 16px;
      font-family: Indexfont-8;
    }

    .cetarfont h5{
      font-size: clamp(1rem, 0.907rem + 0.494vw, 1.5rem);
      font-family: Indexfont-3;
    }


    .mitraimg img{
      width: clamp(6rem, 10vw, 15rem);
      object-fit: contain;
      height: 100px;
    }
    
    .border-success {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
}

   .w-45 {
      width: 45%;
    }

    .vector-footer img {
      width: 24px;
      height: 24px;
      margin-right: 12px;
      text-decoration: none;
    }

    .footer-app img{
      max-width: 130px;
    }
     .socmed-icon img {
      width: auto;
      height: 35px;
    }

    .bottom-footer {
      text-align: center;
      background-color: #1d2087;
      color: white;
     font-size: clamp(0.75rem, 0.711rem + 0.189vw, 0.938rem);
    }


h1, h2 {
  color: #1d2087;
}

body{
  font-size: 15px;
}

.beranda2 p{
  text-align: justify;
  font-family: Indexfont-8;
  font-size: clamp(0.813rem, 0.761rem + 0.252vw, 1.063rem);
}

.beranda2 .btn{
  color: #1d2087;
  font-family: Indexfont-8;
  text-decoration: underline;
  font-size: 12px;
}

.beranda2 .btn span::after{
  content: "Baca Selengkapnya"; 
}

.beranda2 .btn input:checked + span::after{
  content: "Sembunyikan";
}


#butuhbantuan {
      margin-left: 200px;
    }

.overflow-x-scroll {
  -webkit-overflow-scrolling: touch; /* smooth scrolling iOS */
  overflow-x: scroll !important;
}

@media (min-width: 1200px) {
  .w-xl-50 {
    width: 50% !important;
  }
}

@media (max-width: 1500px ) {
     #navbar1 .container-fluid{
    padding-left: 0px;
    padding-right: 0px;

   }
}

@media (max-width: 1000px){
  #butuhbantuan {
      margin-left: 0px;
    }

}


@media (min-width: 800px){
  .w-lg-80 {
    width: 83%;
  }

  #indexutara iframe, #indextengah iframe, #indexselatan iframe, #indextimur iframe, #indexluarpulau iframe,
  #EECutara iframe, #EECtengah iframe, #EECselatan iframe {
  height: 100%;
}

#lokasicollapse .nav-link:hover,
#tutorialcollapse .nav-link:hover {
  background-color: #1d2087;
  color: white;
  border-top: 5px solid black;
}

#lokasicabang .nav-link:hover{
  background-color: white;
  color: #1d2087;
}

.beranda2 .btn:hover{
  color: black;
  font-family: Indexfont-1;
  font-size: 16px
}

#section2 ul{
  font-family: Indexfont-1;
}

    #FAQ .nav{
      overflow-x: auto;
    }
}

@media (max-width: 800px){
    .beranda3 .w-75 {
    width: 100% !important;
  }

    #Hubungi .container-fluid {
      margin-left: 0px;
    }
  

  .w-45{
    width: 80% !important;
  }

#indexutara iframe, #indextengah iframe, #indexselatan iframe, #indextimur iframe, #indexluarpulau iframe,
#EECutara iframe, #EECtengah iframe, #EECselatan iframe {
  height: clamp(15.625rem, 6.696rem + 23.81vw, 28.125rem);
}

#lokasicollapse .nav-link:hover,
#tutorialcollapse .nav-link:hover {
  background-color: #E50013;
  color: white;
}

#lokasicabang .nav-link:hover{
  background-color: #E50013;
  color: white;
}

.beranda2 .btn:hover{
  color: #1d2087;
  font-family: Indexfont-8;
  text-decoration: underline;
  font-size: 12px;
}

 .beranda3 .border-bottom {
  border-bottom: 0px !important;
 }
}

@media (max-width: 500px){
  html {
  scroll-padding-top: 8.225rem ;
}

}


#store .carousel-container{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minimax(80px, 1fr);
  justify-items: stretch;
  transition: transform 0.1s linear;
  gap: clamp(0.938rem, 0.75rem + 0.938vw, 1.875rem);
  max-width: 100%;
}

#store .carousel{
  overflow: hidden;
  flex-grow: 1;
  scroll-behavior: smooth;
  padding: 30px;
  width: 100%;
  max-width: 100%;
}

#store .carousel-wrapper{
  display: flex;
  align-items: center;
  position: relative;
  width: auto;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

#store .scroll-btn {
  width: 100px;
  height: 100px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 2;

}

#store .scroll-btn.left:hover::before,
#store .scroll-btn.right:hover::before {
    opacity: 1;
}

#store .scroll-btn.left::before,
#store .scroll-btn.right::before {
  content: "";
  display: inline-block;
  width: clamp(0.938rem, 0.75rem + 0.938vw, 1.875rem);
  height: clamp(0.938rem, 0.75rem + 0.938vw, 1.875rem);
  border-top: 8px solid gray;
  border-right: 8px solid gray;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-135deg); /* left arrow */
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

#store .scroll-btn.right::before {
  transform: translate(-50%, -50%) rotate(45deg); /* right arrow */
}

.stores-vector {
  max-width: clamp(3.438rem, 2.375rem + 5.313vw, 8.75rem);
  max-height: 140px;
  height: auto;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 1;
}

@keyframes scroll-left {
  100% {
    transform: translateX(-300px);
  }
}

@keyframes scroll-right {
  100% {
    transform: translateX(300px);
  }
}

.stores-vector img{
  width: 100%;
  max-width: 80px;
  height: auto;
 object-fit: contain;
 aspect-ratio: 1/1;
}

.accordion-button:not(.collapsed){
  background-color: white;
}

.accordion-button:focus{
  box-shadow: none;
}

.accordion-button{
  color: #1d2087;
  margin-bottom: 10px;
  font-family: Indexfont-10;
  font-size: clamp(0.813rem, 0.774rem + 0.189vw, 1rem);
}

.accordion-item {
  border-bottom: 1px solid black;
  font-family: Indexfont-8 ;
  color: #2f2e2e;
  font-size: clamp(0.813rem, 0.761rem + 0.252vw, 1.063rem);
}

.bantuan img{
  width: clamp(3.125rem, 2.476rem + 3.145vw, 6.25rem);
  aspect-ratio: 1 1;
}

#navbar .nav-link{
   color: black;
   transition: background 0.3s;
   font-family: indexfont-8;
   font-size: clamp(0.813rem, 0.393rem + 0.61vw, 1.125rem);
   font-weight: bold;
   letter-spacing: .1em;
}

#navbar .nav-link.active{
  border-bottom: 3px solid #1d2087;
  color: #1d2087;
}

#navbar .nav-link:hover{
  border-bottom: 1px solid #1d2087;
}

video {
  width: 320px; 
  height: clamp(27.5rem, 24.713rem + 12.739vw, 40rem);
}

#lokasicabang .nav-link{
   background-color: #1d2087;
   color: white;
   border-radius: 25px;
   padding: 6px 16px;
   font-size: clamp(0.4rem, 5vw, 0.9rem);
   border: 2px solid white ;
   font-weight: bold;
   transition: background 0.3s;
}

#lokasicabang .nav-link.active{
  background-color: #E50013;

}


#lokasicollapse .nav-link,
#tutorialcollapse .nav-link {
  color: #333;
  padding: 10px 16px;
  transition: background 0.3s;
  font-family: Indexfont-1;
}

/* Active state */
#lokasicollapse .nav-link.active,
#tutorialcollapse .nav-link.active{
  background-color: #E50013;
  color: #fff;
  font-weight: bold;
  font-family: Indexfont-1;
}


#lokasicollapse .nav-link,   #lokasicollapse .nav-link:hover,  #lokasicollapse .nav-link.active,
#tutorialcollapse .nav-link, #tutorialcollapse .nav-link:hover, #tutorialcollapse .nav-link.active {
   padding-top: 20px !important;
  padding-bottom: 20px !important;
}

     .tab-pane h5{
      font-family: Verdana, sans-serif;
      line-height: 1.5;
      font-weight: bold;
       font-size: clamp(0.875rem, 0.849rem + 0.126vw, 1rem);
}

  .tab-pane small{
     font-family: Verdana, sans-serif;
     line-height: 1.5;
     font-size: 11px;
  }

#section2 h1 {
  font-family: Indexfont-10;
  font-size: clamp(3.125rem, 2.789rem + 1.79vw, 4.938rem);
  color: white ;
}

#section2 .container{
  --bs-gutter-x: 0 rem;
}

#faqcollapse .nav-link{
   color: black;
   font-size: clamp(0.813rem, 0.774rem + 0.189vw, 1rem);
   border: 2px solid white ;
   font-weight: bold;
   transition: background 0.3s;
   font-family: Indexfont-12;
   padding: 0px;
  margin-bottom: 10px;
}

#faqcollapse .nav-link.active{
  color: #1d2087ba;
  text-shadow: 0 0 0px
  
}

.footer {
  color: #1d2087;
  font-family: Indexfont-8 ;
  font-size: 14px;
}

#syarat li{
  font-weight: bold;
}

@font-face {
  font-family: 'Indexfont-1';
  src: url('elements/PlusJakartaSans-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Indexfont-2';
  src: url('elements/PlusJakartaSans-BoldItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'Indexfont-3';
  src: url('elements/PlusJakartaSans-ExtraBold.ttf') format('truetype');
}

@font-face {
  font-family: 'Indexfont-4';
  src: url('elements/PlusJakartaSans-ExtraBoldItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'Indexfont-5';
  src: url('elements/PlusJakartaSans-ExtraLight.ttf') format('truetype');
}

@font-face {
  font-family: 'Indexfont-6';
  src: url('elements/PlusJakartaSans-ExtraLightItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'Indexfont-7';
  src: url('elements/PlusJakartaSans-Italic.ttf') format('truetype');
}

@font-face {
  font-family: 'Indexfont-8';
  src: url('elements/PlusJakartaSans-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Indexfont-9';
  src: url('elements/PlusJakartaSans-LightItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'Indexfont-10';
  src: url('elements/PlusJakartaSans-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Indexfont-11';
  src: url('elements/PlusJakartaSans-MediumItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'Indexfont-12';
  src: url('elements/PlusJakartaSans-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Indexfont-13';
  src: url('elements/PlusJakartaSans-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: 'Indexfont-14';
  src: url('elements/PlusJakartaSans-SemiBoldItalic.ttf') format('truetype');
}


/* wrapper for positioning */
#indexlokasi .carousel-wrapper, #FAQ .carousel-wrapper {
  position: relative;
  overflow: hidden;
}

/* hide native scrollbar */
#indexlokasi .carousel, #FAQ .carousel{
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
#indexlokasi .carousel::-webkit-scrollbar, #FAQ .carousel::-webkit-scrollbar  {
  display: none;
}

/* scroll buttons */
#indexlokasi .scroll-btn{
  border: none;
  background: #1d2087;
  color: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 15px;
  cursor: pointer;
  font-family: Consolas, monospace;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

#indexlokasi .scroll-btn.left {
  left: -20px;
}
#indexlokasi .scroll-btn.right{
  right: -20px;
}

#FAQ .scroll-btn{
  border: none;
  background: #1d2087;
  color: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50px;
  cursor: pointer;
  font-family: Consolas, monospace;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;

}

#FAQ .scroll-btn.left {
  left: 5px;
}

 #FAQ .scroll-btn.right {
  right: 5px;
 }