*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
}



/* BODY */

body{

background:
linear-gradient(
rgba(15,23,42,0.92),
rgba(15,23,42,0.96)
),

url("https://images.unsplash.com/photo-1521791136064-7986c2920216?q=80&w=1974&auto=format&fit=crop");

background-size:cover;
background-position:center;
background-attachment:fixed;

min-height:100vh;

color:white;

overflow-x:hidden;

position:relative;

}



/* ANIMATED GLOW EFFECT */

body::before{

content:'';

position:fixed;

width:450px;
height:450px;

background:rgba(0,112,186,0.25);

top:-120px;
left:-120px;

border-radius:50%;

filter:blur(120px);

animation:moveGlow 8s infinite alternate;

z-index:-1;

}

body::after{

content:'';

position:fixed;

width:450px;
height:450px;

background:rgba(52,178,51,0.25);

bottom:-120px;
right:-120px;

border-radius:50%;

filter:blur(120px);

animation:moveGlow2 8s infinite alternate;

z-index:-1;

}



@keyframes moveGlow{

from{
transform:translate(0,0);
}

to{
transform:translate(100px,50px);
}

}

@keyframes moveGlow2{

from{
transform:translate(0,0);
}

to{
transform:translate(-100px,-50px);
}

}



/* HIDDEN */

.hidden{
display:none;
}



.auth-toggle{
margin-top:12px;
cursor:pointer;
color:#0066cc;
}

.payment-status{
margin-top:12px;
font-weight:600;
color:#1a73e8;
}

.upload-label{
cursor:pointer;
}

.sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}

/* GLASS EFFECT */

.glass-effect{

background:rgba(15,23,42,0.78);

-webkit-backdrop-filter:blur(18px);
backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,0.1);

}



/* AUTH SECTION */

.auth-box{

width:420px;

margin:70px auto;

padding:40px;

border-radius:25px;

box-shadow:0 10px 40px rgba(0,0,0,0.5);

animation:slideUp 1s ease;

}



@keyframes slideUp{

from{
opacity:0;
transform:translateY(40px);
}

to{
opacity:1;
transform:translateY(0);
}

}



/* AUTH CONTENT */

.auth-content h1{

text-align:center;

margin-bottom:15px;

font-size:38px;

color:#38bdf8;

}

.welcome-text{

text-align:center;

margin-bottom:25px;

font-size:17px;

color:#cbd5e1;

line-height:1.6;

}



/* INPUTS */

input,
textarea,
select{

width:100%;

padding:15px;

margin-bottom:15px;

border:none;

border-radius:14px;

background:rgba(255,255,255,0.08);

color:white;

outline:none;

font-size:15px;

transition:0.3s;

}



input:focus,
textarea:focus,
select:focus{

border:1px solid #38bdf8;

box-shadow:0 0 15px rgba(56,189,248,0.3);

}



/* PLACEHOLDER */

input::placeholder,
textarea::placeholder{

color:#cbd5e1;

}



/* AUTH BUTTONS */

.auth-buttons{

display:flex;

gap:12px;

margin-top:10px;

}



/* GENERAL BUTTON */

button{

padding:15px;

border:none;

border-radius:14px;

font-size:16px;

font-weight:bold;

cursor:pointer;

transition:0.3s ease;

}



/* SIGNUP BUTTON */

.signup-btn{

background:linear-gradient(to right,#34B233,#138F2D);

color:white;

flex:1;

box-shadow:0 6px 20px rgba(52,178,51,0.3);

}



/* LOGIN BUTTON */

.login-btn{

background:linear-gradient(to right,#0070BA,#003087);

color:white;

flex:1;

box-shadow:0 6px 20px rgba(0,112,186,0.3);

}



/* BUTTON HOVER */

button:hover{

transform:translateY(-3px) scale(1.02);

}



/* MAIN CONTAINER */

.container{

display:flex;

gap:20px;

padding:20px;

animation:fadeApp 1s ease;

}



@keyframes fadeApp{

from{
opacity:0;
transform:scale(0.97);
}

to{
opacity:1;
transform:scale(1);
}

}



/* LEFT SIDE */

.left{

width:45%;

background:rgba(15,23,42,0.85);

-webkit-backdrop-filter:blur(18px);
backdrop-filter:blur(18px);

padding:25px;

border-radius:25px;

height:95vh;

overflow-y:auto;

box-shadow:0 10px 40px rgba(0,0,0,0.4);

}



/* RIGHT SIDE */

.right{

width:55%;

background:rgba(255,255,255,0.95);

color:black;

padding:25px;

border-radius:25px;

min-height:95vh;

box-shadow:0 10px 40px rgba(0,0,0,0.3);

}



/* TOP BAR */

.top-bar{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

}



/* LOGOUT BUTTON */

.logout-btn{

background:#ef4444;

color:white;

padding:12px 18px;

}



/* SUBTITLE */

.subtitle{

margin-bottom:20px;

color:#cbd5e1;

line-height:1.6;

}



/* CARD */

.card{

background:rgba(30,41,59,0.9);

padding:22px;

margin-bottom:20px;

border-radius:22px;

box-shadow:0 10px 25px rgba(0,0,0,0.2);

}



/* CARD TITLE */

.card h2{

margin-bottom:15px;

color:#38bdf8;

}



/* TEXTAREA */

textarea{

min-height:120px;

resize:vertical;

}



/* BUTTON GROUP */

.button-group{

display:grid;

gap:15px;

margin-bottom:20px;

}



/* BUTTON GROUP BUTTONS */

.button-group button{

background:linear-gradient(to right,#38bdf8,#0ea5e9);

color:white;

}



/* OUTPUT */

#output{

background:#f8fafc;

padding:25px;

border-radius:20px;

line-height:1.8;

white-space:pre-wrap;

min-height:450px;

overflow-y:auto;

margin-top:15px;

box-shadow:0 8px 25px rgba(0,0,0,0.1);

}



/* HISTORY */

.history-box{

margin-top:20px;

background:#f1f5f9;

padding:20px;

border-radius:20px;

box-shadow:0 6px 20px rgba(0,0,0,0.1);

}



/* CHECKBOX */

.serviceCheck{

width:auto;

margin-right:10px;

}



/* TOTAL */

#totalAmount{

color:#38bdf8;

font-size:30px;

font-weight:bold;

}



/* PAYMENT SECTION */

.payment-section{

background:rgba(255,255,255,0.08);

padding:30px;

border-radius:25px;

margin-top:20px;

-webkit-backdrop-filter:blur(12px);
backdrop-filter:blur(12px);

box-shadow:0 10px 30px rgba(0,0,0,0.2);

}



/* PAYMENT TITLE */

.payment-section h2{

text-align:center;

margin-bottom:25px;

font-size:28px;

}



/* PAYPAL */

.paypal-box{
margin-bottom:20px;
}

.paypal-btn{
width:100%;
background:linear-gradient(to right,#0070BA,#003087);
color:white;
font-size:18px;
font-weight:bold;
padding:16px;
border:none;
border-radius:50px;
cursor:pointer;
box-shadow:0 8px 25px rgba(0,112,186,0.35);
transition:0.3s ease;
}

.paypal-btn:hover{
transform:scale(1.03);
box-shadow:0 10px 30px rgba(0,112,186,0.45);
}


/* MPESA BUTTON */

.mpesa-btn{

width:100%;

background:linear-gradient(to right,#34B233,#138F2D);

color:white;

font-size:18px;

padding:16px;

border-radius:50px;

box-shadow:0 8px 25px rgba(52,178,51,0.35);

}



/* MPESA HOVER */

.mpesa-btn:hover{

transform:scale(1.03);

}



/* FOOTER */

.section-heading{
margin-top:50px;
}

.footer-links{

display:flex;

justify-content:center;

gap:30px;

padding:25px;

flex-wrap:wrap;

}



.footer-links a{

color:white;

text-decoration:none;

font-weight:bold;

transition:0.3s;

}



.footer-links a:hover{

color:#38bdf8;

}



/* POLICY PAGES */

.policy-container{

max-width:900px;

margin:40px auto;

background:white;

color:black;

padding:40px;

border-radius:25px;

line-height:1.8;

box-shadow:0 10px 30px rgba(0,0,0,0.2);

}



.policy-container h1{

margin-bottom:20px;

color:#0f172a;

}



.policy-container h2{

margin-top:25px;

margin-bottom:10px;

color:#0f172a;

}



.policy-container p{

margin-bottom:15px;

}



/* MOBILE */

@media(max-width:900px){

.container{

flex-direction:column;

}

.left,
.right{

width:100%;

height:auto;

}

.auth-box{

width:92%;

}

.footer-links{

flex-direction:column;

align-items:center;

}

}