/*======================================================================
#
# 99EXCH GLOBAL CSS FRAMEWORK
# Version : 1.0 Foundation
# Developer : 99EXCH Project
# Mobile First Architecture
#
======================================================================*/


/*======================================================================
01. GOOGLE FONT
======================================================================*/

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


/*======================================================================
02. ROOT VARIABLES
======================================================================*/

:root{

/* Brand Colors */

--primary:#0F172A;
--secondary:#F4C430;

--white:#ffffff;

--light:#F8FAFC;

--text:#475569;

--heading:#111827;

--border:#E2E8F0;

--success:#22C55E;

--danger:#EF4444;


/* Typography */

--font-primary:'Inter',sans-serif;

--fw-regular:400;
--fw-medium:500;
--fw-semibold:600;
--fw-bold:700;
--fw-extra:800;


/* Font Sizes */

--fs-xs:.75rem;
--fs-sm:.875rem;
--fs-base:1rem;
--fs-lg:1.125rem;
--fs-xl:1.25rem;

--h1:3rem;
--h2:2.5rem;
--h3:2rem;
--h4:1.5rem;
--h5:1.25rem;


/* Line Height */

--lh:1.7;


/* Container */

--container:1200px;

--container-sm:960px;


/* Radius */

--radius-sm:.5rem;

--radius:.75rem;

--radius-lg:1rem;

--radius-xl:1.5rem;


/* Shadow */

--shadow-sm:0 4px 10px rgba(15,23,42,.05);

--shadow:0 12px 30px rgba(15,23,42,.08);

--shadow-lg:0 20px 45px rgba(15,23,42,.12);


/* Transition */

--transition:.3s ease;


/* Header */

--header-height:80px;


/* Z-index */

--z-header:999;

--z-modal:9999;


/* Section */

--section-padding:5rem;


/* Button */

--btn-height:54px;

}


/*======================================================================
03. RESET
======================================================================*/

*,
*::before,
*::after{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

font-size:16px;

}

body{

font-family:var(--font-primary);

font-size:var(--fs-base);

font-weight:var(--fw-regular);

line-height:var(--lh);

color:var(--text);

background:var(--white);

overflow-x:hidden;

text-rendering:optimizeLegibility;

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

}


/*======================================================================
04. SELECTION
======================================================================*/

::selection{

background:var(--secondary);

color:var(--primary);

}


/*======================================================================
05. IMAGES
======================================================================*/

img{

display:block;

max-width:100%;

height:auto;

}


/*======================================================================
06. LINKS
======================================================================*/

a{

color:inherit;

text-decoration:none;

transition:var(--transition);

}

a:hover{

color:var(--secondary);

}


/*======================================================================
07. LISTS
======================================================================*/

ul,
ol{

list-style:none;

}


/*======================================================================
08. BUTTON RESET
======================================================================*/

button{

border:none;

background:none;

font-family:inherit;

cursor:pointer;

}


/*======================================================================
09. INPUT RESET
======================================================================*/

input,
textarea,
select{

font:inherit;

outline:none;

border:none;

background:none;

}


/*======================================================================
10. TABLE
======================================================================*/

table{

width:100%;

border-collapse:collapse;

}


/*======================================================================
11. IFRAME
======================================================================*/

iframe{

border:0;

width:100%;

}


/*======================================================================
12. TYPOGRAPHY
======================================================================*/

h1,
h2,
h3,
h4,
h5,
h6{

font-weight:var(--fw-bold);

color:var(--heading);

line-height:1.2;

margin-bottom:1rem;

}

h1{

font-size:var(--h1);

}

h2{

font-size:var(--h2);

}

h3{

font-size:var(--h3);

}

h4{

font-size:var(--h4);

}

h5{

font-size:var(--h5);

}

p{

margin-bottom:1rem;

}

strong{

font-weight:700;

}


/*======================================================================
13. CONTAINER
======================================================================*/

.container{

width:100%;

max-width:var(--container);

margin:auto;

padding-inline:1.25rem;

}

.container-sm{

width:100%;

max-width:var(--container-sm);

margin:auto;

padding-inline:1.25rem;

}


/*======================================================================
14. SECTION
======================================================================*/

.section{

padding:var(--section-padding) 0;

}

.section-sm{

padding:4rem 0;

}

.section-lg{

padding:7rem 0;

}


/*======================================================================
15. DISPLAY UTILITIES
======================================================================*/

.d-flex{

display:flex;

}

.d-grid{

display:grid;

}

.d-block{

display:block;

}

.d-none{

display:none;

}


/*======================================================================
16. FLEX UTILITIES
======================================================================*/

.align-center{

align-items:center;

}

.justify-center{

justify-content:center;

}

.justify-between{

justify-content:space-between;

}

.flex-column{

flex-direction:column;

}

.flex-wrap{

flex-wrap:wrap;

}


/*======================================================================
17. TEXT UTILITIES
======================================================================*/

.text-center{

text-align:center;

}

.text-left{

text-align:left;

}

.text-right{

text-align:right;

}

.text-white{

color:var(--white);

}

.text-gold{

color:var(--secondary);

}

.text-muted{

color:var(--text);

}


/*======================================================================
18. WIDTH
======================================================================*/

.w-100{

width:100%;

}

.h-100{

height:100%;

}


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

.mt-8{margin-top:.5rem;}
.mt-16{margin-top:1rem;}
.mt-24{margin-top:1.5rem;}
.mt-32{margin-top:2rem;}
.mt-40{margin-top:2.5rem;}
.mt-48{margin-top:3rem;}
.mt-64{margin-top:4rem;}

.mb-8{margin-bottom:.5rem;}
.mb-16{margin-bottom:1rem;}
.mb-24{margin-bottom:1.5rem;}
.mb-32{margin-bottom:2rem;}
.mb-40{margin-bottom:2.5rem;}
.mb-48{margin-bottom:3rem;}
.mb-64{margin-bottom:4rem;}

.pt-80{padding-top:5rem;}
.pb-80{padding-bottom:5rem;}

.py-80{

padding-top:5rem;
padding-bottom:5rem;

}


/*======================================================================
20. RESPONSIVE FOUNDATION
======================================================================*/

@media(max-width:1024px){

:root{

--h1:2.5rem;

--h2:2.1rem;

--h3:1.75rem;

}

}


@media(max-width:768px){

:root{

--header-height:72px;

--section-padding:4rem;

--h1:2.2rem;

--h2:1.8rem;

--h3:1.5rem;

}

.container{

padding-inline:1rem;

}

.container-sm{

padding-inline:1rem;

}

}


@media(max-width:576px){

html{

font-size:15px;

}

:root{

--section-padding:3.5rem;

--h1:2rem;

--h2:1.6rem;

--h3:1.4rem;

}

}
/*======================================================================
21. BUTTON SYSTEM
======================================================================*/

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:.625rem;

min-height:3.25rem;

padding:.875rem 1.75rem;

border:1px solid transparent;

border-radius:var(--radius);

font-family:var(--font-primary);

font-size:var(--fs-base);

font-weight:var(--fw-bold);

line-height:1;

cursor:pointer;

text-align:center;

white-space:nowrap;

transition:all .25s ease;

user-select:none;

-webkit-user-select:none;

}

.btn:hover{

transform:translateY(-2px);

}

.btn:active{

transform:translateY(0);

}

.btn:focus-visible{

outline:3px solid rgba(244,196,48,.35);

outline-offset:3px;

}

.btn-primary{

background:var(--secondary);

color:var(--primary);

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

}

.btn-primary:hover{

background:#e8b81c;

}

.btn-secondary{

background:var(--primary);

color:var(--white);

}

.btn-secondary:hover{

background:#17233b;

}

.btn-outline{

background:transparent;

border:2px solid var(--secondary);

color:var(--secondary);

}

.btn-outline:hover{

background:var(--secondary);

color:var(--primary);

}

.btn-success{

background:var(--success);

color:var(--white);

}

.btn-success:hover{

filter:brightness(.95);

}

.btn-block{

width:100%;

}

.btn-lg{

min-height:3.75rem;

padding:1rem 2rem;

font-size:1.0625rem;

}

.btn-sm{

min-height:2.75rem;

padding:.75rem 1.25rem;

font-size:.875rem;

}

.btn:disabled{

opacity:.6;

cursor:not-allowed;

pointer-events:none;

}



/*======================================================================
22. FORM SYSTEM
======================================================================*/

.form-group{

margin-bottom:1.5rem;

}

.form-label{

display:block;

margin-bottom:.5rem;

font-size:.9375rem;

font-weight:600;

color:var(--heading);

}

.form-control{

width:100%;

height:3.375rem;

padding:0 1rem;

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

border-radius:var(--radius);

background:#fff;

color:var(--heading);

transition:all .25s ease;

}

textarea.form-control{

height:auto;

min-height:8rem;

padding:1rem;

resize:vertical;

}

.form-control::placeholder{

color:#94A3B8;

}

.form-control:hover{

border-color:#CBD5E1;

}

.form-control:focus{

border-color:var(--secondary);

box-shadow:0 0 0 4px rgba(244,196,48,.15);

}

.form-error{

color:var(--danger);

font-size:.875rem;

margin-top:.375rem;

}

.form-success{

color:var(--success);

font-size:.875rem;

margin-top:.375rem;

}

.input-icon{

position:relative;

}

.input-icon svg{

position:absolute;

right:1rem;

top:50%;

transform:translateY(-50%);

width:1.125rem;

height:1.125rem;

pointer-events:none;

}



/*======================================================================
23. CARD SYSTEM
======================================================================*/

.card{

background:#fff;

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

border-radius:var(--radius);

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

overflow:hidden;

transition:all .25s ease;

}

.card:hover{

transform:translateY(-6px);

box-shadow:var(--shadow);

}

.card-body{

padding:1.75rem;

}

.card-title{

margin-bottom:.75rem;

font-size:1.375rem;

font-weight:700;

color:var(--heading);

}

.card-text{

margin:0;

}

.card-footer{

padding:1.25rem 1.75rem;

border-top:1px solid var(--border);

background:#FCFCFD;

}



/*======================================================================
24. BADGES
======================================================================*/

.badge{

display:inline-flex;

align-items:center;

justify-content:center;

padding:.45rem .9rem;

border-radius:999px;

font-size:.75rem;

font-weight:700;

line-height:1;

}

.badge-live{

background:#DCFCE7;

color:#166534;

}

.badge-new{

background:#FEF3C7;

color:#92400E;

}

.badge-hot{

background:#FEE2E2;

color:#991B1B;

}

.badge-verified{

background:#DBEAFE;

color:#1D4ED8;

}

.badge-bonus{

background:#FFF7D6;

color:#8A6500;

}



/*======================================================================
25. TABLE
======================================================================*/

.table{

width:100%;

border-collapse:collapse;

background:#fff;

border-radius:var(--radius);

overflow:hidden;

}

.table th{

background:var(--primary);

color:#fff;

font-weight:700;

padding:1rem;

text-align:left;

}

.table td{

padding:1rem;

border-bottom:1px solid var(--border);

}

.table tr:last-child td{

border-bottom:none;

}

.table-responsive{

overflow-x:auto;

}



/*======================================================================
26. ACCESSIBILITY
======================================================================*/

:focus-visible{

outline:3px solid rgba(244,196,48,.35);

outline-offset:3px;

}



/*======================================================================
27. CUSTOM SCROLLBAR
======================================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#F1F5F9;

}

::-webkit-scrollbar-thumb{

background:#CBD5E1;

border-radius:100px;

}

::-webkit-scrollbar-thumb:hover{

background:#94A3B8;

}
/*======================================================================
28. HEADER FRAMEWORK
======================================================================*/

/* Sticky Header */

.site-header{
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #0F172A;
    border-bottom: 1px solid rgba(255,255,255,.08);
    transition: all .30s ease;
}

/* Header Container */

.inside-header{
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
}

/* Logo */

.site-logo img,
.custom-logo{
    max-height: 52px;
    width: auto;
    transition: .3s;
}

.site-logo img:hover{
    transform: scale(1.03);
}

/* Navigation */

.main-navigation{
    background: transparent;
}

/* Menu */

.main-navigation .main-nav{
    display:flex;
    align-items:center;
}

.main-navigation .main-nav ul{
    display:flex;
    align-items:center;
    gap:10px;
}

/* Menu Links */

.main-navigation .main-nav ul li > a{

    font-family:var(--font-primary);

    font-size:15px;

    font-weight:700;

    letter-spacing:.35px;

    color:#ffffff;

    padding:14px 18px;

    border-radius:10px;

    transition:.25s;

}

/* Hover */

.main-navigation .main-nav ul li > a:hover{

    color:var(--secondary);

    background:rgba(255,255,255,.05);

}

/* Active */

.main-navigation .main-nav ul li.current-menu-item > a{

    color:var(--secondary);

    background:rgba(244,196,48,.08);

}

/* Dropdown */

.main-navigation ul ul{

    border-radius:14px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.08);

    box-shadow:0 20px 40px rgba(0,0,0,.18);

}

.main-navigation ul ul li{

    background:#111827;

}

.main-navigation ul ul li a{

    color:#ffffff;

    padding:14px 18px;

}

.main-navigation ul ul li a:hover{

    background:#1F2937;

}

/* Mobile Toggle */

.menu-toggle{

    color:#ffffff;

    background:transparent;

    border:none;

    font-size:28px;

    padding:10px;

}

.menu-toggle:hover{

    color:var(--secondary);

}

/* Mobile Menu */

@media(max-width:768px){

.main-navigation{

    background:#0F172A;

}

.main-navigation .main-nav ul{

    gap:0;

}

.main-navigation .main-nav ul li{

    border-bottom:1px solid rgba(255,255,255,.05);

}

.main-navigation .main-nav ul li>a{

    padding:16px 20px;

    font-size:16px;

}

.inside-header{

    min-height:72px;

    padding:0 16px;

}

.site-logo img{

    max-height:46px;

}

}