/*
=========================================================
Revazonix Technologies
Digital Access Pin
Version : 1.0
=========================================================
*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#f5f7fb;
    font-family:Arial, Helvetica, sans-serif;
    color:#333;
}

/* ===================================
   Mobile Container
=================================== */

.mobile-wrapper{

    max-width:420px;

    min-height:100vh;

    margin:auto;

    background:#ffffff;

    padding:20px;

    box-shadow:0 0 25px rgba(0,0,0,.12);

}

/* ===================================
   Header
=================================== */

.top-header{
    position:relative;
}

.company-logo{

    width:90px;

    height:90px;

    object-fit:contain;

}

.company-name{

    font-weight:bold;

    color:#0d6efd;

    margin-top:15px;

}

.company-tagline{

    color:#198754;

    font-size:14px;

}

/* ===================================
   LIGHT & DARK THEME
=================================== */

/* Main container */
.container{
    position:relative;
}

/* Theme Toggle */
.theme-toggle{
    position:absolute;
    top:15px;
    right:15px;

    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;
    background:#fff;
    border:1px solid #ddd;

    cursor:pointer;

    z-index:99999;

    pointer-events:auto;
}



.theme-toggle::before{
    content:'';
    position:absolute;

    width:24px;
    height:24px;
    border-radius:50%;

    background:#fff;

    left:4px;
    top:3px;

    transition:.35s ease;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
}

.theme-toggle i{
    width:24px;
    text-align:center;
    font-size:18px;
    z-index:2;
}

.theme-toggle .bi-sun-fill{
    color:#f59e0b;
}

.theme-toggle .bi-moon-fill{
    color:#64748b;
}

/* Dark mode position */
body.dark .theme-toggle{
    background:#1f2937;
    border-color:#374151;
}

body.dark .theme-toggle::before{
    transform:translateX(26px);
    background:#111827;
}

body.dark .bi-sun-fill{
    color:#9ca3af;
}

body.dark .bi-moon-fill{
    color:#facc15;
}





:root{
    --bg:#f4f7fb;
    --card:#ffffff;
    --text:#222;
}

body{
    background:var(--bg);
    color:var(--text);
}

.card{
    background:var(--card);
}

body.dark{
    --bg:#0f172a;
    --card:#1e293b;
    --text:#f8fafc;
}



/* ===================================
   Language
=================================== */

.language-box{

    display:flex;

    justify-content:center;

    gap:10px;

}

.language-btn{

    min-width:90px;

}

/* ===================================
   Hero
=================================== */

.hero-card{

    border:none;

    border-radius:15px;

}

.hero-icon{

    font-size:60px;

}

.hero-title{

    color:#0d6efd;

    font-weight:bold;

}

.hero-text{

    color:#666;

    line-height:1.7;

}

/* ===================================
   Section Title
=================================== */

.section-title{

    color:#0d6efd;

    margin-bottom:20px;

    font-weight:bold;

}

/* ===================================
   Benefits
=================================== */

.benefit-list{

    list-style:none;

    padding-left:0;

}

.benefit-list li{

    margin-bottom:14px;

    line-height:1.6;

}

/* ===================================
   Cards
=================================== */

.card{

    border-radius:15px;

    border:none;

}

.card-body{

    padding:22px;

}

/* ===================================
   Forms
=================================== */

.form-label{

    font-weight:600;

}

.form-control{

    border-radius:10px;

    height:48px;

}

.form-control:focus{

    box-shadow:none;

    border-color:#198754;

}

/* ===================================
   Plan Cards
=================================== */

.form-check-input{

    width:22px;

    height:22px;

    margin-top:3px;

}

.form-check-label{

    margin-left:8px;

}

/* ===================================
   Price Summary
=================================== */

.price-summary{

    background:#f8f9fa;

    border-radius:12px;

    padding:18px;

}

.price-summary h3{

    color:#198754;

    font-weight:bold;

}

/* ===================================
   Button
=================================== */

.btn-success{

    background:#198754;

    border:none;

    height:55px;

    border-radius:12px;

    font-size:18px;

    font-weight:bold;

}

.btn-success:hover{

    background:#157347;

}

/* ===================================
   Support Buttons
=================================== */

.btn-outline-primary,
.btn-outline-success{

    border-radius:10px;

    height:48px;

}

/* ===================================
   Social Buttons
=================================== */

.btn-outline-primary,
.btn-outline-danger,
.btn-outline-info{

    width:45px;

    height:45px;

    border-radius:50%;

    display:inline-flex;

    align-items:center;

    justify-content:center;

}

/* ===================================
   Footer
=================================== */

footer{

    color:#777;

    font-size:14px;

}

/* ===================================
   Links
=================================== */

a{

    text-decoration:none;

}

/* ===================================
   Responsive
=================================== */

@media(max-width:768px){

.mobile-wrapper{

    width:100%;

    max-width:100%;

    box-shadow:none;

    padding:15px;

}

.company-logo{

    width:80px;

    height:80px;

}

.hero-title{

    font-size:28px;

}

.hero-text{

    font-size:15px;

}

}

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

@media(min-width:769px){

body{

    padding:40px;

}

.mobile-wrapper{

    border-radius:20px;

}

}

/* ===================================
   Smooth Animation
=================================== */

.card{

    transition:.3s;

}

.card:hover{

    transform:translateY(-3px);

}

/* ===================================
   Loader (Future)
=================================== */

.loader{

    display:none;

}

/* ===================================
   Utilities
=================================== */

.text-green{

    color:#198754;

}

.text-blue{

    color:#0d6efd;

}

.bg-green{

    background:#198754;

}

.bg-blue{

    background:#0d6efd;

}