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

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

/*=====================================================
                ROOT VARIABLES
======================================================*/

:root{

    --primary:#2f80ff;
    --primary-light:#4fa7ff;
    --secondary:#00d4ff;

    --dark:#040b18;
    --dark-2:#07101f;
    --dark-3:#0b1728;

    --white:#ffffff;
    --text:#c9d5e6;
    --muted:#90a4c0;

    --border:rgba(255,255,255,.08);

    --glass:rgba(255,255,255,.04);

    --radius:18px;

    --transition:.35s ease;

    --shadow:

    0 25px 60px rgba(0,0,0,.35);

}

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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

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

    background:var(--dark);

    color:var(--white);

    overflow-x:hidden;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

    color:inherit;

}

button{

    font-family:inherit;

}

ul{

    list-style:none;

}

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

.container{

    width:min(1320px,92%);

    margin:auto;

}

/*=====================================================
                COMMON SECTION
======================================================*/

.section{

    padding:110px 0;

}

.section-title{

    font-size:48px;

    font-weight:800;

    text-align:center;

    margin-bottom:20px;

    line-height:1.2;

}

.section-subtitle{

    max-width:760px;

    margin:auto;

    text-align:center;

    color:var(--muted);

    line-height:1.8;

    font-size:18px;

}

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

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px 34px;

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    color:#fff;

    border:none;

    border-radius:60px;

    font-weight:700;

    transition:var(--transition);

    cursor:pointer;

    box-shadow:0 15px 40px rgba(47,128,255,.35);

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 20px 50px rgba(47,128,255,.45);

}

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:60px;

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

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

    color:#fff;

    transition:var(--transition);

    cursor:pointer;

}

.btn-secondary:hover{

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

    border-color:var(--primary);

}

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

.footer-cta{

    padding:90px 0;

    background:

    radial-gradient(circle at top left,
    rgba(47,128,255,.18),
    transparent 45%),

    radial-gradient(circle at bottom right,
    rgba(0,212,255,.12),
    transparent 40%),

    linear-gradient(
    180deg,
    #07101f,
    #040b18);

}

.footer-cta .container{

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

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

    border-radius:28px;

    padding:70px;

    text-align:center;

    backdrop-filter:blur(18px);

}

.footer-tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:40px;

    background:rgba(47,128,255,.12);

    color:#5db4ff;

    font-size:13px;

    letter-spacing:2px;

    font-weight:700;

    margin-bottom:25px;

}

.footer-cta h2{

    font-size:52px;

    font-weight:800;

    margin-bottom:22px;

    line-height:1.2;

}

.footer-cta p{

    max-width:760px;

    margin:auto;

    color:var(--muted);

    line-height:1.9;

    font-size:18px;

}

.footer-cta-buttons{

    margin-top:45px;

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.footer-btn-primary{

    padding:18px 42px;

    border-radius:60px;

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    color:#fff;

    font-weight:700;

    transition:var(--transition);

    box-shadow:0 15px 40px rgba(47,128,255,.35);

}

.footer-btn-primary:hover{

    transform:translateY(-5px);

}

.footer-btn-secondary{

    padding:18px 42px;

    border-radius:60px;

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

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

    color:#fff;

    font-weight:700;

    transition:var(--transition);

    cursor:pointer;

}

.footer-btn-secondary:hover{

    border-color:var(--primary);

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

}

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

.site-footer{

    position:relative;

    overflow:hidden;

    padding:60px 0 25px;

    background:
    linear-gradient(
    180deg,
    #06111f 0%,
    #030812 100%);

}

.site-footer::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    top:-260px;

    left:-180px;

    border-radius:50%;

    background:rgba(47,128,255,.08);

    filter:blur(90px);

}

.site-footer::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    right:-220px;

    bottom:-220px;

    border-radius:50%;

    background:rgba(0,212,255,.06);

    filter:blur(90px);

}

.site-footer .container{

    position:relative;

    z-index:2;

}

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

.footer-grid{

    display:grid;

    grid-template-columns:
    2fr
    1fr
    1fr
    1.4fr;

    gap:70px;

}

/*=====================================================
                COMPANY
======================================================*/

.footer-company p{

    margin:28px 0;

    color:var(--muted);

    line-height:1.9;

}

.footer-logo{

    width:120px;

}

/*=====================================================
                BADGES
======================================================*/

.footer-badges{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:35px;

}

.footer-badges span{

    padding:9px 18px;

    border-radius:40px;

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

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

    color:#b8d8ff;

    font-size:13px;

    transition:.35s;

}

.footer-badges span:hover{

    background:rgba(47,128,255,.18);

    border-color:rgba(47,128,255,.45);

    transform:translateY(-3px);

}

/*=====================================================
                TITLES
======================================================*/

.footer-grid h3{

    font-size:22px;

    margin-bottom:30px;

    color:#fff;

    font-weight:700;

}

/*=====================================================
                LINKS
======================================================*/

.footer-grid ul{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.footer-grid ul li{

    color:var(--muted);

}

.footer-grid ul li a{

    color:var(--muted);

    transition:.35s;

    position:relative;

}

.footer-grid ul li a::before{

    content:"›";

    color:var(--primary);

    margin-right:10px;

    opacity:0;

    transition:.35s;

}

.footer-grid ul li a:hover{

    color:#fff;

    padding-left:8px;

}

.footer-grid ul li a:hover::before{

    opacity:1;

}

/*=====================================================
                NEWSLETTER
======================================================*/

.footer-newsletter{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin:30px 0;

}

.footer-newsletter input{

    width:100%;

    padding:17px 18px;

    border-radius:12px;

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

    background:#081424;

    color:#fff;

    outline:none;

    transition:.35s;

}

.footer-newsletter input:focus{

    border-color:var(--primary);

    box-shadow:

    0 0 0 4px rgba(47,128,255,.15);

}

.footer-newsletter input::placeholder{

    color:#8092ac;

}

.footer-newsletter button{

    padding:17px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    color:#fff;

    font-weight:700;

    background:
    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    transition:.35s;

    box-shadow:

    0 15px 35px rgba(47,128,255,.25);

}

.footer-newsletter button:hover{

    transform:translateY(-3px);

}

/*=====================================================
                CONTACT
======================================================*/

.footer-contact{

    margin-top:30px;

    display:flex;

    flex-direction:column;

    gap:16px;

}

.footer-contact div{

    display:flex;

    align-items:center;

    gap:12px;

    color:var(--muted);

    line-height:1.6;

}

/*=====================================================
                SOCIAL
======================================================*/

.footer-social{

    display:flex;

    gap:15px;

}

.footer-social a{

    width:50px;

    height:50px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

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

    color:#fff;

    font-size:18px;

    transition:.35s;

}

.footer-social a:hover{

    transform:

    translateY(-6px)

    rotate(360deg);

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    border-color:transparent;

    box-shadow:

    0 15px 35px rgba(47,128,255,.35);

}

/*=====================================================
                DIVIDER
======================================================*/

.footer-divider{

    width:100%;

    height:1px;

    margin:70px 0 35px;

    background:

    linear-gradient(
    90deg,
    transparent,
    rgba(47,128,255,.75),
    transparent);

}

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

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    flex-wrap:wrap;

}

.footer-bottom>div:first-child{

    color:var(--muted);

    line-height:1.8;

}

.footer-bottom strong{

    color:#fff;

    font-weight:700;

}

.footer-company{

    margin-top:8px;

    font-size:14px;

    color:#7e93af;

}

.footer-bottom>div:last-child{

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--primary-light);

    font-weight:700;

    letter-spacing:.5px;

}

.footer-bottom{

    text-align:center;
    padding-top:35px;

}

.footer-bottom p{

    margin:12px 0;
    color:var(--muted);
    line-height:1.8;

}

.footer-bottom strong{

    color:#fff;

}

.footer-bottom p:last-child{

    color:var(--primary-light);
    font-weight:600;

}


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

.footer-grid a{

    transition:var(--transition);

}

.footer-grid a:hover{

    color:#fff;

}

.footer-newsletter button:active,

.footer-btn-primary:active,

.footer-btn-secondary:active{

    transform:scale(.98);

}

/*=====================================================
                SCROLL ANIMATION READY
======================================================*/

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:1s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#07111f;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(

    180deg,

    var(--primary),

    var(--secondary));

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#5aaeff;

}

/*=====================================================
                TEXT SELECTION
======================================================*/

::selection{

    background:rgba(47,128,255,.35);

    color:#fff;

}

/*=====================================================
                RESPONSIVE
======================================================*/

@media(max-width:1200px){

.footer-grid{

grid-template-columns:

1.6fr

1fr

1fr;

gap:50px;

}

}

@media(max-width:992px){

.section{

padding:90px 0;

}

.section-title{

font-size:40px;

}

.footer-cta .container{

padding:55px 40px;

}

.footer-cta h2{

font-size:40px;

}

.footer-grid{

grid-template-columns:

1fr

1fr;

gap:50px;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

}

@media(max-width:768px){

.section{

padding:70px 0;

}

.section-title{

font-size:34px;

}

.section-subtitle{

font-size:16px;

}

.footer-cta{

padding:70px 0;

}

.footer-cta .container{

padding:45px 28px;

}

.footer-cta h2{

font-size:34px;

}

.footer-cta-buttons{

flex-direction:column;

}

.footer-btn-primary,

.footer-btn-secondary{

width:100%;

}

.footer-grid{

grid-template-columns:1fr;

gap:45px;

}

.footer-logo{

    width:110px;

    border-radius:18px;

}

.footer-social{

justify-content:center;

}

.footer-badges{

justify-content:center;

}

.footer-grid h3{

text-align:center;

}

.footer-company p,

.footer-grid ul,

.footer-contact{

text-align:center;

align-items:center;

}

}

@media(max-width:480px){

.container{

width:94%;

}

.section-title{

font-size:28px;

}

.footer-tag{

font-size:11px;

letter-spacing:1px;

}

.footer-cta h2{

font-size:28px;

}

.footer-cta p{

font-size:15px;

}

.footer-newsletter input{

padding:15px;

}

.footer-newsletter button{

padding:15px;

}

.footer-social a{

width:45px;

height:45px;

font-size:16px;

}

.footer-bottom{

font-size:14px;

}

}

/*=====================================================
                UTILITIES
======================================================*/

.text-center{

text-align:center;

}

.mt-20{

margin-top:20px;

}

.mt-30{

margin-top:30px;

}

.mt-40{

margin-top:40px;

}

.mb-20{

margin-bottom:20px;

}

.mb-30{

margin-bottom:30px;

}

.rounded{

border-radius:var(--radius);

}

.shadow{

box-shadow:var(--shadow);

}

/*=====================================================
            COMMUNITY PROFILE
======================================================*/

#profileUsername{

    display:block;

    margin-top:6px;

    margin-bottom:14px;

    font-size:18px;

    font-weight:700;

    color:#5cbcff;

    letter-spacing:.5px;

}

.member-role{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:7px 18px;

    border-radius:30px;

    background:linear-gradient(135deg,#1d7fff,#29b6ff);

    color:#fff;

    font-size:13px;

    font-weight:700;

}