/* ======================================================
   GAMEVIA TOPUP
   Global Design System
   Version 1.0
====================================================== */

/* ===========================
   GOOGLE FONT
=========================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');


/* ===========================
   CSS VARIABLES
=========================== */

:root{

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

    --primary:#6C63FF;
    --secondary:#00C2A8;
    --accent:#FFD93D;
    --danger:#FF5D73;

    /* ==========================
       NEUTRAL
    ========================== */

    --white:#FFFFFF;
    --light:#F8FAFC;
    --dark:#111827;
    --gray:#64748B;

    /* ==========================
       BORDER
    ========================== */

    --border:3px solid var(--dark);

    /* ==========================
       RADIUS
    ========================== */

    --radius-sm:12px;
    --radius-md:20px;
    --radius-lg:28px;
    --radius-xl:36px;
    --radius-pill:999px;

    /* ==========================
       SHADOW
    ========================== */

    --shadow:0 8px 0 var(--dark);
    --shadow-lg:0 14px 0 var(--dark);

    /* ==========================
       SPACING (8px SYSTEM)
    ========================== */

    --space-1:8px;
    --space-2:16px;
    --space-3:24px;
    --space-4:32px;
    --space-5:40px;
    --space-6:48px;
    --space-7:64px;
    --space-8:80px;
    --space-9:96px;

    /* ==========================
       TYPOGRAPHY
    ========================== */

    --h1:64px;
    --h2:48px;
    --h3:24px;
    --body:18px;
    --small:14px;

    /* ==========================
       TRANSITION
    ========================== */

    --transition-fast:.2s ease;
    --transition:.3s ease;
    --transition-slow:.45s ease;

}

/* ===========================
   RESET
=========================== */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;
    background:var(--light);
    color:var(--dark);
    overflow-x:hidden;
    line-height:1.6;

}

img{

    display:block;
    max-width:100%;

}

a{

    color:inherit;
    text-decoration:none;

}

button{

    border:none;
    background:none;
    cursor:pointer;
    font-family:inherit;

}

input{

    font-family:inherit;

}

ul{

    list-style:none;

}

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

.container{

    width:92%;
    max-width:var(--container);
    margin:auto;

}

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

section{

    padding:100px 0;
    position:relative;

}

/* ===========================
   CUSTOM SCROLLBAR
=========================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);
    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:white;

}

/* =====================================
   UI KIT
===================================== */

.ui-section{

    margin:80px 0;

}

.ui-title{

    font-size:34px;

    margin-bottom:30px;

    font-weight:800;

}

.ui-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:25px;

}

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

.color-card{

    border:var(--border);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow);

    padding:30px;

    color:white;

    min-height:140px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    transition:var(--transition);

}

.color-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-hover);

}

.color-card h3{

    font-size:24px;

}

.color-card span{

    font-size:16px;

    font-weight:600;

}

.primary{

    background:var(--primary);

}

.secondary{

    background:var(--secondary);

}

.accent{

    background:var(--accent);

    color:#111827;

}

.danger{

    background:var(--danger);

}

/* ==========================================
   UI DESCRIPTION
========================================== */

.ui-section p{

    color:var(--gray);

    font-size:18px;

    margin-top:10px;

}

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

body{

    position:relative;

    overflow-x:hidden;

    background:

    radial-gradient(circle at top left,
    rgba(108,99,255,.08),
    transparent 35%),

    radial-gradient(circle at bottom right,
    rgba(0,194,168,.08),
    transparent 35%),

    var(--light);

}