:root{--km-danger:#741e03;--km-secondary:#fde400;--km-bg:#F8F9FA;--km-radius:15px}
body{background:var(--km-bg);font-family:'Segoe UI',system-ui,-apple-system,sans-serif;color:#212529}
.km-navbar{background:linear-gradient(90deg,var(--km-danger),#ff0000)}
.km-navbar .nav-link{border-radius: 10px; border-width: 2px; border-style: solid; border-color: #ffe600; color:white !important;font-weight:500}
.km-navbar .nav-link:hover{border-radius: 10px; background-color: #ffe75c; color:#7e0000!important}
.km-main{min-height:calc(100vh - 260px)}
.km-footer{background:linear-gradient(90deg,#680202,var(--km-danger))}
.card{border-radius:var(--km-radius);border:0;box-shadow:0 4px 20px #4b007c0f;transition:transform .25s,box-shadow .25s;animation:fadeIn .4s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 32px #5005ff26}
.btn{border-radius:10px;font-weight:500;transition:all .2s}
.btn-primary{background-color:rgb(255, 136, 0);border-color:white}
.btn-primary:hover{background:red;border-color:red;transform:translateY(-1px)}
.btn-success{background-color:rgb(255, 196, 0); color: rgb(90, 0, 0); }
.btn-success:hover{background-color: red; color: yellow;}
.form-control,.form-select{border-radius:10px;padding:.6rem .9rem}
.form-control:focus,.form-select:focus{border-color:white;box-shadow:0 0 0 .2rem #00000026}
.km-hero{background:linear-gradient(135deg,#ffae00 0%,#fbff00 100%);color:#470000;border-radius:var(--km-radius);padding:4rem 2rem;animation:fadeIn .6s ease}
.km-hero h1{font-weight:700;font-size:2.6rem}
.km-section-title{font-weight:700;color:var(--km-danger);margin-bottom:1.5rem}
.km-badge-verified{background:var(--km-secondary);color:#fff;font-size:.7rem;padding:.25rem .55rem;border-radius:20px}
.km-profile-card img{border-radius:var(--km-radius) var(--km-radius) 0 0;height:260px;width:100%;object-fit:cover}
.km-plan{border:2px solid transparent;transition:.3s}
.km-plan.featured{border-color:var(--km-danger);transform:scale(1.03)}
.km-plan .price{font-size:2.2rem;font-weight:700;color:var(--km-danger)}
.km-step-nav .step{display:inline-block;padding:.4rem .8rem;background:#e9ecef;border-radius:20px;margin:.2rem;font-size:.85rem}
.km-step-nav .step.active{background:var(--km-danger);color:#fff}
.km-spinner{position:fixed;inset:0;background:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;z-index:9999}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fade-in{animation:fadeIn .4s ease}
@media(max-width:768px){.km-hero{padding:2rem 1rem}.km-hero h1{font-size:1.8rem}}

.horo{

    display: block;
    height: 500px;
}


.horoscope-table{
    max-width:500px;
    margin:auto;
}

.horoscope-table td{
    width:90px;
    height:90px;
    vertical-align:middle;
    padding:2px;
}

.horoscope-table input{
    text-align:center;
    font-weight:bold;
    border:none;
    height:80px;
}

.horoscope-table input:focus{
    box-shadow:none;
}






/* South Indian Horoscope */
.horoscope-title{
    background:#a50b00;
    color:#fff;
    padding:10px;
    text-align:center;
    border-radius:6px;
    margin-bottom:15px;
}

.horoscope-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
}

.rasi-box label{
    display:block;
    font-size:14px;
    margin-bottom:3px;
    
}

@media(max-width:768px){
.horoscope-grid{
grid-template-columns:repeat(2,1fr);
}
}


.register-form
{
    border-radius: 50px;
    font-weight:700 !important;
    background-color: #fff89c;
    }

.register-form label
{
    color:#696969 !important;
}




/* ===========================
   Floating WhatsApp Button
=========================== */

.whatsapp-float{
    position:fixed;
    right:20px;
    bottom:20px;

    width:65px;
    height:65px;

    background:#25D366;
    color:#fff;

    border-radius:50%;
    text-align:center;
    line-height:65px;
    font-size:34px;

    text-decoration:none;

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

    z-index:9999;

    transition:.3s;
}

.whatsapp-float:hover{
    background:#128C7E;
    color:#fff;
    transform:scale(1.1);
}


/* ===========================
   Floating Email Button
=========================== */

.email-float{
    position:fixed;
    right:20px;
    bottom:100px;

    width:65px;
    height:65px;

    background:#b60202;
    color:#fff;

    border-radius:50%;
    text-align:center;
    line-height:65px;
    font-size:30px;

    text-decoration:none;

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

    z-index:9999;

    transition:.3s;
}

.email-float:hover{
    background:#980808;
    color:#fff;
    transform:scale(1.1);
}


/* ===========================
   Mobile View
=========================== */

@media (max-width:768px){

.whatsapp-float{

    width:50px;
    height:50px;

    line-height:50px;

    font-size:26px;

    right:12px;
    bottom:12px;

}

.email-float{

    width:50px;
    height:50px;

    line-height:50px;

    font-size:22px;

    right:12px;
    bottom:72px;

}

}


/* ===========================
   Desktop View
=========================== */

@media (min-width:769px){

.whatsapp-float{

    width:70px;
    height:70px;

    line-height:70px;

    font-size:36px;

}

.email-float{

    width:70px;
    height:70px;

    line-height:70px;

    font-size:32px;

}

}