:root {
    --p: #2563ff;
    --bg: #f6f9ff
}

body {
    font-family: Inter, Arial, sans-serif;
    background: var(--bg)
}

.hero {
    padding: 140px 0 80px;
    background: radial-gradient(circle at right, #dcecff, #fff 60%)
}

.grad {
    background: linear-gradient(90deg, #2563ff, #14b8a6);
    -webkit-background-clip: text;
    color: transparent
}

.phone {
    width: 360px;
    height: 680px;
    background: #18202d;
    border-radius: 42px;
    margin: auto;
    padding: 14px;
    box-shadow: 0 40px 80px rgba(37, 99, 255, .2)
}

.screen {
    height: 100%;
    background: #fff;
    border-radius: 30px;
    padding: 30px
}

.balance {
    font-size: 46px;
    font-weight: 700;
    color: #2563ff;
    margin: 30px 0
}

.item {
    display: flex;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid #edf2f7
}

.trust {
    display: flex;
    gap: 30px;
    flex-wrap: wrap
}

.trust i {
    color: #22c55e;
    margin-right: 8px
}

.cardx {
    background: #fff;
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .05);
    transition: .3s;
    height: 100%
}

.cardx:hover {
    transform: translateY(-8px)
}

.icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: #eef4ff;
    color: #2563ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    margin-bottom: 18px
}

.feature {
    background: #fff;
    border-radius: 24px;
    padding: 35px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .05)
}

.feature i {
    font-size: 42px;
    color: #2563ff
}

/*========================
    NAVBAR
========================*/

.payhub-navbar{

    height:90px;

    backdrop-filter:blur(18px);

    background:rgba(255,255,255,.88);

    border-bottom:1px solid rgba(0,0,0,.05);

    transition:.35s;

    z-index:999;

}

.payhub-navbar .container{

    max-width:1320px;

}

.logo-circle{

    width:52px;

    height:52px;

    border-radius:18px;

    background:linear-gradient(135deg,#1d63ff,#3bb7ff);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:24px;

    box-shadow:0 15px 35px rgba(37,99,255,.30);

}

.logo-text{

    margin-left:14px;

    font-size:30px;

    font-weight:800;

    color:#1c2942;

}

.navbar-nav{

    gap:18px;

}

.nav-link{

    color:#5b6475;

    font-weight:600;

    padding:12px 18px !important;

    border-radius:14px;

    transition:.30s;

}

.nav-link:hover{

    color:#2563ff;

    background:#eef4ff;

}

.nav-link.active{

    color:#2563ff;

}

.navbar-actions{

    display:flex;

    align-items:center;

    gap:12px;

}

.btn-language{

    width:52px;

    height:52px;

    border:none;

    border-radius:16px;

    background:#eef5ff;

    font-weight:700;

    color:#2563ff;

}

.btn-support{

    border:none;

    background:#eef6ff;

    color:#2563ff;

    border-radius:16px;

    padding:14px 22px;

    font-weight:700;

}

.btn-login{

    border:none;

    color:#fff;

    font-weight:700;

    border-radius:16px;

    padding:14px 28px;

    background:linear-gradient(135deg,#2563ff,#4ba3ff);

    box-shadow:0 20px 35px rgba(37,99,255,.28);

    transition:.3s;

}

.btn-login:hover{

    transform:translateY(-2px);

    box-shadow:0 24px 45px rgba(37,99,255,.35);

}

/*======================================
        HERO
=======================================*/

.hero-section{

    position:relative;

    overflow:hidden;

    padding-top:180px;

    padding-bottom:140px;

    background:#f8fbff;

}

.hero-grid{

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(rgba(37,99,255,.04) 1px, transparent 1px),

        linear-gradient(90deg, rgba(37,99,255,.04) 1px, transparent 1px);

    background-size:50px 50px;

}

.hero-bg-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

}

.circle-1{

    width:500px;

    height:500px;

    background:#4f8cff;

    opacity:.18;

    top:-120px;

    right:-120px;

}

.circle-2{

    width:420px;

    height:420px;

    background:#14d7c4;

    opacity:.15;

    bottom:-150px;

    left:-120px;

}

.hero-content{

    position:relative;

    z-index:5;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    border-radius:100px;

    background:white;

    box-shadow:0 15px 35px rgba(0,0,0,.05);

    font-weight:600;

}

.hero-content h1{

    margin-top:35px;

    font-size:68px;

    line-height:1.1;

    font-weight:800;

    color:#1d2942;

}

.hero-content h1 span{

    background:linear-gradient(135deg,#2563ff,#00c2a8);

    -webkit-background-clip:text;

    color:transparent;

}

.hero-content p{

    margin-top:30px;

    font-size:20px;

    line-height:1.9;

    color:#697386;

    max-width:560px;

}

.hero-buttons{

    display:flex;

    gap:18px;

    margin-top:45px;

}

.btn-start{

    padding:18px 38px;

    border-radius:18px;

    background:linear-gradient(135deg,#2563ff,#4da6ff);

    color:white;

    text-decoration:none;

    font-weight:700;

    box-shadow:0 25px 45px rgba(37,99,255,.25);

}

.btn-outline{

    padding:18px 36px;

    border-radius:18px;

    background:white;

    color:#2563ff;

    text-decoration:none;

    font-weight:700;

    box-shadow:0 15px 30px rgba(0,0,0,.05);

}

.hero-trust{

    display:flex;

    gap:30px;

    margin-top:55px;

    flex-wrap:wrap;

}

.hero-trust div{

    display:flex;

    align-items:center;

    gap:10px;

    color:#6b7280;

}

.hero-trust i{

    color:#22c55e;

}

/*==================================================
                PHONE MOCKUP
==================================================*/

.hero-image{

    position:relative;

    height:760px;

    display:flex;

    justify-content:center;

    align-items:center;

}

/* Blue Glow */

.phone-shadow{

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(37,99,255,.25) 0%,
    rgba(37,99,255,.08) 45%,
    transparent 75%);

    filter:blur(45px);

    animation:glow 5s infinite ease-in-out;

}

/* PHONE */

.phone{

    position:relative;

    width:360px;

    height:720px;

    background:#1b2232;

    border-radius:48px;

    padding:14px;

    z-index:3;

    box-shadow:

        0 60px 120px rgba(23,40,80,.20),

        0 20px 50px rgba(0,0,0,.10);

}

/* Screen */

.phone-screen{

    background:#ffffff;

    height:100%;

    border-radius:36px;

    padding:32px;

    overflow:hidden;

}

/* Speaker */

.phone-top{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    width:120px;

    height:28px;

    background:#0d1119;

    border-radius:40px;

    top:12px;

}

/* Balance */

.balance-card{

    background:linear-gradient(135deg,#2563ff,#5ca6ff);

    border-radius:28px;

    padding:28px;

    color:#fff;

    margin-top:22px;

    box-shadow:0 20px 50px rgba(37,99,255,.25);

}

.balance-card small{

    opacity:.8;

    font-size:15px;

}

.balance-card h2{

    margin-top:12px;

    font-size:42px;

    font-weight:800;

}

/* Bills */

.bill-card{

    background:#fff;

    border-radius:22px;

    padding:18px 22px;

    margin-top:18px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    box-shadow:

        0 10px 30px rgba(0,0,0,.05);

    transition:.35s;

}

.bill-card:hover{

    transform:translateY(-5px);

    box-shadow:

        0 20px 40px rgba(0,0,0,.08);

}

.bill-card span{

    color:#555;

    font-weight:600;

}

.bill-card strong{

    font-size:18px;

}

/* Button */

.btn-pay{

    width:100%;

    margin-top:35px;

    border:none;

    height:64px;

    border-radius:18px;

    font-size:18px;

    font-weight:700;

    color:#fff;

    background:linear-gradient(135deg,#2563ff,#48a0ff);

    box-shadow:

        0 18px 35px rgba(37,99,255,.28);

    transition:.35s;

}

.btn-pay:hover{

    transform:translateY(-3px);

}

/*==================================================
            FLOATING CARDS
==================================================*/

.floating-card{

    position:absolute;

    background:white;

    border-radius:22px;

    padding:18px 24px;

    box-shadow:

        0 25px 50px rgba(0,0,0,.08);

    display:flex;

    align-items:center;

    gap:14px;

    font-weight:700;

    z-index:10;

}

/* Payment Success */

.card-payment{

    right:-40px;

    top:150px;

    color:#16a34a;

}

/* Encryption */

.card-security{

    left:-40px;

    bottom:140px;

    color:#2563ff;

}

/* Success Icon */

.card-payment i{

    font-size:28px;

}

/*==================================================
            ANIMATIONS
==================================================*/

@keyframes glow{

    0%{
    
    transform:scale(1);
    
    }
    
    50%{
    
    transform:scale(1.12);
    
    }
    
    100%{
    
    transform:scale(1);
    
    }
    
    }
    
    @keyframes floating{
    
    0%{
    
    transform:translateY(0px);
    
    }
    
    50%{
    
    transform:translateY(-18px);
    
    }
    
    100%{
    
    transform:translateY(0px);
    
    }
    
    }
    
    .phone{
    
    animation:floating 5s infinite ease-in-out;
    
    }
    
    .card-payment{
    
    animation:floating 4s infinite ease-in-out;
    
    }
    
    .card-security{
    
    animation:floating 5s infinite ease-in-out;
    
    }

    /*================================
 SERVICES SECTION
================================*/


.services-section{

    padding:120px 0;

    background:#ffffff;

}



.section-header{

    max-width:700px;

    margin:auto;

}



.section-badge{

    display:inline-flex;

    gap:10px;

    align-items:center;

    background:#eef5ff;

    color:#2563ff;

    padding:10px 22px;

    border-radius:50px;

    font-weight:700;

}



.section-header h2{

    margin-top:25px;

    font-size:54px;

    font-weight:800;

    color:#182238;

}



.section-header h2 span{

    background:

    linear-gradient(
        135deg,
        #2563ff,
        #12c2a3
    );

    color:transparent;

    -webkit-background-clip:text;

}



.section-header p{

    margin-top:20px;

    color:#687386;

    font-size:19px;

}



/* GRID */


.services-grid{

    margin-top:70px;

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:28px;

}



/* CARD */


.service-card{


    background:#fff;

    border-radius:28px;

    padding:30px;

    position:relative;

    min-height:250px;

    border:1px solid #edf2f7;

    transition:.35s;

    overflow:hidden;


}



.service-card:before{


    content:"";

    position:absolute;

    width:120px;

    height:120px;

    right:-50px;

    top:-50px;

    background:#eef5ff;

    border-radius:50%;

    transition:.4s;


}



.service-card:hover{


    transform:translateY(-10px);

    box-shadow:

    0 30px 60px rgba(30,70,150,.12);


}



.service-card:hover:before{

    transform:scale(2);

}



.service-icon{


    width:70px;

    height:70px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:32px;

    color:white;

}



.blue{

background:linear-gradient(135deg,#2563ff,#55a7ff);

}



.purple{

background:linear-gradient(135deg,#7c3aed,#c084fc);

}


.green{

background:linear-gradient(135deg,#10b981,#34d399);

}


.orange{

background:linear-gradient(135deg,#f97316,#fb923c);

}


.cyan{

background:linear-gradient(135deg,#06b6d4,#67e8f9);

}


.red{

background:linear-gradient(135deg,#ef4444,#fb7185);

}


.pink{

background:linear-gradient(135deg,#ec4899,#f472b6);

}


.dark{

background:linear-gradient(135deg,#1e293b,#475569);

}



.service-content{

margin-top:25px;

}



.service-content h4{

font-weight:750;

color:#182238;

}



.service-content p{

color:#718096;

margin-top:10px;

}



.service-arrow{


position:absolute;

right:25px;

bottom:30px;

width:45px;

height:45px;

border-radius:50%;

border:none;

background:#eef5ff;

color:#2563ff;

transition:.3s;


}



.service-card:hover .service-arrow{


background:#2563ff;

color:white;

transform:translateX(6px);


}

@media(max-width:1200px){

    .services-grid{
    
    grid-template-columns:repeat(3,1fr);
    
    }
    
    }
    
    
    @media(max-width:992px){
    
    .services-grid{
    
    grid-template-columns:repeat(2,1fr);
    
    }
    
    
    .section-header h2{
    
    font-size:42px;
    
    }
    
    }
    
    
    
    @media(max-width:576px){
    
    .services-grid{
    
    grid-template-columns:1fr;
    
    }
    
    
    .section-header h2{
    
    font-size:34px;
    
    }
    
    }

    /*================================
        STATISTICS
================================*/


.stats-section{


    padding:100px 0;

    background:#f7faff;


}



.stats-wrapper{


    background:white;

    border-radius:35px;

    padding:45px;

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:25px;

    box-shadow:

    0 30px 80px rgba(0,0,0,.06);


}



.stats-item{


    display:flex;

    align-items:center;

    gap:20px;

    padding:25px;

    border-radius:25px;

    transition:.35s;


}



.stats-item:hover{


    background:#f4f8ff;

    transform:translateY(-5px);


}



.stats-icon{


    width:70px;

    height:70px;

    border-radius:22px;

    background:

    linear-gradient(
        135deg,
        #2563ff,
        #63b3ff
    );


    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;


}



.stats-item h3{


    font-size:38px;

    font-weight:800;

    margin:0;

    color:#182238;


}



.stats-item p{


    margin:5px 0 0;

    color:#718096;

    font-weight:600;


}

@media(max-width:992px){


    .stats-wrapper{
    
    grid-template-columns:repeat(2,1fr);
    
    }
    
    
    }
    
    
    
    @media(max-width:576px){
    
    
    .stats-wrapper{
    
    grid-template-columns:1fr;
    
    padding:25px;
    
    }
    
    
    .stats-item h3{
    
    font-size:30px;
    
    }
    
    
    }

    /*================================
        WHY SECTION
================================*/


.why-section{

    padding:130px 0;

    background:white;

}


.why-title{

    margin-top:25px;

    font-size:52px;

    font-weight:800;

    line-height:1.15;

    color:#182238;

}


.why-title span{


background:

linear-gradient(
135deg,
#2563ff,
#10b981
);


-webkit-background-clip:text;

color:transparent;


}



.why-text{


font-size:19px;

line-height:1.8;

color:#687386;

margin-top:25px;


}



/* PAYMENT METHODS */


.payment-methods{


display:flex;

flex-wrap:wrap;

gap:15px;

margin-top:40px;


}


.payment-logo{


background:#f7faff;

border-radius:16px;

padding:15px 20px;

display:flex;

align-items:center;

gap:10px;

font-weight:700;

color:#334155;


}



.payment-logo i{


font-size:22px;

color:#2563ff;


}



/* FEATURES */


.features-grid{


display:grid;

grid-template-columns:

repeat(2,1fr);

gap:25px;


}



.feature-box{


background:white;

border-radius:28px;

padding:32px;

border:1px solid #edf2f7;

transition:.35s;


}



.feature-box:hover{


transform:translateY(-8px);

box-shadow:

0 30px 70px rgba(0,0,0,.08);


}



.feature-icon{


width:65px;

height:65px;

border-radius:20px;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

color:white;

margin-bottom:25px;


}



.blue-bg{

background:#2563ff;

}


.green-bg{

background:#10b981;

}


.purple-bg{

background:#8b5cf6;

}


.orange-bg{

background:#f97316;

}


.red-bg{

background:#ef4444;

}


.dark-bg{

background:#334155;

}



.feature-box h4{


font-weight:750;

color:#182238;


}



.feature-box p{


color:#718096;

line-height:1.6;


}

@media(max-width:992px){


    .why-title{
    
    font-size:40px;
    
    }
    
    
    .features-grid{
    
    grid-template-columns:1fr;
    
    }
    
    
    }
    
    
    @media(max-width:576px){
    
    
    .why-title{
    
    font-size:34px;
    
    }
    
    
    .payment-methods{
    
    flex-direction:column;
    
    }
    
    
    }

    /*====================================
            FOOTER
=====================================*/


.payhub-footer{


    background:#101827;
    
    padding:90px 0 30px;
    
    color:white;
    
    
    }
    
    
    
    .footer-logo{
    
    
    display:flex;
    
    align-items:center;
    
    gap:15px;
    
    text-decoration:none;
    
    color:white;
    
    font-size:32px;
    
    font-weight:800;
    
    
    }
    
    
    
    .footer-logo-icon{
    
    
    width:55px;
    
    height:55px;
    
    border-radius:18px;
    
    background:
    
    linear-gradient(
    135deg,
    #2563ff,
    #00c2a8
    );
    
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    font-size:28px;
    
    
    }
    
    
    
    .footer-description{
    
    
    margin-top:25px;
    
    color:#94a3b8;
    
    line-height:1.8;
    
    max-width:350px;
    
    
    }
    
    
    
    .footer-social{
    
    
    display:flex;
    
    gap:12px;
    
    margin-top:30px;
    
    
    }
    
    
    
    .footer-social a{
    
    
    width:45px;
    
    height:45px;
    
    border-radius:14px;
    
    background:#1e293b;
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    color:white;
    
    font-size:20px;
    
    transition:.3s;
    
    
    }
    
    
    
    .footer-social a:hover{
    
    
    background:#2563ff;
    
    transform:translateY(-5px);
    
    
    }
    
    
    
    .payhub-footer h5{
    
    
    font-size:18px;
    
    font-weight:750;
    
    margin-bottom:25px;
    
    
    }
    
    
    
    .payhub-footer ul{
    
    
    list-style:none;
    
    padding:0;
    
    
    }
    
    
    
    .payhub-footer li{
    
    
    margin-bottom:14px;
    
    
    }
    
    
    
    .payhub-footer li a{
    
    
    color:#94a3b8;
    
    text-decoration:none;
    
    transition:.3s;
    
    
    }
    
    
    
    .payhub-footer li a:hover{
    
    
    color:white;
    
    padding-left:5px;
    
    
    }
    
    
    
    /* Newsletter */
    
    
    .newsletter{
    
    
    display:flex;
    
    background:#1e293b;
    
    border-radius:18px;
    
    overflow:hidden;
    
    margin-top:20px;
    
    padding:5px;
    
    
    }
    
    
    
    .newsletter input{
    
    
    flex:1;
    
    background:transparent;
    
    border:none;
    
    outline:none;
    
    padding:15px;
    
    color:white;
    
    
    }
    
    
    
    .newsletter button{
    
    
    width:55px;
    
    border:none;
    
    border-radius:14px;
    
    background:#2563ff;
    
    color:white;
    
    font-size:22px;
    
    
    }
    
    
    
    .security-badges{
    
    
    display:flex;
    
    gap:15px;
    
    margin-top:25px;
    
    flex-wrap:wrap;
    
    
    }
    
    
    
    .security-badges div{
    
    
    background:#1e293b;
    
    padding:10px 15px;
    
    border-radius:12px;
    
    color:#cbd5e1;
    
    font-size:14px;
    
    
    }
    
    
    
    .security-badges i{
    
    
    color:#22c55e;
    
    margin-right:6px;
    
    
    }
    
    
    
    /* Bottom */
    
    
    .payhub-footer hr{
    
    
    margin:50px 0 30px;
    
    border-color:#334155;
    
    
    }
    
    
    
    .footer-bottom{
    
    
    display:flex;
    
    justify-content:space-between;
    
    align-items:center;
    
    color:#94a3b8;
    
    
    }
    
    
    
    .footer-bottom a{
    
    
    color:#94a3b8;
    
    text-decoration:none;
    
    margin-left:25px;
    
    
    }
    
    
    
    .footer-bottom a:hover{
    
    
    color:white;
    
    
    }

    @media(max-width:768px){


        .footer-bottom{
        
        
        flex-direction:column;
        
        gap:20px;
        
        text-align:center;
        
        
        }
        
        
        
        .footer-bottom a{
        
        
        margin:0 10px;
        
        
        }
        
        
        }

        /*================================
IDENTIFICATION PAGE
================================*/


.identify-page{


    padding-top:170px;
    
    padding-bottom:120px;
    
    background:#f7faff;
    
    
    min-height:100vh;
    
    
    }
    
    
    
    /* STEPPER */
    
    
    .payment-stepper{
    
    
    display:flex;
    
    justify-content:center;
    
    align-items:center;
    
    margin-bottom:60px;
    
    
    }
    
    
    
    .step{
    
    
    display:flex;
    
    flex-direction:column;
    
    align-items:center;
    
    gap:10px;
    
    color:#94a3b8;
    
    font-weight:600;
    
    
    }
    
    
    
    .step-number{
    
    
    width:55px;
    
    height:55px;
    
    border-radius:50%;
    
    background:white;
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    font-size:20px;
    
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    
    
    }
    
    
    
    .step.active .step-number{
    
    
    background:#2563ff;
    
    color:white;
    
    
    }
    
    
    
    .step.active{
    
    
    color:#2563ff;
    
    
    }
    
    
    
    .step-line{
    
    
    height:3px;
    
    width:100px;
    
    background:#dbeafe;
    
    margin:0 20px;
    
    
    }
    
    
    
    
    /* CARD */
    
    
    .verify-card{
    
    
    background:white;
    
    border-radius:35px;
    
    padding:50px;
    
    box-shadow:
    
    0 30px 80px rgba(0,0,0,.07);
    
    
    }
    
    
    
    .selected-service{
    
    
    display:flex;
    
    align-items:center;
    
    gap:20px;
    
    background:#f5f9ff;
    
    padding:25px;
    
    border-radius:25px;
    
    margin-bottom:40px;
    
    
    }
    
    
    
    .service-small-icon{
    
    
    width:65px;
    
    height:65px;
    
    border-radius:20px;
    
    background:
    
    linear-gradient(
    135deg,
    #2563ff,
    #5ca6ff
    );
    
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    color:white;
    
    font-size:30px;
    
    
    }
    
    
    
    .verify-card h2{
    
    
    font-size:38px;
    
    font-weight:800;
    
    color:#182238;
    
    
    }
    
    
    
    .verify-card label{
    
    
    display:block;
    
    font-weight:700;
    
    margin-bottom:12px;
    
    color:#334155;
    
    
    }
    
    
    
    .input-wrapper{
    
    
    height:65px;
    
    border:1px solid #e2e8f0;
    
    border-radius:18px;
    
    display:flex;
    
    align-items:center;
    
    padding:0 20px;
    
    gap:15px;
    
    transition:.3s;
    
    
    }
    
    
    
    .input-wrapper:focus-within{
    
    
    border-color:#2563ff;
    
    box-shadow:
    
    0 0 0 4px rgba(37,99,255,.12);
    
    
    }
    
    
    
    .input-wrapper i{
    
    
    color:#2563ff;
    
    font-size:22px;
    
    
    }
    
    
    
    .input-wrapper input{
    
    
    border:none;
    
    outline:none;
    
    width:100%;
    
    font-size:16px;
    
    
    }
    
    
    
    
    .verify-button{
    
    
    margin-top:40px;
    
    width:100%;
    
    height:65px;
    
    border:none;
    
    border-radius:18px;
    
    background:
    
    linear-gradient(
    135deg,
    #2563ff,
    #4da6ff
    );
    
    
    color:white;
    
    font-size:18px;
    
    font-weight:700;
    
    
    box-shadow:
    
    0 20px 40px rgba(37,99,255,.25);
    
    
    transition:.3s;
    
    
    }
    
    
    
    .verify-button:hover{
    
    
    transform:translateY(-3px);
    
    
    }
    @media(max-width:576px){


        .payment-stepper{
        
        transform:scale(.85);
        
        }
        
        
        
        .step-line{
        
        width:40px;
        
        }
        
        
        
        .verify-card{
        
        padding:30px;
        
        }
        
        
        
        .verify-card h2{
        
        font-size:30px;
        
        }
        
        
        }

        /*================================
        BILL PAGE
================================*/


.bill-page{

    padding-top:170px;
    
    padding-bottom:120px;
    
    background:#f7faff;
    
    min-height:100vh;
    
    }
    
    
    
    
    
    .bill-card-wrapper{
    
    
    background:white;
    
    border-radius:38px;
    
    padding:45px;
    
    box-shadow:
    
    0 35px 90px rgba(0,0,0,.08);
    
    
    }
    
    
    
    
    
    /* SUCCESS */
    
    
    .success-header{
    
    
    display:flex;
    
    align-items:center;
    
    gap:20px;
    
    padding-bottom:35px;
    
    border-bottom:1px solid #edf2f7;
    
    
    }
    
    
    
    .success-icon{
    
    
    width:70px;
    
    height:70px;
    
    border-radius:50%;
    
    
    background:#dcfce7;
    
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    
    font-size:35px;
    
    color:#16a34a;
    
    
    }
    
    
    
    
    .success-header h4{
    
    
    font-size:28px;
    
    font-weight:800;
    
    margin:0;
    
    
    }
    
    
    
    
    
    /* CUSTOMER */
    
    
    .customer-box{
    
    
    margin-top:35px;
    
    background:#f6f9ff;
    
    padding:30px;
    
    border-radius:28px;
    
    
    display:flex;
    
    justify-content:space-between;
    
    align-items:center;
    
    
    }
    
    
    
    .customer-box span{
    
    
    color:#64748b;
    
    font-weight:600;
    
    
    }
    
    
    
    .customer-box h3{
    
    
    margin-top:8px;
    
    font-weight:800;
    
    color:#182238;
    
    
    }
    
    
    
    .customer-service{
    
    
    background:#2563ff;
    
    color:white;
    
    padding:15px 22px;
    
    border-radius:18px;
    
    font-weight:700;
    
    display:flex;
    
    align-items:center;
    
    gap:10px;
    
    
    }
    
    
    
    
    
    
    /* SUMMARY */
    
    
    .bill-summary{
    
    
    margin-top:35px;
    
    padding:25px;
    
    border-radius:25px;
    
    border:1px solid #edf2f7;
    
    
    }
    
    
    
    .summary-row{
    
    
    display:flex;
    
    justify-content:space-between;
    
    padding:16px 0;
    
    border-bottom:1px solid #f1f5f9;
    
    
    }
    
    
    
    .summary-row:last-child{
    
    border:none;
    
    }
    
    
    
    .summary-row span{
    
    color:#64748b;
    
    }
    
    
    
    .summary-row strong{
    
    color:#182238;
    
    }
    
    
    
    
    
    /* AMOUNT */
    
    
    .amount-box{
    
    
    margin-top:35px;
    
    
    }
    
    
    
    .amount-box label{
    
    
    font-weight:700;
    
    display:block;
    
    margin-bottom:12px;
    
    
    }
    
    
    
    .amount-input{
    
    
    height:75px;
    
    border-radius:22px;
    
    background:#f8fafc;
    
    display:flex;
    
    align-items:center;
    
    padding:0 25px;
    
    font-size:30px;
    
    font-weight:800;
    
    color:#2563ff;
    
    
    }
    
    
    
    .amount-input input{
    
    
    border:none;
    
    background:transparent;
    
    outline:none;
    
    font-size:30px;
    
    font-weight:800;
    
    width:100%;
    
    
    }
    
    
    
    
    
    .amount-box small{
    
    
    display:block;
    
    margin-top:12px;
    
    color:#64748b;
    
    
    }
    
    
    
    
    
    
    
    .checkout-button{
    
    
    margin-top:40px;
    
    width:100%;
    
    height:70px;
    
    border:none;
    
    border-radius:22px;
    
    
    background:
    
    linear-gradient(
    135deg,
    #2563ff,
    #4da6ff
    );
    
    
    color:white;
    
    font-size:20px;
    
    font-weight:800;
    
    
    box-shadow:
    
    0 25px 50px rgba(37,99,255,.25);
    
    
    transition:.3s;
    
    
    }
    
    
    
    
    .checkout-button:hover{
    
    
    transform:translateY(-4px);
    
    
    }

    @media(max-width:576px){


        .bill-card-wrapper{
        
        padding:25px;
        
        }
        
        
        
        .customer-box{
        
        
        flex-direction:column;
        
        align-items:flex-start;
        
        gap:20px;
        
        
        }
        
        
        .summary-row{
        
        
        flex-direction:column;
        
        gap:8px;
        
        
        }
        
        
        }

        /*==============================
        CHECKOUT
===============================*/


.checkout-page{


    padding-top:170px;
    
    padding-bottom:120px;
    
    background:#f7faff;
    
    min-height:100vh;
    
    
    }
    
    
    
    
    .checkout-box,
    .order-box{
    
    
    background:white;
    
    border-radius:35px;
    
    padding:45px;
    
    box-shadow:
    
    0 35px 90px rgba(0,0,0,.07);
    
    
    }
    
    
    
    
    
    .checkout-box h2{
    
    
    font-size:38px;
    
    font-weight:800;
    
    color:#182238;
    
    
    }
    
    
    
    
    .payment-tabs{
    
    
    display:flex;
    
    gap:12px;
    
    margin:35px 0;
    
    flex-wrap:wrap;
    
    
    }
    
    
    
    .payment-tabs button{
    
    
    border:none;
    
    background:#f1f5f9;
    
    padding:15px 20px;
    
    border-radius:16px;
    
    font-weight:700;
    
    color:#64748b;
    
    
    }
    
    
    
    .payment-tabs button.active{
    
    
    background:#2563ff;
    
    color:white;
    
    
    }
    
    
    
    
    
    .checkout-input{
    
    
    height:65px;
    
    border:1px solid #e2e8f0;
    
    border-radius:18px;
    
    display:flex;
    
    align-items:center;
    
    padding:0 20px;
    
    gap:15px;
    
    margin-top:10px;
    
    
    }
    
    
    
    .checkout-input i{
    
    color:#2563ff;
    
    font-size:20px;
    
    }
    
    
    
    .checkout-input input{
    
    
    border:none;
    
    outline:none;
    
    width:100%;
    
    font-size:16px;
    
    
    }
    
    
    
    
    .pay-button{
    
    
    margin-top:40px;
    
    width:100%;
    
    height:70px;
    
    border:none;
    
    border-radius:22px;
    
    
    background:
    
    linear-gradient(
    135deg,
    #2563ff,
    #4da6ff
    );
    
    
    color:white;
    
    font-size:20px;
    
    font-weight:800;
    
    
    }
    
    
    
    
    
    /* ORDER */
    
    
    .order-box h3{
    
    
    font-size:28px;
    
    font-weight:800;
    
    
    }
    
    
    
    .order-service{
    
    
    display:flex;
    
    gap:18px;
    
    align-items:center;
    
    background:#f6f9ff;
    
    padding:25px;
    
    border-radius:25px;
    
    margin:30px 0;
    
    
    }
    
    
    
    .order-icon{
    
    
    width:60px;
    
    height:60px;
    
    border-radius:18px;
    
    background:#2563ff;
    
    color:white;
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    font-size:28px;
    
    
    }
    
    
    
    .order-service p{
    
    margin:0;
    
    color:#64748b;
    
    }
    
    
    
    .order-row,
    .total-row{
    
    
    display:flex;
    
    justify-content:space-between;
    
    padding:18px 0;
    
    }
    
    
    
    .total-row strong{
    
    
    font-size:30px;
    
    color:#2563ff;
    
    
    }
    
    
    
    .security-box{
    
    
    display:flex;
    
    gap:15px;
    
    background:#ecfdf5;
    
    padding:20px;
    
    border-radius:20px;
    
    margin-top:30px;
    
    
    }
    
    
    
    .security-box i{
    
    
    color:#16a34a;
    
    font-size:28px;
    
    
    }
    
    
    
    .security-box p{
    
    
    margin:0;
    
    color:#166534;
    
    }
    
    
    
    .cards{
    
    
    display:flex;
    
    gap:15px;
    
    margin-top:25px;
    
    
    }
    
    
    
    .cards i{
    
    
    font-size:35px;
    
    color:#2563ff;
    
    
    }

    @media(max-width:768px){

        .checkout-box,
        .order-box{
        
        padding:25px;
        
        }
        
        
        .payment-tabs button{
        
        width:100%;
        
        }
        
        
        }

        .hero-section{

            background:
            radial-gradient(
            circle at 20% 20%,
            rgba(37,99,255,.25),
            transparent 40%
            ),
            
            radial-gradient(
            circle at 80% 40%,
            rgba(16,185,129,.25),
            transparent 40%
            ),
            
            #f8fbff;
            
            }



            .payment-services{

                padding:160px 0 100px;
                
                background:
                radial-gradient(
                circle at top,
                #eef6ff,
                white 60%
                );
                
                }
                
                
                
                .payment-title span{
                
                background:#e8f1ff;
                
                padding:10px 22px;
                
                border-radius:50px;
                
                color:#2563ff;
                
                font-weight:700;
                
                }
                
                
                
                .payment-title h1{
                
                margin-top:30px;
                
                font-size:56px;
                
                font-weight:800;
                
                color:#182238;
                
                }
                
                
                
                .payment-title p{
                
                font-size:20px;
                
                color:#64748b;
                
                }
                
                
                
                .payment-grid{
                
                
                margin-top:70px;
                
                display:grid;
                
                grid-template-columns:repeat(2,420px);
                
                justify-content:center;
                
                gap:35px;
                
                
                }
                
                
                
                .payment-box{
                
                
                background:white;
                
                border-radius:35px;
                
                padding:45px;
                
                text-decoration:none;
                
                color:#182238;
                
                border:1px solid #edf2f7;
                
                box-shadow:
                
                0 25px 60px rgba(0,0,0,.06);
                
                transition:.35s;
                
                }
                
                
                
                .payment-box:hover{
                
                
                transform:translateY(-10px);
                
                box-shadow:
                
                0 40px 80px rgba(37,99,255,.15);
                
                
                }
                
                
                
                .payment-icon{
                
                
                width:90px;
                
                height:90px;
                
                border-radius:30px;
                
                display:flex;
                
                align-items:center;
                
                justify-content:center;
                
                font-size:42px;
                
                color:white;
                
                
                }
                
                
                
                .electricity{
                
                background:
                linear-gradient(135deg,#2563ff,#55a7ff);
                
                }
                
                
                
                .internet{
                
                background:
                linear-gradient(135deg,#7c3aed,#c084fc);
                
                }
                
                
                
                .parking{
                
                background:
                linear-gradient(135deg,#10b981,#34d399);
                
                }
                
                
                
                .apartment{
                
                background:
                linear-gradient(135deg,#f97316,#fb923c);
                
                }
                
                
                
                .payment-box h3{
                
                
                margin-top:30px;
                
                font-size:30px;
                
                font-weight:800;
                
                
                }
                
                
                
                .payment-box p{
                
                color:#64748b;
                
                font-size:18px;
                
                }
                
                
                
                .pay-link{
                
                
                margin-top:35px;
                
                color:#2563ff;
                
                font-weight:800;
                
                font-size:18px;
                
                }
                
                
                
                @media(max-width:900px){
                
                .payment-grid{
                
                grid-template-columns:1fr;
                
                }
                
                .payment-title h1{
                
                font-size:38px;
                
                }
                
                }

                .service-page{

                    min-height:100vh;
                    
                    padding-top:150px;
                    
                    padding-bottom:80px;
                    
                    background:
                    
                    radial-gradient(
                    circle at top,
                    #edf5ff,
                    #ffffff 60%
                    );
                    
                    }
                    
                    
                    
                    .service-header{
                    
                    text-align:center;
                    
                    }
                    
                    
                    
                    .service-header h1{
                    
                    font-size:52px;
                    
                    font-weight:800;
                    
                    color:#182238;
                    
                    }
                    
                    
                    
                    .service-header p{
                    
                    font-size:20px;
                    
                    color:#64748b;
                    
                    margin-top:15px;
                    
                    }
                    
                    
                    
                    .service-selection{
                    
                    margin-top:70px;
                    
                    display:grid;
                    
                    grid-template-columns:repeat(2,420px);
                    
                    justify-content:center;
                    
                    gap:35px;
                    
                    }
                    
                    
                    
                    .main-service-card{
                    
                    
                    background:white;
                    
                    border-radius:35px;
                    
                    padding:45px;
                    
                    text-decoration:none;
                    
                    color:#182238;
                    
                    border:1px solid #edf2f7;
                    
                    box-shadow:
                    
                    0 30px 70px rgba(0,0,0,.07);
                    
                    transition:.35s;
                    
                    }
                    
                    
                    
                    .main-service-card:hover{
                    
                    transform:translateY(-10px);
                    
                    box-shadow:
                    
                    0 40px 90px rgba(37,99,255,.18);
                    
                    }
                    
                    
                    
                    .main-icon{
                    
                    width:95px;
                    
                    height:95px;
                    
                    border-radius:30px;
                    
                    display:flex;
                    
                    align-items:center;
                    
                    justify-content:center;
                    
                    font-size:45px;
                    
                    color:white;
                    
                    }
                    
                    
                    
                    .electricity{
                    
                    background:linear-gradient(135deg,#2563ff,#60a5fa);
                    
                    }
                    
                    
                    .internet{
                    
                    background:linear-gradient(135deg,#7c3aed,#c084fc);
                    
                    }
                    
                    
                    .parking{
                    
                    background:linear-gradient(135deg,#10b981,#34d399);
                    
                    }
                    
                    
                    .apartment{
                    
                    background:linear-gradient(135deg,#f97316,#fb923c);
                    
                    }
                    
                    
                    
                    .main-service-card h2{
                    
                    margin-top:30px;
                    
                    font-size:32px;
                    
                    font-weight:800;
                    
                    }
                    
                    
                    
                    .main-service-card p{
                    
                    color:#64748b;
                    
                    font-size:18px;
                    
                    }
                    
                    
                    
                    .main-service-card span{
                    
                    display:block;
                    
                    margin-top:30px;
                    
                    color:#2563ff;
                    
                    font-weight:800;
                    
                    }
                    
                    
                    
                    .security-row{
                    
                    display:flex;
                    
                    justify-content:center;
                    
                    gap:50px;
                    
                    margin-top:70px;
                    
                    color:#64748b;
                    
                    font-weight:600;
                    
                    }
                    
                    
                    
                    .security-row i{
                    
                    color:#22c55e;
                    
                    margin-right:8px;
                    
                    }
                    
                    
                    
                    @media(max-width:900px){
                    
                    .service-selection{
                    
                    grid-template-columns:1fr;
                    
                    }
                    
                    .security-row{
                    
                    flex-direction:column;
                    
                    align-items:center;
                    
                    }
                    
                    .service-header h1{
                    
                    font-size:36px;
                    
                    }
                    
                    }

                    /* ============================
 PAYMENT SELECTOR
============================ */


.payment-services{

    min-height:100vh;
    
    padding-top:150px;
    
    padding-bottom:80px;
    
    position:relative;
    
    overflow:hidden;
    
    background:
    linear-gradient(
    135deg,
    #f8fbff,
    #ffffff
    );
    
    }
    
    
    
    .floating-bg{
    
    position:absolute;
    
    border-radius:50%;
    
    filter:blur(90px);
    
    }
    
    
    
    .bg-one{
    
    width:500px;
    
    height:500px;
    
    background:#3b82f6;
    
    opacity:.18;
    
    top:-200px;
    
    right:-150px;
    
    }
    
    
    
    .bg-two{
    
    width:400px;
    
    height:400px;
    
    background:#10b981;
    
    opacity:.12;
    
    bottom:-150px;
    
    left:-100px;
    
    }
    
    
    
    
    .payment-title{
    
    text-align:center;
    
    position:relative;
    
    z-index:2;
    
    }
    
    
    
    .mini-badge{
    
    display:inline-flex;
    
    gap:10px;
    
    align-items:center;
    
    padding:10px 22px;
    
    border-radius:50px;
    
    background:white;
    
    box-shadow:
    
    0 10px 30px rgba(0,0,0,.06);
    
    color:#2563ff;
    
    font-weight:700;
    
    }
    
    
    
    .payment-title h1{
    
    margin-top:30px;
    
    font-size:60px;
    
    font-weight:900;
    
    letter-spacing:-2px;
    
    color:#111827;
    
    }
    
    
    
    .payment-title p{
    
    font-size:21px;
    
    color:#64748b;
    
    }
    
    
    
    
    .payment-grid{
    
    margin-top:70px;
    
    display:grid;
    
    grid-template-columns:repeat(2,420px);
    
    justify-content:center;
    
    gap:35px;
    
    position:relative;
    
    z-index:2;
    
    }
    
    
    
    
    
    .payment-box{
    
    
    height:260px;
    
    background:
    
    rgba(255,255,255,.75);
    
    backdrop-filter:blur(20px);
    
    border-radius:35px;
    
    padding:35px;
    
    text-decoration:none;
    
    color:#111827;
    
    border:1px solid rgba(255,255,255,.8);
    
    box-shadow:
    
    0 30px 80px rgba(15,23,42,.08);
    
    position:relative;
    
    overflow:hidden;
    
    transition:.45s;
    
    }
    
    
    
    
    
    .payment-box:before{
    
    content:"";
    
    position:absolute;
    
    width:180px;
    
    height:180px;
    
    background:#eff6ff;
    
    border-radius:50%;
    
    right:-80px;
    
    top:-80px;
    
    transition:.5s;
    
    }
    
    
    
    .payment-box:hover:before{
    
    transform:scale(2);
    
    }
    
    
    
    .payment-box:hover{
    
    
    transform:
    
    translateY(-12px)
    
    rotateX(3deg);
    
    
    box-shadow:
    
    0 45px 100px rgba(37,99,255,.18);
    
    
    }
    
    
    
    
    .icon-wrapper{
    
    
    width:90px;
    
    height:90px;
    
    border-radius:30px;
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    font-size:42px;
    
    color:white;
    
    position:relative;
    
    z-index:2;
    
    }
    
    
    
    
    .electricity{
    
    background:
    
    linear-gradient(
    135deg,
    #2563ff,
    #60a5fa
    );
    
    }
    
    
    .internet{
    
    background:
    
    linear-gradient(
    135deg,
    #7c3aed,
    #c084fc
    );
    
    }
    
    
    .parking{
    
    background:
    
    linear-gradient(
    135deg,
    #10b981,
    #34d399
    );
    
    }
    
    
    .apartment{
    
    background:
    
    linear-gradient(
    135deg,
    #f97316,
    #fb923c
    );
    
    }
    
    
    
    
    
    .card-content{
    
    margin-top:25px;
    
    position:relative;
    
    z-index:2;
    
    }
    
    
    
    .card-content h3{
    
    font-size:30px;
    
    font-weight:850;
    
    }
    
    
    
    .card-content p{
    
    color:#64748b;
    
    font-size:17px;
    
    }
    
    
    
    
    
    .arrow-circle{
    
    position:absolute;
    
    right:35px;
    
    bottom:35px;
    
    width:55px;
    
    height:55px;
    
    border-radius:50%;
    
    background:#2563ff;
    
    color:white;
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    font-size:22px;
    
    transition:.3s;
    
    }
    
    
    
    .payment-box:hover .arrow-circle{
    
    transform:rotate(45deg);
    
    }
    
    
    
    
    .trust-line{
    
    
    display:flex;
    
    justify-content:center;
    
    gap:40px;
    
    margin-top:70px;
    
    color:#64748b;
    
    font-weight:600;
    
    
    }
    
    
    
    .trust-line i{
    
    color:#22c55e;
    
    margin-right:8px;
    
    }

    @media(max-width:900px){


        .payment-grid{
        
        grid-template-columns:1fr;
        
        }
        
        
        .payment-title h1{
        
        font-size:38px;
        
        }
        
        
        
        .trust-line{
        
        flex-direction:column;
        
        align-items:center;
        
        }
        
        
        }

        /* =====================
 MINI FOOTER
===================== */


.mini-footer{

    background:white;
    
    border-top:1px solid #edf2f7;
    
    padding:35px 0;
    
    
    }
    
    
    
    .mini-footer-content{
    
    
    display:flex;
    
    justify-content:space-between;
    
    align-items:center;
    
    
    }
    
    
    
    .footer-brand{
    
    
    display:flex;
    
    align-items:center;
    
    gap:15px;
    
    font-size:26px;
    
    font-weight:800;
    
    color:#182238;
    
    
    }
    
    
    
    .footer-security{
    
    
    display:flex;
    
    gap:25px;
    
    color:#64748b;
    
    font-weight:600;
    
    
    }
    
    
    
    .footer-security i{
    
    
    color:#22c55e;
    
    margin-right:8px;
    
    
    }
    
    
    
    .mini-footer p{
    
    margin:0;
    
    color:#94a3b8;
    
    }
    
    
    
    @media(max-width:900px){
    
    
    .mini-footer-content{
    
    
    flex-direction:column;
    
    gap:25px;
    
    text-align:center;
    
    
    }
    
    
    .footer-security{
    
    flex-direction:column;
    
    }
    
    
    }

    /* =================================
        PAYHUB HEADER
================================= */


.payhub-header{


    position:fixed;
    
    top:20px;
    
    left:0;
    
    width:100%;
    
    z-index:999;
    
    
    }
    
    
    
    .header-inner{
    
    
    height:75px;
    
    background:
    
    rgba(255,255,255,.75);
    
    
    backdrop-filter:
    
    blur(20px);
    
    
    border-radius:24px;
    
    
    border:
    
    1px solid rgba(255,255,255,.8);
    
    
    box-shadow:
    
    
    0 20px 50px rgba(15,23,42,.08);
    
    
    display:flex;
    
    align-items:center;
    
    justify-content:space-between;
    
    
    padding:0 25px;
    
    
    }
    
    
    
    
    /* LOGO */
    
    
    .payhub-logo{
    
    
    display:flex;
    
    align-items:center;
    
    gap:14px;
    
    text-decoration:none;
    
    color:#111827;
    
    font-size:28px;
    
    font-weight:850;
    
    
    }
    
    
    
    .logo-box{
    
    
    width:48px;
    
    height:48px;
    
    
    border-radius:16px;
    
    
    background:
    
    linear-gradient(
    135deg,
    #2563ff,
    #14b8a6
    );
    
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    
    color:white;
    
    
    font-size:24px;
    
    
    box-shadow:
    
    0 15px 35px rgba(37,99,255,.35);
    
    
    }
    
    
    
    
    
    
    /* ACTIONS */
    
    
    .header-actions{
    
    
    display:flex;
    
    align-items:center;
    
    gap:12px;
    
    
    }
    
    
    
    
    .language-btn{
    
    
    height:48px;
    
    padding:0 18px;
    
    border-radius:15px;
    
    
    border:1px solid #e5e7eb;
    
    
    background:white;
    
    
    font-weight:700;
    
    color:#475569;
    
    
    display:flex;
    
    align-items:center;
    
    gap:8px;
    
    
    }
    
    
    
    
    .help-btn{
    
    
    height:48px;
    
    padding:0 22px;
    
    
    border-radius:15px;
    
    
    border:none;
    
    
    background:#eff6ff;
    
    
    color:#444;
    
    
    font-weight:700;
    
    
    display:flex;
    
    align-items:center;
    
    gap:8px;
    
    
    }
    
    
    
    .login-btn{
    
    
    height:48px;
    
    
    padding:0 30px;
    
    
    border-radius:15px;
    
    
    border:none;
    
    
    background:
    
    linear-gradient(
    135deg,
    #2563ff,
    #4da6ff
    );
    
    
    color:white;
    
    
    font-weight:750;
    
    
    box-shadow:
    
    0 15px 35px rgba(37,99,255,.25);
    
    
    transition:.3s;
    
    
    }
    
    
    
    .login-btn:hover{
    
    
    transform:translateY(-3px);
    
    
    }

    @media(max-width:600px){


        .header-inner{
        
        
        padding:0 15px;
        
        
        }
        
        
        
        .payhub-logo span{
        
        
        font-size:22px;
        
        
        }
        
        
        
        .help-btn{
        
        
        display:none;
        
        
        }
        
        
        
        .language-btn{
        
        
        padding:0 12px;
        
        
        }
        
        
        .login-btn{
        
        
        padding:0 18px;
        
        
        }
        
        
        }

        .footer-security{


            display:flex;
            
            gap:25px;
            
            color:#64748b;
            
            font-weight:600;
            
            
            }
            
            
            .footer-security i{
            
            
            color:#22c55e;
            
            margin-right:8px;
            
            
            }

            .footer-links{

                display:flex;
                
                gap:30px;
                
                align-items:center;
                
                }
                
                
                
                .footer-links a{
                
                text-decoration:none;
                
                color:#64748b;
                
                font-weight:600;
                
                display:flex;
                
                align-items:center;
                
                gap:10px;
                
                transition:.3s;
                
                }
                
                
                .footer-links a i{
                
                font-size:18px;
                
                color:#2563ff;
                
                }
                
                
                
                .footer-links a:hover{
                
                color:#2563ff;
                
                transform:translateY(-2px);
                
                }

                @media(max-width:900px){

                    .footer-links{
                    
                    flex-direction:column;
                    
                    gap:15px;
                    
                    }
                    
                    }

                    .language-dropdown{

                        position:relative;
                        
                        }
                        
                        
                        
                        .language-menu{
                        
                        border:none;
                        
                        border-radius:18px;
                        
                        padding:10px;
                        
                        box-shadow:
                        
                        0 20px 50px rgba(0,0,0,.12);
                        
                        margin-top:12px !important;
                        
                        min-width:170px;
                        
                        }
                        
                        
                        
                        .language-menu li a{
                        
                        
                        display:flex;
                        
                        align-items:center;
                        
                        gap:10px;
                        
                        padding:12px 15px;
                        
                        border-radius:12px;
                        
                        text-decoration:none;
                        
                        color:#334155;
                        
                        font-weight:600;
                        
                        transition:.3s;
                        
                        
                        }
                        
                        
                        
                        .language-menu li a:hover{
                        
                        
                        background:#eff6ff;
                        
                        color:#2563ff;
                        
                        
                        }

                        /* ===========================
 MODERN INPUTS
=========================== */


.modern-input{


    height:95px;
    
    background:
    
    rgba(255,255,255,.8);
    
    backdrop-filter:
    
    blur(15px);
    
    
    border:1px solid #e5e7eb;
    
    
    border-radius:26px;
    
    
    display:flex;
    
    
    align-items:center;
    
    
    padding:15px 20px;
    
    
    gap:18px;
    
    
    transition:.35s;
    
    
    position:relative;
    
    
    }
    
    
    
    .modern-input:hover{
    
    
    border-color:#bfdbfe;
    
    
    }
    
    
    
    
    
    .modern-input:focus-within{
    
    
    border-color:#2563ff;
    
    
    box-shadow:
    
    
    0 0 0 5px rgba(37,99,255,.12);
    
    
    transform:translateY(-3px);
    
    
    }
    
    
    
    
    
    
    .input-icon{
    
    
    width:60px;
    
    height:60px;
    
    
    border-radius:20px;
    
    
    background:
    
    linear-gradient(
    135deg,
    #2563ff,
    #60a5fa
    );
    
    
    display:flex;
    
    
    align-items:center;
    
    
    justify-content:center;
    
    
    color:white;
    
    
    font-size:26px;
    
    
    flex-shrink:0;
    
    
    }
    
    
    
    
    
    .input-content{
    
    
    position:relative;
    
    flex:1;
    
    
    }
    
    
    
    .input-content input{
    
    
    width:100%;
    
    
    border:none;
    
    
    outline:none;
    
    
    background:transparent;
    
    
    font-size:20px;
    
    
    font-weight:700;
    
    
    padding-top:12px;
    
    
    color:#111827;
    
    
    }
    
    
    
    
    
    .input-content label{
    
    
    position:absolute;
    
    
    left:0;
    
    
    top:8px;
    
    
    font-size:15px;
    
    
    font-weight:700;
    
    
    color:#64748b;
    
    
    transition:.3s;
    
    
    pointer-events:none;
    
    
    }
    
    
    
    
    
    .input-content input:focus + label,
    .input-content input:valid + label{
    
    
    top:-8px;
    
    
    font-size:12px;
    
    
    color:#2563ff;
    
    
    }
    
    
    
    
    .input-content small{
    
    
    display:block;
    
    
    color:#94a3b8;
    
    
    margin-top:5px;
    
    
    font-size:13px;
    
    
    }
    

    /* ===========================
 BUTTON
=========================== */


.modern-check-btn{


    margin-top:35px;
    
    
    width:100%;
    
    
    height:75px;
    
    
    border:none;
    
    
    border-radius:25px;
    
    
    background:
    
    linear-gradient(
    135deg,
    #2563ff,
    #14b8a6
    );
    
    
    color:white;
    
    
    font-size:20px;
    
    
    font-weight:800;
    
    
    display:flex;
    
    
    justify-content:center;
    
    
    align-items:center;
    
    
    gap:20px;
    
    
    box-shadow:
    
    
    0 25px 50px rgba(37,99,255,.25);
    
    
    transition:.35s;
    
    
    }
    
    
    
    .modern-check-btn div{
    
    
    width:42px;
    
    
    height:42px;
    
    
    background:white;
    
    
    color:#2563ff;
    
    
    border-radius:50%;
    
    
    display:flex;
    
    
    align-items:center;
    
    
    justify-content:center;
    
    
    }
    
    
    
    .modern-check-btn:hover{
    
    
    transform:translateY(-5px);
    
    
    box-shadow:
    
    
    0 35px 70px rgba(37,99,255,.35);
    
    
    }

    .secure-message{


        margin-top:30px;
        
        
        padding:20px;
        
        
        border-radius:22px;
        
        
        background:#ecfdf5;
        
        
        display:flex;
        
        
        align-items:center;
        
        
        gap:15px;
        
        
        }
        
        
        
        .secure-message i{
        
        
        font-size:35px;
        
        color:#16a34a;
        
        
        }
        
        
        .secure-message p{
        
        
        margin:0;
        
        color:#64748b;
        
        
        }

        /* ===============================
 MODERN CHECKOUT
================================ */


.checkout-page{

    background:
    radial-gradient(circle at top,#edf5ff,#fff);
    
    padding-top:150px;
    
    padding-bottom:100px;
    
    }
    
    
    
    .checkout-box,
    .order-box{
    
    background:
    
    rgba(255,255,255,.8);
    
    backdrop-filter:blur(20px);
    
    border-radius:35px;
    
    border:1px solid rgba(255,255,255,.8);
    
    box-shadow:
    
    0 35px 90px rgba(15,23,42,.08);
    
    padding:45px;
    
    }
    
    
    
    .checkout-header{
    
    display:flex;
    
    justify-content:space-between;
    
    align-items:center;
    
    }
    
    
    
    .checkout-header span{
    
    background:#e8f1ff;
    
    color:#2563ff;
    
    padding:8px 18px;
    
    border-radius:50px;
    
    font-weight:700;
    
    }
    
    
    
    .checkout-header h2{
    
    margin-top:20px;
    
    font-size:38px;
    
    font-weight:900;
    
    }
    
    
    
    .secure-icon{
    
    width:65px;
    
    height:65px;
    
    border-radius:22px;
    
    background:#ecfdf5;
    
    color:#16a34a;
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    font-size:30px;
    
    }
    
    
    
    
    /* CARD */
    
    .card-preview{
    
    
    height:220px;
    
    border-radius:30px;
    
    margin:35px 0;
    
    
    padding:30px;
    
    
    background:
    
    linear-gradient(
    135deg,
    #111827,
    #2563ff
    );
    
    
    color:white;
    
    
    box-shadow:
    
    0 30px 60px rgba(37,99,255,.3);
    
    
    }
    
    
    
    .card-top{
    
    display:flex;
    
    justify-content:space-between;
    
    font-size:22px;
    
    font-weight:800;
    
    }
    
    
    
    .card-preview h3{
    
    margin-top:45px;
    
    letter-spacing:5px;
    
    }
    
    
    
    .card-bottom{
    
    display:flex;
    
    gap:60px;
    
    margin-top:25px;
    
    }
    
    
    
    .card-bottom small{
    
    opacity:.7;
    
    }
    
    
    .card-bottom p{
    
    margin:5px 0;
    
    }
    
    
    
    
    
    /* INPUT */
    
    .modern-payment-input{
    
    
    height:70px;
    
    border-radius:22px;
    
    background:white;
    
    border:1px solid #e5e7eb;
    
    display:flex;
    
    align-items:center;
    
    gap:15px;
    
    padding:0 22px;
    
    transition:.3s;
    
    }
    
    
    
    .modern-payment-input:focus-within{
    
    
    border-color:#2563ff;
    
    box-shadow:
    
    0 0 0 5px rgba(37,99,255,.12);
    
    }
    
    
    
    .modern-payment-input i{
    
    color:#2563ff;
    
    font-size:22px;
    
    }
    
    
    
    .modern-payment-input input{
    
    
    border:none;
    
    outline:none;
    
    width:100%;
    
    font-size:17px;
    
    }
    
    
    
    
    /* PAY BUTTON */
    
    
    .premium-pay-button{
    
    
    height:75px;
    
    width:100%;
    
    border:none;
    
    border-radius:25px;
    
    
    margin-top:35px;
    
    
    background:
    
    linear-gradient(
    135deg,
    #2563ff,
    #14b8a6
    );
    
    
    color:white;
    
    font-size:20px;
    
    font-weight:800;
    
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    gap:15px;
    
    
    box-shadow:
    
    0 25px 50px rgba(37,99,255,.3);
    
    
    }
    
    
    
    .premium-pay-button div{
    
    
    background:white;
    
    color:#2563ff;
    
    width:35px;
    
    height:35px;
    
    border-radius:50%;
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    }

    /* =====================================
        CHECKOUT PAGE
===================================== */


.checkout-page{

    min-height:100vh;

    padding-top:150px;

    padding-bottom:100px;

    background:
    radial-gradient(
        circle at top left,
        rgba(37,99,255,.15),
        transparent 35%
    ),
    radial-gradient(
        circle at bottom right,
        rgba(20,184,166,.12),
        transparent 35%
    ),
    #f8fbff;

}



/* =====================================
        CHECKOUT BOX
===================================== */


.checkout-box,
.order-box{


    background:rgba(255,255,255,.85);

    backdrop-filter:blur(20px);

    border-radius:40px;

    padding:45px;

    border:1px solid rgba(255,255,255,.9);

    box-shadow:

    0 35px 90px rgba(15,23,42,.08);


}





.checkout-header{


    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;


}



.checkout-header span{


    display:inline-block;

    background:#eff6ff;

    color:#2563ff;

    padding:8px 18px;

    border-radius:50px;

    font-size:14px;

    font-weight:700;


}



.checkout-header h2{


    margin-top:20px;

    font-size:38px;

    font-weight:900;

    color:#111827;


}



.checkout-header p{


    color:#64748b;

    margin-top:10px;


}



.secure-icon{


    width:70px;

    height:70px;

    border-radius:25px;

    background:#ecfdf5;

    color:#16a34a;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:32px;


}



/* =====================================
        PAYMENT METHODS
===================================== */


.payment-title{


    margin-top:35px;

    font-weight:800;

    color:#111827;


}



.payment-methods{


    display:flex;

    flex-direction:column;

    gap:15px;

    margin-top:25px;


}



.payment-method{


    width:100%;

    min-height:90px;

    background:white;

    border:1px solid #e5e7eb;

    border-radius:25px;

    padding:18px 22px;

    display:flex;

    align-items:center;

    gap:18px;

    cursor:pointer;

    transition:.35s;

    text-align:left;


}



.payment-method:hover{


    transform:translateY(-4px);

    border-color:#2563ff;

    box-shadow:

    0 20px 40px rgba(37,99,255,.10);


}



.payment-method.active{


    border:2px solid #2563ff;

    background:#eff6ff;


}



.payment-method strong{


    display:block;

    color:#111827;

    font-size:17px;


}



.payment-method small{


    display:block;

    margin-top:5px;

    color:#64748b;


}



.method-icon{


    width:58px;

    height:58px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:27px;

    flex-shrink:0;


}



.card-icon{

    background:
    linear-gradient(135deg,#2563ff,#60a5fa);

}


.apple-icon{

    background:#111827;

}


.google-icon{

    background:
    linear-gradient(135deg,#10b981,#34d399);

}


.qr-icon{

    background:
    linear-gradient(135deg,#7c3aed,#a78bfa);

}



.method-check{


    margin-left:auto;

    color:#2563ff;

    font-size:22px;

    display:none;


}



.payment-method.active .method-check{


    display:block;


}



/* =====================================
        CARD PREVIEW
===================================== */


.card-preview{


    margin-top:30px;

    height:230px;

    border-radius:32px;

    padding:30px;


    background:

    linear-gradient(
        135deg,
        #111827,
        #2563ff
    );


    color:white;


    box-shadow:

    0 30px 60px rgba(37,99,255,.30);


    position:relative;

    overflow:hidden;


}



.card-preview:after{


    content:"";

    position:absolute;

    width:250px;

    height:250px;

    background:rgba(255,255,255,.12);

    border-radius:50%;

    right:-80px;

    bottom:-100px;


}



.card-top{


    display:flex;

    justify-content:space-between;

    font-size:22px;

    font-weight:800;


}



.card-preview h3{


    margin-top:50px;

    letter-spacing:5px;

    font-size:28px;


}



.card-bottom{


    display:flex;

    gap:70px;

    margin-top:30px;


}



.card-bottom small{


    opacity:.7;

    font-size:11px;


}



.card-bottom p{


    margin:5px 0;

    font-weight:700;


}





/* =====================================
        INPUTS
===================================== */


.modern-payment-input{


    height:70px;

    margin-top:15px;

    background:white;

    border:1px solid #e5e7eb;

    border-radius:22px;

    display:flex;

    align-items:center;

    gap:15px;

    padding:0 22px;

    transition:.3s;


}



.modern-payment-input:focus-within{


    border-color:#2563ff;

    box-shadow:

    0 0 0 5px rgba(37,99,255,.12);


}



.modern-payment-input i{


    color:#2563ff;

    font-size:22px;


}



.modern-payment-input input{


    width:100%;

    border:none;

    outline:none;

    font-size:17px;

}





/* =====================================
        PAY BUTTON
===================================== */


.premium-pay-button{


    width:100%;

    height:75px;

    margin-top:35px;

    border:none;

    border-radius:25px;


    background:

    linear-gradient(
        135deg,
        #2563ff,
        #14b8a6
    );


    color:white;

    font-size:20px;

    font-weight:800;


    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;


    box-shadow:

    0 25px 50px rgba(37,99,255,.30);


    transition:.35s;


}



.premium-pay-button:hover{


    transform:translateY(-5px);

}




.premium-pay-button div{


    width:38px;

    height:38px;

    border-radius:50%;

    background:white;

    color:#2563ff;

    display:flex;

    align-items:center;

    justify-content:center;


}



/* =====================================
        ORDER SUMMARY
===================================== */


.order-box h3{


    font-size:30px;

    font-weight:900;

    color:#111827;


}



.order-service{


    margin-top:30px;

    background:#f5f9ff;

    border-radius:25px;

    padding:25px;

    display:flex;

    align-items:center;

    gap:20px;


}



.order-icon{


    width:65px;

    height:65px;

    border-radius:20px;

    background:

    linear-gradient(
        135deg,
        #2563ff,
        #60a5fa
    );

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;


}



.order-service h5{


    margin:0;

    font-weight:800;


}



.order-service p{


    margin:5px 0 0;

    color:#64748b;


}



.price-row,
.total-row{


    display:flex;

    justify-content:space-between;

    padding:18px 0;


}



.price-row span{


    color:#64748b;


}



.price-row strong{


    color:#111827;


}



.total-row{


    font-size:20px;

}



.total-row strong{


    font-size:32px;

    color:#2563ff;


}



/* SECURITY */


.payment-security{


    margin-top:30px;

    background:#ecfdf5;

    padding:20px;

    border-radius:22px;

    display:flex;

    gap:15px;


}



.payment-security i{


    color:#16a34a;

    font-size:30px;


}



.payment-security strong{


    color:#166534;


}



.payment-security p{


    margin:5px 0 0;

    color:#64748b;


}



.accepted-cards{


    display:flex;

    gap:20px;

    align-items:center;

    margin-top:25px;

    color:#64748b;


}



.accepted-cards i{


    font-size:30px;

    color:#2563ff;


}



/* =====================================
        MOBILE
===================================== */


@media(max-width:768px){


.checkout-box,
.order-box{


    padding:25px;


}



.checkout-header h2{


    font-size:30px;


}



.checkout-header{


    flex-direction:column;


}



.card-preview{


    height:210px;


}



.card-bottom{


    gap:30px;


}


}
/* ==================================
        MODERN BILL PAGE
================================== */


.bill-page{

    min-height:100vh;
    
    padding-top:150px;
    
    padding-bottom:100px;
    
    
    background:
    
    radial-gradient(
    circle at top,
    #edf5ff,
    white 60%
    );
    
    
    }
    
    
    
    .modern-bill{
    
    
    background:rgba(255,255,255,.85);
    
    backdrop-filter:blur(20px);
    
    
    border-radius:40px;
    
    padding:45px;
    
    
    box-shadow:
    
    0 35px 90px rgba(15,23,42,.08);
    
    
    }
    
    
    
    
    /* SUCCESS */
    
    
    .account-success{
    
    
    display:flex;
    
    align-items:center;
    
    gap:25px;
    
    padding-bottom:35px;
    
    border-bottom:1px solid #edf2f7;
    
    
    }
    
    
    
    .success-icon{
    
    
    width:75px;
    
    height:75px;
    
    border-radius:50%;
    
    background:#dcfce7;
    
    color:#16a34a;
    
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    font-size:38px;
    
    
    }
    
    
    
    .account-success span{
    
    
    background:#ecfdf5;
    
    color:#16a34a;
    
    padding:7px 15px;
    
    border-radius:50px;
    
    font-weight:700;
    
    
    }
    
    
    
    .account-success h2{
    
    
    margin-top:12px;
    
    font-weight:900;
    
    color:#111827;
    
    
    }
    
    
    
    /* CUSTOMER */
    
    
    .customer-card{
    
    
    margin-top:35px;
    
    background:#f5f9ff;
    
    padding:30px;
    
    border-radius:30px;
    
    
    display:flex;
    
    justify-content:space-between;
    
    align-items:center;
    
    
    }
    
    
    
    .customer-info small{
    
    
    color:#64748b;
    
    }
    
    
    
    .customer-info h3{
    
    
    font-size:30px;
    
    font-weight:900;
    
    margin:8px 0;
    
    
    }
    
    
    
    .customer-info p{
    
    
    color:#64748b;
    
    margin:0;
    
    
    }
    
    
    
    .service-badge{
    
    
    background:
    
    linear-gradient(
    135deg,
    #2563ff,
    #60a5fa
    );
    
    
    color:white;
    
    padding:15px 25px;
    
    border-radius:20px;
    
    font-weight:800;
    
    display:flex;
    
    gap:10px;
    
    align-items:center;
    
    
    }
    
    
    
    
    
    /* DETAILS */
    
    
    .bill-details{
    
    
    margin-top:35px;
    
    display:flex;
    
    flex-direction:column;
    
    gap:15px;
    
    
    }
    
    
    
    .detail-item{
    
    
    display:flex;
    
    align-items:center;
    
    gap:20px;
    
    background:white;
    
    padding:20px;
    
    border-radius:22px;
    
    border:1px solid #edf2f7;
    
    
    }
    
    
    
    .detail-icon{
    
    
    width:55px;
    
    height:55px;
    
    border-radius:18px;
    
    background:#eff6ff;
    
    color:#2563ff;
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    font-size:24px;
    
    
    }
    
    
    
    .detail-item small{
    
    
    display:block;
    
    color:#64748b;
    
    
    }
    
    
    
    .detail-item strong{
    
    
    font-size:18px;
    
    color:#111827;
    
    
    }
    
    
    
    
    
    /* AMOUNT */
    
    
    .amount-card{
    
    
    margin-top:35px;
    
    background:#f8fafc;
    
    padding:30px;
    
    border-radius:30px;
    
    
    }
    
    
    
    .amount-card label{
    
    
    font-weight:800;
    
    }
    
    
    .amount-field{
    
    
    margin-top:15px;
    
    height:80px;
    
    background:white;
    
    border-radius:25px;
    
    display:flex;
    
    align-items:center;
    
    padding:0 25px;
    
    font-size:32px;
    
    font-weight:900;
    
    color:#2563ff;
    
    
    }
    
    
    
    .amount-field input{
    
    
    border:none;
    
    outline:none;
    
    width:100%;
    
    font-size:32px;
    
    font-weight:900;
    
    
    }
    
    
    
    .amount-card p{
    
    
    margin:15px 0 0;
    
    color:#64748b;
    
    
    }
    
    
    
    
    /* BUTTON */
    
    
    .modern-checkout-btn{
    
    
    margin-top:35px;
    
    height:75px;
    
    width:100%;
    
    border:none;
    
    border-radius:25px;
    
    
    background:
    
    linear-gradient(
    135deg,
    #2563ff,
    #14b8a6
    );
    
    
    color:white;
    
    font-size:20px;
    
    font-weight:800;
    
    
    display:flex;
    
    justify-content:center;
    
    align-items:center;
    
    gap:15px;
    
    
    box-shadow:
    
    0 25px 50px rgba(37,99,255,.3);
    
    
    }
    
    
    
    /* SECURITY */
    
    
    .secure-payment{
    
    
    margin-top:30px;
    
    background:#ecfdf5;
    
    padding:20px;
    
    border-radius:22px;
    
    display:flex;
    
    gap:15px;
    
    
    }
    
    
    
    .secure-payment i{
    
    
    font-size:30px;
    
    color:#16a34a;
    
    
    }
    
    
    
    .secure-payment p{
    
    
    margin:5px 0 0;
    
    color:#64748b;
    
    
    }
    
    
    
    
    
    @media(max-width:768px){
    
    
    .customer-card{
    
    flex-direction:column;
    
    align-items:flex-start;
    
    gap:20px;
    
    }
    
    
    .modern-bill{
    
    padding:25px;
    
    }
    
    
    }