 body{
            overflow-x:hidden;
        }
.services-body {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
   border-radius: 10px;
   background:white;
   Color:white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
 
.service {
  flex-basis: calc(25% - 10px); /* Adjust width */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100px;
  border:none;
}


.service i {
  font-size: 24px;
  padding: 10px;
 background: var(--site-clr);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.service span {
  font-size: 9px;
  margin-top: 10px;
  color: #000fff;
}



#balance {
  visibility: visible; /* Initial state: visible */
}

/* Optional: Add some visual effects */
#balance[style*="hidden"] {
  text-indent: -9999px; /* Hide text while maintaining space */
}
 .total-outstanding {
            background: #f97316;
            padding: 15px;
            border-radius: 10px;
            
            position: relative;
        }
        .total-outstanding h2 {
            font-size: 12px;
            margin: 0;
            color:white;
        }
        .total-outstanding .amount {
            font-size: 18px;
            margin: 10px 0;
            color:#fff;
        }
        .total-outstanding .repay-btn {
            position: absolute;
            right: 15px;
            bottom:15px;
            background:#fff;
            color: var(--site-clr);
            border: none;
            font-size:11px;
            padding: 5px 5px;
            border-radius: 15px;
            cursor: pointer;
        }
        .total-outstanding .details {
            font-size: 12px;
            color: var(--site-clr);
        }
        .total-outstanding h2 i{
            color:#fff
        }
        .total-outstanding h2 i:nth-child(2){
            color:#fff;
        }
        .total-outstanding a{
            position:absolute;
            cursor: pointer;
            color:white;
            height:10px;
            font-size:6px;
             right: 15px;
             top: 15px;
          bottom:20px;
          
        }
        .services-body-3 {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
padding: 5px;
}

.service-3 {
flex-basis: calc(33.33% - 10px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100px;
color:rgba(245, 130, 0);
background:blue;
border-radius: 10px;
width:50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.service-3 a:hover{
    color:inherit;
}
.service-3 i{
    font-weight:bold;
}
.service-3 span{
    font-size:10px;
    color:white;
    padding:3px
}
.advert {
  text-align: center;
  margin: 0 auto;
}

.advert img {
  height: auto;
  width: auto;
  max-width: 100%;
  object-fit: cover;
  image-rendering: crisp-edges;
  image-resolution: 300dpi;
  border-radius: 10px;
}
.acc i{
  font-size: 16px;
  color: #fff;
}
.acc{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: rgba(0%, 70%, 100%);
  font-size: 11px;
  padding: 10px;
}
.slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  margin: 10px 0; /* Adjust this value to change the space above and below the slider */
  box-sizing: border-box;
  width: 100%;
  
  margin-bottom: 20px;
}

.slider .slide {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 85%; /* Adjust the width */
  height: 43px;
  background:  rgba(255, 165, 0, 0.1)
;
  transform-origin: center center;
  transform: scale(1);
  position: relative;
  display: flex;
  border-left: 5px solid #ff8000;
  justify-content: space-between;
  align-items: center;
  margin: 0 10px; 
  padding: 10px;
  padding-right: 0;
  border-radius: 8px;
  
}
.slider .slide b{
  font-size: 12px;
  font-weight: 500;
  color:rgba(245, 130, 0);
  display: block;
  line-height: 15px;
}
.slider .slide a{
  display: inline-block;
  margin-right: 0;
  width: auto;
}
.slider .slide button{
  padding: 10px;
  height: 40px;
  background:linear-gradient(to left,#ff8000,#0000ff);
  color: #fff;
  font-weight: 600;
  border: none;
  outline: none;
  border-radius: 5px;
  border-bottom: 2px solid rgba(30%, 0%, 0%);
  margin-left: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 90px;
}
.marquee-container {
  background-color: red;
  color: #fff;
  padding: 8px;
  border-radius: 15px;
  width: 100%; /* adjust width */
  overflow: hidden;
  position: relative;
  bottom:6px;
}

.marquee {
  display: flex;
  align-items: center;
  animation: marquee 20s linear infinite;
  position: relative;
}

.marquee i {
  margin-right: 10px;
  position: fixed;
  top:5px;
  left: 20px;
}

.marquee span {
  font-size: 12px;
  font-weight: 400;
  margin-left: 40px; /* adjust for icon width */
  white-space:nowrap;
  text-align:center;
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

