/* =========================================================
   QQPAY PREMIUM WEBSITE CSS
   Domain: qqpay.co.in
   Theme: Black + Gold + White
========================================================= */

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

html{
    scroll-behavior:smooth;
    scroll-padding-top:90px;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#f7f7f7;
    color:#202020;
    line-height:1.7;
    overflow-x:hidden;
}

img{
    max-width:100%;
    height:auto;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

button{
    font-family:inherit;
}


/* =========================================================
   SITE WRAPPER
========================================================= */

.site-wrapper{
    width:100%;
    min-height:100vh;
    background:#f7f7f7;
}


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

.header{
    position:sticky;
    position:-webkit-sticky;
    top:0;
    left:0;
    width:100%;
    z-index:9999;
    background:#050505;
    border-bottom:1px solid rgba(212,175,55,.45);
    box-shadow:0 4px 18px rgba(0,0,0,.15);
}

.header-inner{
    width:100%;
    max-width:1200px;
    min-height:72px;
    margin:auto;
    padding:10px 22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}


/* =========================================================
   BRAND
========================================================= */

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    color:#fff;
    min-width:0;
}

.brand-logo{
    width:50px;
    height:50px;
    border-radius:50%;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#111;
    border:1px solid rgba(212,175,55,.7);
    box-shadow:0 0 12px rgba(212,175,55,.18);
}

.brand-logo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.brand-name{
    font-size:24px;
    font-weight:800;
    letter-spacing:.5px;
    color:#f1c75b;
}


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

.menu-button{
    width:46px;
    height:44px;
    padding:8px;
    border:1px solid rgba(212,175,55,.55);
    border-radius:8px;
    background:#111;
    cursor:pointer;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;

    transition:.25s ease;
}

.menu-button span{
    width:24px;
    height:2px;
    display:block;
    background:#f1c75b;
    border-radius:5px;
    transition:.25s ease;
}

.menu-button:hover{
    background:#181818;
    border-color:#d4af37;
}

.menu-button.active span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
}

.menu-button.active span:nth-child(2){
    opacity:0;
}

.menu-button.active span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
}


/* =========================================================
   SLIDE MENU
========================================================= */

.menu{
    position:fixed;
    top:72px;
    right:-320px;

    width:300px;
    max-width:85vw;
    height:calc(100vh - 72px);

    padding:22px 18px;

    background:#080808;
    border-left:1px solid rgba(212,175,55,.45);
    box-shadow:-8px 0 30px rgba(0,0,0,.25);

    overflow-y:auto;

    display:flex;
    flex-direction:column;
    gap:4px;

    transition:right .3s ease;
}

.menu.show{
    right:0;
}

.menu a{
    display:block;
    padding:13px 15px;
    border-radius:8px;

    color:#eeeeee;
    font-size:15px;
    font-weight:600;

    border:1px solid transparent;
    transition:.2s ease;
}

.menu a:hover,
.menu a.active{
    color:#f1c75b;
    background:#151515;
    border-color:rgba(212,175,55,.3);
}


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

.hero{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:55px 22px 50px;

    text-align:center;

    background:#fff;
    border-bottom:1px solid #e6e6e6;
}

.hero-logo{
    width:145px;
    height:145px;
    margin:0 auto 24px;

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

    border-radius:50%;
    overflow:hidden;

    background:#080808;
    border:3px solid #d4af37;

    box-shadow:
        0 8px 30px rgba(0,0,0,.15),
        0 0 20px rgba(212,175,55,.18);
}

.hero-logo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.hero h1{
    max-width:900px;
    margin:0 auto 16px;

    color:#111;
    font-size:clamp(30px,5vw,48px);
    line-height:1.2;
    font-weight:800;
}

.hero p{
    max-width:800px;
    margin:0 auto 28px;

    color:#555;
    font-size:17px;
}


/* =========================================================
   BUTTONS
========================================================= */

.hero-buttons{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:46px;
    padding:11px 22px;

    border-radius:8px;

    font-size:15px;
    font-weight:700;

    cursor:pointer;
    transition:.25s ease;
}

.btn-primary{
    color:#111;
    background:linear-gradient(
        135deg,
        #f7d774,
        #d4af37
    );

    border:1px solid #c59d24;
    box-shadow:0 5px 15px rgba(212,175,55,.2);
}

.btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(212,175,55,.3);
}

.btn-outline{
    color:#111;
    background:#fff;
    border:1px solid #c7a63b;
}

.btn-outline:hover{
    background:#111;
    color:#f1c75b;
    transform:translateY(-2px);
}

.btn-download{
    color:#fff;
    background:#111;
    border:1px solid #111;
}

.btn-download:hover{
    color:#111;
    background:#f1c75b;
    border-color:#d4af37;
    transform:translateY(-2px);
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.content{
    width:100%;
    max-width:1100px;
    margin:0 auto;
    padding:30px 18px 60px;
}


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

.card{
    background:#fff;

    margin-bottom:24px;
    padding:30px;

    border:1px solid #e3e3e3;
    border-radius:12px;

    box-shadow:0 5px 20px rgba(0,0,0,.045);
}

.card h2{
    position:relative;

    margin-bottom:17px;
    padding-bottom:12px;

    color:#111;
    font-size:28px;
    line-height:1.3;
}

.card h2::after{
    content:"";

    position:absolute;
    left:0;
    bottom:0;

    width:55px;
    height:3px;

    border-radius:5px;
    background:#d4af37;
}

.card h3{
    color:#171717;
}

.card p{
    margin-bottom:14px;
    color:#444;
}

.card ul,
.card ol{
    margin:12px 0 18px;
    padding-left:24px;
}

.card li{
    margin-bottom:8px;
    color:#444;
}


/* =========================================================
   INFO BOX
========================================================= */

.info-box{
    margin:20px 0;
    padding:17px 19px;

    background:#fffaf0;
    border-left:4px solid #d4af37;
    border-radius:7px;

    color:#444;
}

.info-box strong{
    color:#111;
}


/* =========================================================
   TABLE
========================================================= */

.table-wrap{
    width:100%;
    overflow-x:auto;
    margin-top:20px;
}

table{
    width:100%;
    min-width:600px;
    border-collapse:collapse;
    background:#fff;
}

th,
td{
    padding:13px 15px;
    text-align:left;
    border:1px solid #e2e2e2;
}

th{
    color:#111;
    background:#f3ead0;
    font-weight:800;
}

td{
    color:#444;
}


/* =========================================================
   FAQ
========================================================= */

.faq-item{
    margin:15px 0;

    padding:18px 20px;

    background:#fafafa;
    border:1px solid #e6e6e6;
    border-radius:9px;

    transition:.2s ease;
}

.faq-item:hover{
    border-color:#d4af37;
    box-shadow:0 4px 14px rgba(0,0,0,.05);
}

.faq-question{
    margin-bottom:8px;
    color:#151515 !important;
    font-size:18px;
}

.faq-answer{
    margin:0 !important;
    color:#555 !important;
}


/* =========================================================
   TAGS
========================================================= */

.tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:20px;
}

.tag{
    display:inline-block;

    padding:8px 14px;

    color:#222;
    background:#f8f1dc;

    border:1px solid #d9bd67;
    border-radius:20px;

    font-size:14px;
    font-weight:600;

    transition:.2s ease;
}

.tag:hover{
    color:#fff;
    background:#111;
    border-color:#111;
}


/* =========================================================
   REFER CODE BOX
========================================================= */

.refer-box{
    max-width:600px;
    margin:22px auto;
    padding:22px;

    background:#0b0b0b;

    border:1px solid #d4af37;
    border-radius:12px;

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

.refer-label{
    display:block;
    margin-bottom:10px;

    text-align:center;

    color:#f1c75b;
    font-size:15px;
    font-weight:700;
}

.refer-code{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
}

#referCode{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:130px;
    padding:10px 18px;

    color:#111;
    background:#fff;

    border-radius:7px;

    font-size:18px;
    font-weight:800;
    letter-spacing:1px;
}

.copy-btn{
    min-height:42px;
    padding:9px 17px;

    border:1px solid #d4af37;
    border-radius:7px;

    color:#111;
    background:#f1c75b;

    font-weight:800;
    cursor:pointer;

    transition:.2s ease;
}

.copy-btn:hover{
    background:#fff;
}


/* =========================================================
   PROS / SAFETY
========================================================= */

.pros{
    list-style:none;
    padding-left:0 !important;
}

.pros li{
    position:relative;
    padding:10px 12px 10px 36px;

    margin-bottom:9px;

    background:#fafafa;
    border:1px solid #e8e8e8;
    border-radius:7px;
}

.pros li::before{
    content:"✓";

    position:absolute;
    left:12px;
    top:8px;

    color:#b28b16;
    font-weight:900;
    font-size:18px;
}


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

.footer{
    width:100%;

    padding:28px 18px;

    text-align:center;

    color:#cfcfcf;
    background:#080808;

    border-top:1px solid rgba(212,175,55,.4);

    font-size:14px;
}

.footer strong{
    color:#f1c75b;
}

.footer a{
    color:#ddd;
    transition:.2s ease;
}

.footer a:hover{
    color:#f1c75b;
}


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

@media(max-width:768px){

    .header-inner{
        min-height:66px;
        padding:8px 15px;
    }

    .brand-logo{
        width:44px;
        height:44px;
    }

    .brand-name{
        font-size:21px;
    }

    .menu{
        top:66px;
        height:calc(100vh - 66px);
    }

    .hero{
        padding:40px 16px 38px;
    }

    .hero-logo{
        width:120px;
        height:120px;
        margin-bottom:20px;
    }

    .hero h1{
        font-size:30px;
    }

    .hero p{
        font-size:15px;
    }

    .hero-buttons{
        flex-direction:column;
        width:100%;
    }

    .btn{
        width:100%;
        max-width:340px;
    }

    .content{
        padding:20px 12px 45px;
    }

    .card{
        padding:21px 17px;
        border-radius:10px;
        margin-bottom:18px;
    }

    .card h2{
        font-size:23px;
    }

    .faq-question{
        font-size:17px;
    }

    .refer-box{
        padding:18px 12px;
    }

    #referCode{
        min-width:115px;
    }

}


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

@media(max-width:480px){

    .brand-name{
        font-size:19px;
    }

    .brand-logo{
        width:40px;
        height:40px;
    }

    .menu-button{
        width:43px;
        height:41px;
    }

    .hero h1{
        font-size:26px;
    }

    .hero-logo{
        width:105px;
        height:105px;
    }

    .card{
        padding:18px 14px;
    }

    .card h2{
        font-size:21px;
    }

    .info-box{
        padding:14px;
    }

    .refer-code{
        flex-direction:column;
    }

    #referCode,
    .copy-btn{
        width:100%;
    }

}


/* =========================================================
   LARGE SCREEN
========================================================= */

@media(min-width:1200px){

    .hero{
        padding-top:70px;
        padding-bottom:65px;
    }

    .content{
        padding-top:40px;
    }

    .card{
        padding:34px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

:focus-visible{
    outline:3px solid rgba(212,175,55,.55);
    outline-offset:3px;
}


/* =========================================================
   REDUCE MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        transition:none !important;
        animation:none !important;
    }

}