/*airtime and data page css* of mainpage*/
body{
    display:flex;flex-direction: column;align-items: center;background-color: #e0e0e0;
  
}
#page{
  color: #00b34a;border-radius: 10px;display:flex; justify-content: center;
}
.mainPage{
  padding: 10px;border-radius: 20px;
}
.kpay{
box-shadow: 0 6px 12px rgba(0,0,0,0.2);position: fixed;left: 0; z-index: 1000;top: 0;gap: 5px;
   background:#1e293b; justify-content: center;border-bottom: 1px solid #ffffff; padding:10px;
   display: flex;flex-direction: column;align-items: center;
}
.kpay h3{
  text-align: center;color: #ffffff; font-family:monospace; font-size:20px;
}

#airtimePage
{gap:10px;display:flex;flex-direction: column;padding: 20px;border-radius: 10px;margin-top:18px;background-color: #ffffff;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

#dataPage{display:none;gap:10px;margin-top:20px;
}
.data_p button{
 padding: 12px;border: none;color: white;font-weight: bold;width:100%;border-radius: 8px;
  cursor:pointer; transition: 0.3s;
}
.send{
    width:100%;padding: 16px; background-color: #1e293b; color: white;border: none;
    border-radius: 12px;font-weight: 700;text-transform: uppercase;letter-spacing: 1px;cursor: pointer;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}

.send:active{
  transform:scale(0.97);
}

#DataCard{
  border-radius: 20px;padding: 30px; display:none;flex-direction: column;margin-top: 20px;
box-shadow: 0 6px 12px rgba(0,0,0,0.2);gap: 10px;background-color: white;
}

#masterInput {font-size:18px;text-align: center;border:none; box-shadow: 0 6px 10px rgba(0,0,0,0.2)
}

#masterInput::placeholder {
    color: #000000
}
input{
outline:none;padding:15px;border-radius: 10px;font-weight: 600;box-shadow: 0 6px 10px rgba(0,0,0,0.2);
border: none;
}

input::placeholder{
	font-size:14px;
}
select{
	margin-top:10px;padding:15px;outline: none;border-radius:10px;box-shadow: 0 6px 10px rgba(0,0,0,0.2);border: none;
}


.page-buttons{ 
  display:flex;margin-top: 20px;border-radius:50px;background-color:#1e293b;width: 100%;margin-bottom:5vh;
  
	}

	h1 { margin-bottom: 20px;color: #ffffff;text-align:center;
	}

 .page-buttons button { 
 	color: #ffffff; font-size: 16px; border-radius:50px;background: none;outline: none;
 	cursor: pointer;transition: 0.2s; width:100%; padding: 10px;border: none;
 }
 .page-buttons button.active{
  background: #10b981;
  color: #ffffff;
 }


.mtn{
	background:#ffcc00;
}

.tigo{
background:linear-gradient(90deg,#0033a0,#e60000);
	color:white;
}
.voda{
	background:#e60000;
	color:white;
}

#dataPackages{
		margin-top:10px;width: 100%;flex-direction:column;display:flex;
}
#AirtelTigoData{
	margin-top:10px;	display: none;width: 100%;flex-direction: column;
}
#vodaData{
  margin-top:10px;display: none;width:100%;flex-direction: column;
}
.net{
 display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;
}
.barge2{
top:15px;right: 15px;border-radius: 20px;font-size: 0.7rem;font-weight: bold;
color: #ffffff;text-transform: uppercase;display: flex;align-items: center;

}
.bgctigo{
display: none;background:linear-gradient(90deg,#0033a0,#e60000);padding:15px;
}
.bgcmtn{
background:#ffcc00;padding:30px;


}
.bgc-voda{
	display: none;background:#e60000;padding: 20px;
}
.tigoOffer{
display: flex;flex-direction: column;gap: 10px;color:#000000;padding:15px;background-color: #ffffff;
margin-top: 10px;border-radius: 10px;box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

.tigoOffer:hover{
  transform:translate(-5px);
  background:linear-gradient(90deg,#93b1f1,#fc8080);
}

.vodaOffer{
   display: flex;flex-direction: column;gap: 10px;color:#000000;padding:15px;margin-top: 10px;
   border-radius: 10px;box-shadow: 0 6px 12px rgba(0,0,0,0.2);background-color: #ffffff;
}
.vodaOffer:hover{
    transform:translate(-5px); background:#f96e6e;
}
.netwkOffer{
   display: flex;flex-direction: column;gap: 10px;color:#000000;padding:15px;margin-top: 10px;border-radius: 10px;box-shadow: 0 6px 12px rgba(0,0,0,0.2); background-color: #ffffff;
}
.netwkOffer:hover{
transform:translate(-5px);background:#ffcc00;
}

.data{
  display:flex;flex-direction:column;
}
.d{
	font-size: 1.2rem;color: #333;
}
.c{
	margin-top: 5px;font: size 0.9rem;color: #777;
}
.cost{
  font-size: 1.5rem;font-weight: bold;color: #2d3436;margin: 15px 0;
}

.title{
	color: #000000;
    text-align: center;
    
}

#Trans{
	display:flex;flex-direction: column;color: #000;gap:5px;
}
#bundle{
   display: flex;flex-direction: column;color: #ffffff;gap:5px;
}
.message{
	align-items: center;padding: 20px;gap:5px;display:flex;flex-direction: column;
	
}

/*About PAGE CSS*/

.slider {
  padding:20px 0;gap:10px;border-radius: 10px;
  
}
.card {
    padding:30px; display: flex; align-items: center;border-radius: 10px; transition: transform 0.3s ease;
 box-shadow: 0 4px 12px rgba(0,0,0,0.1); background-color:whitesmoke;gap: 20px;
}
.card:hover{
  transform: translateY(-5px);
}
.card h3{color: #00b34a;margin-bottom: 10px;font-weight: 600px;
}
.card p{
    font-size: 15px;
    color: #666;
}
.options {
    display: flex;background:#1e293b; flex-wrap: nowrap; overflow-x: auto;overflow-y: hidden;
    -webkit-overflow-scrolling: touch;gap:15px;scrollbar-width: none;  box-shadow: 0 4px 15px linear-gradient(90deg,#0033a0,#e60000);border-top: 1px solid #ffffff;padding:10px;justify-content:space-between;position: fixed;left: 0;bottom: 0;z-index: 1000;
}
.options span{
  color:#ffffff;font-weight:900;font-size: 12px;
}

.my-button{
display: flex;flex-direction: column;border-radius:8px;outline: none;margin-top: 0;padding: 10px;font-weight: bold;text-align: center;text-decoration: none;font-size: 0.6rem;

}
.my-button.active {
  background-color:#10b981; border-radius: 8px;
}
.my-button:hover{
  background:#10b981;
}

.options div{
background-color:linear-gradient(135deg, #2c3e50, #000000);
}

.footer-nav-container{
    overflow: hidden; display: flex;align-self: center;
}
/* Hide scrollbar for Chrome, Safari, and Opera */
.options::-webkit-scrollbar {
    display: none;
}
/* Ensure buttons don't shrink and stay a consistent size */
.options .btn {
    flex: 0 0 auto;          
}

.my-button {
    display: flex;flex-direction: column;align-items: center;min-width: 80px; background: transparent; border: none; cursor: pointer;
}

.services {
     border: 1px solid rgba(255, 255, 255, 0.1);  display: flex;  flex-direction: row; gap: 10px;border-radius: 10px; justify-content: space-between; background-size: cover; background-position: center; background-repeat: no-repeat; backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px); overflow: hidden;z-index: 1; padding: 10px;
   
}
.s-n:hover {
    transform: translateY(-5px);
}
.s_n{
border-radius:50%;height:100px;text-align: center;align-items: center;display: flex;

}
.m-cala{
background-color:#ffcc00 ;padding: 35px;
}
.t-cala{
  color: white;
background:linear-gradient(90deg,#0033a0,#e60000);height:100px;padding:17px;
}
.v-cala{
  color: white;
background-color:#e60000;height: 100px;padding:25px;

}
.network-msg { 
    display: block;opacity: 0.8;font-weight: normal; margin-top: 10px;
}

/* Styling for New Sections */
.header-title {
    text-align: left;margin-bottom: 20px;margin-top:20px;

}

.header-title h2 {
    color:#000;border-radius: 10px; padding:5px; font-size: 1.2rem; border-left:3px solid #00b34a; padding-left: 15px;
}

.extra-services {
    gap: 15px;

}
#ascard {
    background: #ffffff; border-radius: 12px;  padding: 20px;  box-shadow: 0 4px 15px rgba(0,0,0,0.05); flex: 1; display: flex;align-items: center; transition: transform 0.3s ease;margin-top: 12vh;flex-direction: column;
}
#dscard {
  margin-top: 12vh;  background:#ffffff;padding: 30px;border-radius: 15px;box-shadow: 0 4px 15px rgba(0,0,0,0.05);flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease;cursor: pointer; border: 1px solid transparent;display:none;align-items: center;
}
.service-card{
  display: flex;
}
.service-card:hover {
    transform: translateY(-5px);
}

.icon-box {
    background:#f0f0f0; padding:15px;border-radius: 50%;margin-right: 15px;display: flex;align-items: center;justify-content: center;height:50px;
}

.car-service .icon-box span {
    color: #e67e22; /* Orange for cars */
}

.accessory-service .icon-box span {
    color: #2980b9; /* Blue for tech */
}

.service-info h4 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
}

.service-info p {
    font-size: 0.9rem;color: #666;margin: 0;line-height: 1.4;
}

/* Responsive adjustment */
@media (max-width: 768px) {
    .extra-services {
        flex-direction: column;
    }
    .service-card {
        width: 100%;
    }
}


/*contact page css*/

.contact-container {
  text-align: center;align-items: center;  margin-top: 10px;  margin-bottom:80px;
}
.details{
    background:linear-gradient(135deg, #2c3e50, #000000);padding:20px;border-radius: 10px;
}
.contact-container h2{
  color: #ffffff;
}

.tagline {
    color: #666; font-style: italic; margin-bottom: 25px;
}

.contact-grid {
    display: grid; gap: 15px; margin-bottom: 25px;
}

.contact-item {
    display: flex;align-items: center;justify-content: center;gap: 10px;font-size: 1rem;color: #333;
}

.contact-item span {
    color:#00b34a;
}
.contact-item p {
    color:#ffffff;
}

.social-links {
    display: flex; justify-content: center;gap: 15px;
}

.social-btn {
    padding: 10px 20px; border-radius: 30px; text-decoration: none; color: white; font-weight: bold; transition: 0.3s;
}

.whatsapp { background:#008a39; }
.tiktok { background: #000000; }

.social-btn:hover {
    opacity: 0.8;  transform: scale(1.05);
}


/* About Section Styling  of contact*/


.about-section {
    margin-top:8vh;backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);padding: 20px;background:#ffffff;border-radius: 15px;
    border-left: 4px solid #ffffff;
}

.about-content h3 {
    color:#000000; margin-bottom: 10px; text-align: left;
}

.about-content p {
    color: #666;line-height: 1.6;font-size: 0.95rem;
}
.profile-header{
  display: flex; flex-direction: column;
}
/* Profile Card Styling */
.koromah { 
    font-weight: 900; letter-spacing: 2px; color:#ffffff;
}

/*terms and condition css*/


.container {
            margin-top:5vh; max-width: 800px; background:linear-gradient(135deg, #2c3e50, #000000); padding: 40px; border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

.container h1 {
     color: var(--primary-color); border-bottom: 2px solid var(--accent-color); padding-bottom: 10px; text-align: center;font-size: 1.5rem;
     }

.container h2 {
  color: var(--secondary-color); margin-top: 30px; font-size: 1.0rem;
}
 .container  p, li {
            margin-bottom: 15px; text-align: justify; color: #ffffff;
        }

.highlight {
     background: #fff3cd; padding: 10px; border-left: 4px solid #ffecb5; font-size: 0.95rem; margin: 20px 0;
 }

footer {
     margin-top: 40px;text-align: center;font-size: 0.8rem;color: #777;
        }

        @media (max-width: 600px) {
            .container { padding: 20px; }
        }

 /* Container styling */

.terms-container {
  margin: 20px 0; font-family: sans-serif; font-size: 14px;
}

.terms-container span {
  color: #ffffff;
}

#buy-button {
  padding: 12px 24px;border: none;border-radius: 5px;font-weight: bold;transition: all 0.3s ease;
}

.btn-disabled {
   background-color: #e0e0e0;color: #a1a1a1;cursor: not-allowed;
}

.btn-active {
  background-color: #28a745;color: white;cursor: pointer;box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.btn-active:hover {
  background-color: #218838;transform: translateY(-1px);
}