/* =========================================================
   GLOBAL
========================================================= */

:root{
    --primary:#4480F2;
    --primary-dark:#2865d4;
    --primary-light:#eaf2ff;

    --dark:#172f40;
    --text:#20252b;
    --muted:#747c85;

    --bg:#f1f4f9;
    --white:#ffffff;

    --radius:14px;
    --shadow:0 5px 18px rgba(30,50,80,.12);
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Poppins",sans-serif;
    background:var(--bg);
    color:var(--text);
}


/* =========================================================
   TOP BAR
========================================================= */

.topbar{
    height:30px;
    background:var(--primary);
    color:#fff;

    padding:0 3%;

    display:flex;
    align-items:center;

    font-size:11px;
}

.topbar-login{
    margin-left:25px;
    cursor:pointer;
}

.topbar-right{
    margin-left:auto;

    display:flex;
    align-items:center;
}

.topbar-right a{
    display:flex;
    align-items:center;
}

.topbar-right img{
    width:18px;
    height:18px;

    display:block;

    cursor:pointer;

    transform-origin:center;

    animation:ytIdle 1.8s ease-in-out infinite;
}

.topbar-right:hover img{
    animation:ytHover .55s ease-in-out infinite;
}

@keyframes ytIdle{
    0%,
    100%{
        transform:scale(1);
        filter:drop-shadow(0 0 0 transparent);
    }

    50%{
        transform:scale(1.14);
        filter:drop-shadow(0 0 5px rgba(246,28,13,.75));
    }
}

@keyframes ytHover{
    0%,
    100%{
        transform:scale(1.1) rotate(0deg);
    }

    25%{
        transform:scale(1.28) rotate(-14deg);
    }

    50%{
        transform:scale(1.16) rotate(12deg);
    }

    75%{
        transform:scale(1.28) rotate(-8deg);
    }
}


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

.header{
    height:88px;
    background:#fff;

    padding:0 3%;

    display:flex;
    align-items:center;
    justify-content:space-between;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
}

.brand-icon{
    width:48px;
    height:48px;

    border-radius:12px;

    background:var(--primary-light);

    color:var(--primary);

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

    font-size:21px;
    font-weight:700;
}

.brand-name{
    font-size:28px;
    line-height:1;
    font-weight:700;
}

.brand-name span{
    color:var(--primary);
}

.brand-tagline{
    margin-top:5px;

    font-size:11px;
    color:var(--muted);
}

.header-device{
    font-size:34px;
}


/* =========================================================
   NAVIGATION
========================================================= */

.navbar{
    background:var(--primary);

    position:relative;

    z-index:40;
}

.nav-inner{
    min-height:58px;

    padding:0 3%;

    display:flex;
    align-items:center;
}

.nav-links{
    height:58px;

    display:flex;
}

.nav-links a{
    color:#fff;
    text-decoration:none;

    padding:0 20px;

    display:flex;
    align-items:center;

    font-size:12px;
    font-weight:600;
}

.nav-links > a:hover,
.nav-links > a.active,
.nav-drop-toggle:hover,
.nav-item.open > .nav-drop-toggle{
    background:rgba(0,0,0,.14);
}

.nav-item{
    position:relative;

    display:flex;
    align-items:center;
}

.nav-drop-toggle{
    cursor:pointer;
}

.nav-submenu{
    display:none;

    position:absolute;

    top:58px;
    left:0;

    min-width:210px;

    flex-direction:column;

    background:#fff;

    box-shadow:0 10px 24px rgba(20,40,80,.16);

    z-index:1300;

    overflow:hidden;

    border-radius:0 0 10px 10px;
}

.nav-item:hover .nav-submenu,
.nav-item.open .nav-submenu{
    display:flex;
}

.nav-submenu a{
    color:var(--text);

    min-height:42px;

    padding:0 16px;

    font-size:12px;

    font-weight:600;
}

.nav-submenu a:hover,
.nav-submenu a.active{
    background:var(--primary-light);

    color:var(--primary);
}

.search{
    margin-left:auto;

    display:flex;
}

.search input{
    width:180px;
    height:34px;

    border:0;
    outline:none;

    padding:0 14px;

    border-radius:20px 0 0 20px;

    font-family:inherit;
}

.search button{
    width:42px;
    height:34px;

    border:0;

    border-radius:0 20px 20px 0;

    background:#245fc9;
    color:#fff;

    cursor:pointer;
}

.mobile-logo,
.menu-button{
    display:none;
}


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

.main{
    padding:20px 3% 55px;
}

.products{
    max-width:1500px;
    margin:auto;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;
}


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

.card{
    min-height:245px;

    position:relative;

    overflow:hidden;

    background:#fff;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    display:flex;
    flex-direction:column;

    cursor:pointer;

    transition:.25s;
}

.card:hover{
    transform:translateY(-4px);

    box-shadow:
        0 12px 30px rgba(30,50,80,.16);
}

.card-body{
    flex:1;

    position:relative;
    z-index:2;

    padding:19px;
}

.card-body h2{
    color:var(--primary);

    font-size:21px;
    line-height:1.15;

    margin-bottom:9px;
}

.card-body h3{
    font-size:20px;
}

.card-body small{
    color:#777;
    font-size:10px;
}

.card-body p{
    font-size:11px;
}

.card-body ul{
    padding-left:17px;
}

.card-body li{
    font-size:10px;
    line-height:1.3;

    margin:4px 0;
}

.price{
    margin-top:8px;

    font-size:23px;

    font-weight:700;
}

.price small{
    display:block;

    font-size:9px;

    font-weight:400;
}


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

.sms{
    background:
        radial-gradient(
            circle at 100% 80%,
            #dceaff,
            transparent 38%
        ),
        #fff;
}

.wa-api{
    background:
        radial-gradient(
            circle at 100% 75%,
            #e5f9ce,
            transparent 40%
        ),
        #fff;
}

.matka{
    background:
        radial-gradient(
            circle at 100% 75%,
            #ffe1e1,
            transparent 40%
        ),
        #fff;
}

.jantri{
    background:
        radial-gradient(
            circle at 100% 80%,
            #fff0b8,
            transparent 42%
        ),
        #fff;
}

.cricket{
    background:
        radial-gradient(
            circle at 100% 80%,
            #e6f8d8,
            transparent 40%
        ),
        #fff;
}

.dpboss{
    background:
        radial-gradient(
            circle at 0% 50%,
            #d8f5f7,
            transparent 42%
        ),
        #fff;
}

.lottery{
    background:
        radial-gradient(
            circle at 100% 90%,
            #f0dcff,
            transparent 40%
        ),
        #fff;
}

.teer{
    background:
        radial-gradient(
            circle at 0% 0%,
            #e5f9ce,
            transparent 40%
        ),
        #fff;
}


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

.visual{
    position:absolute;

    right:10px;
    bottom:48px;

    width:105px;
    height:130px;

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

    font-size:72px;

    z-index:1;
}

.visual.large{
    font-size:80px;
}

.ai-person{
    position:absolute;

    right:0;
    bottom:32px;

    font-size:105px;
}


/* =========================================================
   IOS / ANDROID
========================================================= */

.platforms{
    position:absolute;

    right:18px;
    bottom:50px;

    display:flex;
    flex-direction:column;

    gap:10px;
}

.platform{
    width:58px;
    height:58px;

    border:1px solid #888;

    background:#fff;

    border-radius:50%;

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

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


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

.card-footer{
    min-height:47px;

    position:relative;
    z-index:5;

    padding:7px 14px;

    background:rgba(248,249,251,.94);

    display:flex;
    align-items:center;

    gap:7px;

    flex-wrap:wrap;
}

.btn{
    border:0;

    border-radius:18px;

    padding:7px 12px;

    font-family:inherit;

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

    cursor:pointer;

    white-space:nowrap;
}

.btn-dark{
    background:#303942;
    color:#fff;
}

.btn-blue{
    background:var(--primary);
    color:#fff;
}

.btn-green{
    background:#20a849;
    color:#fff;
}

.btn-cyan{
    background:#19a9bd;
    color:#fff;
}

.btn-outline{
    background:#fff;

    color:var(--primary);

    border:1px solid var(--primary);
}


/* =========================================================
   SUPPORT
========================================================= */

.support{
    min-height:0;

    padding:8px 5% 0;

    background: linear-gradient(120deg, #dee9ff, #ffffff);

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

    gap:28px;
}

.support-avatar{
    flex-shrink:0;

    display:flex;
    align-items:flex-end;

    line-height:0;
}

.support-avatar img{
    height:140px;

    width:auto;

    display:block;

    object-fit:contain;

    object-position:bottom;

    margin-bottom:0;
}

.support-circle,
.support-info,
.contact{
    margin-bottom:12px;
}

.support-circle{
    flex-shrink:0;

    width:92px;
    height:92px;

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

.support-circle img{
    width:100%;
    height:100%;

    display:block;

    object-fit:contain;
}

.support-info{
    text-align:center;
}

.support-info h2{
    color:var(--primary);

    font-size:22px;

    margin-bottom:10px;
}

.support-info p{
    font-size:10px;

    margin:5px;
}

.contact{
    display:flex;
    flex-direction:column;

    gap:10px;
}

.contact div{
    min-width:220px;

    padding:11px 18px;

    border-radius:25px;

    background:#fff;

    box-shadow:0 4px 12px rgba(30,70,120,.08);

    font-size:10px;
}


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

.footer{
    min-height:50px;

    padding:15px;

    background:#4480F2;

    color:#cbd5dd;

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

    font-size:10px;

    text-align:center;
}

.footer strong{
    color:#fff;

    margin-left:4px;
}


/* =========================================================
   WHATSAPP
========================================================= */

.whatsapp{
    position:fixed;

    right:25px;
    bottom:22px;

    width:50px;
    height:50px;

    border-radius:50%;

    background:#20c96b;

    color:#fff;

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

    font-size:24px;

    text-decoration:none;

    box-shadow:0 5px 18px rgba(0,0,0,.22);

    z-index:900;
}


/* =========================================================
   LOGIN MODAL
========================================================= */

.login-overlay{
    position:fixed;

    inset:0;

    background:rgba(5,15,25,.65);

    backdrop-filter:blur(8px);

    display:none;

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

    z-index:2000;

    padding:20px;
}

.login-overlay.show{
    display:flex;
}

.login-box{
    width:390px;

    max-width:100%;

    padding:32px;

    border-radius:22px;

    background:#fff;

    box-shadow:
        0 30px 80px rgba(0,0,0,.3);

    text-align:center;

    position:relative;

    animation:loginIn .25s ease;
}

@keyframes loginIn{
    from{
        transform:translateY(20px) scale(.96);
        opacity:0;
    }

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

.close-login{
    position:absolute;

    top:13px;
    right:15px;

    width:32px;
    height:32px;

    border:0;

    border-radius:50%;

    background:#f2f4f7;

    color:#555;

    font-size:17px;

    cursor:pointer;
}

.login-logo{
    font-size:29px;

    font-weight:700;

    margin-bottom:3px;
}

.login-logo span{
    color:var(--primary);
}

.login-powered{
    color:#888;

    font-size:10px;

    margin-bottom:23px;
}

.security{
    width:70px;
    height:70px;

    margin:0 auto 18px;

    border-radius:50%;

    background:#e9f1ff;

    color:var(--primary);

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

    font-size:30px;
}

.login-box h2{
    font-size:21px;

    margin-bottom:5px;
}

.login-subtitle{
    color:#888;

    font-size:11px;

    margin-bottom:24px;
}

.label{
    display:block;

    text-align:left;

    color:#666;

    font-size:11px;

    margin-bottom:7px;
}

.phone{
    display:flex;

    overflow:hidden;

    border:1px solid #d5dce5;

    border-radius:9px;

    height:50px;
}

.phone-code{
    width:48px;

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

    background:#f4f6f9;

    border-right:1px solid #d5dce5;

    font-size:12px;
}

.phone input{
    flex:1;

    border:0;
    outline:0;

    padding:0 13px;

    font-family:inherit;

    font-size:12px;
}

.verify{
    width:100%;

    height:50px;

    margin-top:18px;

    border:0;

    border-radius:9px;

    background:var(--primary);

    color:#fff;

    font-family:inherit;

    font-size:12px;

    font-weight:600;

    cursor:pointer;

    transition:.2s;
}

.verify:hover{
    background:var(--primary-dark);
}

.email-login{
    margin-top:15px;

    color:#a1a7af;

    font-size:10px;
}

.email-login a{
    color:var(--primary);

    font-weight:700;

    text-decoration:none;

    cursor:pointer;
}

.login-msg{
    min-height:16px;

    margin-top:12px;

    font-size:11px;

    color:#c51f1f;
}

.login-msg.ok{
    color:#19743b;
}

.otp-wrap{
    display:none;

    margin-top:16px;

    text-align:left;
}

.otp-wrap.show{
    display:block;
}

.otp-wrap input{
    width:100%;

    height:50px;

    border:1px solid #d5dce5;

    border-radius:9px;

    outline:0;

    padding:0 13px;

    font-family:inherit;

    font-size:16px;

    letter-spacing:4px;

    text-align:center;
}

.verify:disabled{
    opacity:.7;

    cursor:not-allowed;
}

.resend-otp{
    margin-top:10px;

    color:var(--primary);

    font-size:11px;

    font-weight:600;

    cursor:pointer;

    display:none;
}

.resend-otp.show{
    display:block;
}


/* =========================================================
   PRODUCT LISTING PAGE
========================================================= */

.listing-body-page{
    background:#fff;
}

.listing-wrap{
    max-width:1180px;

    margin:28px auto 70px;

    padding:0 4%;

    display:grid;

    grid-template-columns:minmax(0,1fr) 280px;

    gap:36px;

    position:relative;

    z-index:2;
}

.listing-title{
    font-size:22px;

    letter-spacing:.3px;

    margin-bottom:10px;

    color:#2a2f36;
}

.listing-desc{
    color:#8b919a;

    font-size:14px;

    line-height:1.6;

    margin-bottom:22px;
}

.listing-features-title{
    font-size:18px;

    margin-bottom:10px;
}

.listing-features{
    margin:0 0 28px 18px;

    color:#9aa1aa;

    font-size:13px;

    font-weight:600;

    letter-spacing:.2px;
}

.listing-features li{
    margin:7px 0;
}

.listing-actions{
    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:28px;
}

.listing-actions a{
    min-width:170px;

    height:46px;

    padding:0 18px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border-radius:4px;

    font-size:14px;

    font-weight:800;

    text-decoration:none;
}

.btn-buy{
    background:#f5c518;

    color:#111;
}

.btn-preview{
    background:#22a45a;

    color:#fff;
}

.btn-price{
    position:relative;

    overflow:hidden;

    background:#2f3640;

    color:#fff;

    gap:8px;

    z-index:0;
}

.btn-price-fill{
    position:absolute;

    left:0;
    top:0;

    width:0;
    height:100%;

    background:#1aa35a;

    z-index:0;

    pointer-events:none;
}

.btn-price-icon,
.btn-price-text{
    position:relative;

    z-index:1;
}

.btn-price-icon{
    font-size:16px;

    font-weight:700;

    line-height:1;

    animation:downloadIdle 1s ease-in-out infinite;
}

.btn-price.downloading .btn-price-fill{
    animation:downloadFill 1.5s ease forwards;
}

.btn-price.downloading .btn-price-icon{
    animation:downloadBounce .45s ease-in-out infinite;
}

.btn-price.done{
    background:#1aa35a;
}

.btn-price.done .btn-price-fill{
    width:100%;
}

.btn-price.done .btn-price-icon{
    animation:none;
}

@keyframes downloadIdle{
    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(4px);
    }
}

@keyframes downloadFill{
    from{
        width:0;
    }

    to{
        width:100%;
    }
}

@keyframes downloadBounce{
    0%,
    100%{
        transform:translateY(-3px);
        opacity:.55;
    }

    50%{
        transform:translateY(4px);
        opacity:1;
    }
}

.listing-video{
    margin:0 0 24px;
}

.video-frame{
    width:100%;

    aspect-ratio:16/9;

    border-radius:12px;

    overflow:hidden;

    box-shadow:var(--shadow);

    background:#000;
}

.video-frame iframe{
    width:100%;

    height:100%;

    border:0;
}

.ad-block{
    margin-bottom:28px;
}

.ad-block h4{
    font-size:15px;

    margin-bottom:8px;

    border-bottom:4px solid #f5c518;

    display:inline-block;

    padding-bottom:3px;
}

.ad-card{
    min-height:250px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px dashed #c5ccd6;

    border-radius:10px;

    background:#f7f8fa;

    color:#9aa3ad;

    font-size:14px;

    font-weight:700;

    letter-spacing:.4px;

    text-transform:lowercase;
}

.product-guest{
    margin-top:12px;

    color:var(--primary);

    font-size:12px;

    font-weight:600;
}


/* =========================================================
   LEGAL PAGES
========================================================= */

.legal-wrap{
    max-width:860px;

    margin:32px auto 70px;

    padding:0 4% 30px;
}

.legal-wrap h1{
    font-size:26px;

    margin-bottom:8px;
}

.legal-updated{
    color:var(--muted);

    font-size:12px;

    margin-bottom:22px;
}

.legal-wrap h2{
    color:var(--primary);

    font-size:16px;

    margin:22px 0 8px;
}

.legal-wrap p,
.legal-wrap li{
    font-size:13px;

    line-height:1.75;

    color:#444;
}

.legal-wrap ul{
    margin:0 0 12px 18px;
}


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

@media(max-width:1100px){

    .products{
        grid-template-columns:repeat(3,1fr);
    }

    .contact{
        display:none;
    }

    .listing-wrap{
        grid-template-columns:1fr;
    }
}


@media(max-width:800px){

    .topbar{
        height:28px;

        padding:0 12px;

        font-size:9px;
    }

    .header{
        height:64px;

        padding:0 14px;
    }

    .brand-icon{
        width:38px;
        height:38px;

        font-size:16px;
    }

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

    .brand-tagline,
    .header-device{
        display:none;
    }

    .menu-button{
        display:flex;

        margin-left:auto;

        width:40px;
        height:40px;

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

        border:0;

        background:transparent;

        color:var(--primary);

        font-size:26px;

        cursor:pointer;
    }

    .navbar{
        background:transparent;

        min-height:0;
    }

    .nav-inner{
        min-height:0;

        height:0;

        padding:0;

        overflow:visible;
    }

    .nav-links{
        display:none;

        position:absolute;

        top:10px;

        left:16%;
        right:14px;

        height:auto;

        flex-direction:column;

        align-items:stretch;

        background:var(--primary);

        z-index:1000;

        border-radius:0 0 12px 12px;

        overflow:visible;
    }

    .nav-links.open{
        display:flex;
    }

    .nav-links.open::before{
        content:"";

        position:absolute;

        top:-10px;
        right:18px;

        width:0;
        height:0;

        border-left:9px solid transparent;
        border-right:9px solid transparent;
        border-bottom:10px solid #3a6ed0;
    }

    .nav-links a{
        min-height:45px;

        padding:0 18px;

        justify-content:flex-end;

        text-align:right;
    }

    .nav-item{
        flex-direction:column;

        align-items:stretch;

        width:100%;
    }

    .nav-drop-toggle{
        justify-content:flex-end;
    }

    .nav-submenu{
        position:static;

        min-width:0;

        width:100%;

        border-radius:0;

        box-shadow:none;

        background:rgba(0,0,0,.14);
    }

    .nav-item:hover .nav-submenu{
        display:none;
    }

    .nav-item.open .nav-submenu{
        display:flex;
    }

    .nav-submenu a{
        color:#fff;

        min-height:42px;

        padding:0 18px;

        justify-content:flex-end;

        text-align:right;
    }

    .nav-submenu a:hover,
    .nav-submenu a.active{
        background:rgba(0,0,0,.18);

        color:#fff;
    }

    .search{
        display:none;
    }

    .main{
        padding:14px 12px 35px;
    }

    .products{
        grid-template-columns:1fr;

        gap:18px;
    }

    .card{
        min-height:235px;
    }

    .support{
        min-height:0;

        padding:16px 15px;

        flex-direction:column;

        gap:13px;

        align-items:center;
    }

    .support-avatar{
        display:none;
    }

    .support-circle,
    .support-info,
    .contact{
        margin-bottom:0;
    }

    .support-circle{
        width:78px;
        height:78px;
    }

    .support-info h2{
        font-size:19px;
    }

    .footer{
        min-height:65px;

        padding:15px 25px;

        line-height:1.6;
    }

    .whatsapp{
        width:46px;
        height:46px;

        right:15px;
        bottom:16px;
    }

    .login-box{
        padding:28px 20px;

        border-radius:19px;
    }

    .listing-title{
        font-size:16px;
    }

    .listing-actions a{
        width:100%;
    }
}


@media(max-width:420px){

    .card-body{
        padding:16px;
    }

    .card-body h2{
        font-size:19px;
    }

    .card-body li{
        font-size:9.5px;
    }

    .card-footer{
        padding:7px 10px;
    }

    .btn{
        font-size:7.5px;

        padding:6px 9px;
    }

    .visual{
        right:3px;

        width:90px;

        font-size:65px;
    }

    .login-box{
        width:100%;
    }
}