/* ===================================================
MONA LANDING PAGE
Version 1.0
=================================================== */

:root{

--bg:#07121d;
--bg2:#0d1d2d;
--card:#112334;
--gold:#d7a63d;
--cyan:#16d5ff;
--white:#ffffff;
--text:#d6e3ef;
--muted:#9fb4c7;

--radius:20px;

--transition:.35s ease;

}

*{

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

}

html{

scroll-behavior:smooth;

}

body{

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

background:

linear-gradient(180deg,
#06111d 0%,
#091827 50%,
#07121d 100%);

color:var(--text);

overflow-x:hidden;

}

/* ==========================
Loader
========================== */

#loader{

position:fixed;

inset:0;

background:#07121d;

display:flex;

justify-content:center;

align-items:center;

z-index:999999;

transition:.6s;

}

#loader.hide{

opacity:0;

visibility:hidden;

}

/* ==========================
Animated Background
========================== */

.bg-animation{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

pointer-events:none;

z-index:-1;

background:

radial-gradient(circle at 20% 20%,
rgba(22,213,255,.12),
transparent 35%),

radial-gradient(circle at 80% 30%,
rgba(215,166,61,.10),
transparent 30%),

radial-gradient(circle at 60% 90%,
rgba(22,213,255,.08),
transparent 35%);

animation:bgMove 16s infinite alternate;

}

@keyframes bgMove{

0%{

transform:scale(1);

}

100%{

transform:scale(1.2);

}

}

/* ==========================
Navbar
========================== */

.navbar{

padding:20px 0;

backdrop-filter:blur(12px);

background:rgba(0,0,0,.15);

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

}

.navbar-brand{

font-size:28px;

font-weight:700;

color:white;

}

.navbar img{

border-radius:50%;

}

/* ==========================
Hero
========================== */

.hero{

padding-top:90px;

padding-bottom:120px;

}

.hero-logo{

width:170px;

animation:floatLogo 4s ease infinite;

filter:

drop-shadow(0 0 25px rgba(22,213,255,.35));

}

@keyframes floatLogo{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

.hero h1{

font-size:52px;

font-weight:800;

margin-bottom:15px;

color:white;

}

.hero h2{

font-weight:300;

color:var(--gold);

}

.hero p{

font-size:20px;

line-height:2;

color:var(--muted);

max-width:850px;

margin:auto;

}

.hero-buttons{

margin-top:45px;

}

.btn-info{

background:linear-gradient(45deg,
#11d6ff,
#009fe3);

border:none;

color:white;

font-weight:700;

border-radius:14px;

transition:var(--transition);

box-shadow:

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

}

.btn-info:hover{

transform:translateY(-5px);

box-shadow:

0 20px 45px rgba(0,180,255,.45);

}

/* ==========================
Counters
========================== */

.hero h3{

font-size:38px;

font-weight:800;

color:var(--gold);

margin-top:60px;

}

.hero .col-4 p{

color:var(--muted);

}

/* ==========================
Sections
========================== */

section{

padding-top:80px;

padding-bottom:80px;

}

.section-title{

font-size:42px;

font-weight:700;

color:white;

margin-bottom:15px;

}

.section-subtitle{

color:var(--muted);

font-size:18px;

}

/* ==========================
Feature Cards
========================== */

.feature-card{

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

border-radius:var(--radius);

padding:35px;

height:100%;

text-align:center;

transition:.4s;

backdrop-filter:blur(14px);

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

}

.feature-card:hover{

transform:translateY(-10px);

border-color:var(--cyan);

box-shadow:

0 20px 50px rgba(0,0,0,.30);

}

.feature-card .icon{

font-size:54px;

color:var(--cyan);

margin-bottom:25px;

}

.feature-card h4{

font-size:28px;

color:white;

margin-bottom:20px;

}

.feature-card p{

line-height:2;

color:var(--muted);

}

/* ==========================
News Cards
========================== */

.news-card{

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

padding:35px;

border-radius:20px;

transition:.35s;

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

height:100%;

}

.news-card:hover{

transform:translateY(-8px);

border-color:var(--gold);

}

.news-card h4{

margin-top:20px;

margin-bottom:20px;

font-size:26px;

color:white;

}

.news-card p{

line-height:2;

color:var(--muted);

}

.read-more{

text-decoration:none;

color:var(--cyan);

font-weight:bold;

}

.read-more:hover{

color:white;

}

/* ===========================================
POLL SECTION
=========================================== */

.poll-section{

background:linear-gradient(180deg,#0a1726,#08121d);

}

.poll-box{

max-width:750px;

margin:auto;

padding:45px;

border-radius:25px;

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

backdrop-filter:blur(16px);

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

text-align:center;

}

.poll-box h2{

color:white;

font-weight:700;

margin-bottom:20px;

}

.poll-box p{

color:var(--muted);

font-size:18px;

}

.poll-btn{

height:60px;

border-radius:15px;

font-size:18px;

transition:.3s;

}

.poll-btn:hover{

background:var(--cyan);

border-color:var(--cyan);

color:#fff;

transform:translateY(-3px);

}

/* ===========================================
TRUST SECTION
=========================================== */

.trust{

background:linear-gradient(180deg,#08121d,#0b1c2d);

}

.trust h2{

font-size:42px;

font-weight:700;

margin-bottom:35px;

color:white;

}

.trust-list{

list-style:none;

padding:0;

margin:0;

}

.trust-list li{

padding:16px 0;

font-size:20px;

color:var(--text);

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

}

.trust-list i{

color:var(--cyan);

margin-left:10px;

font-size:22px;

}

.trust-circle{

width:330px;

height:330px;

margin:auto;

border-radius:50%;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

background:

radial-gradient(circle,
rgba(22,213,255,.20),
rgba(255,255,255,.04));

border:2px solid rgba(22,213,255,.35);

box-shadow:

0 0 60px rgba(22,213,255,.20);

animation:pulse 4s infinite;

}

.trust-circle i{

font-size:75px;

color:var(--gold);

margin-bottom:20px;

}

.trust-circle h3{

color:white;

margin-bottom:15px;

font-weight:700;

}

.trust-circle p{

color:var(--muted);

padding:0 30px;

text-align:center;

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.04);

}

100%{

transform:scale(1);

}

}

/* ===========================================
CTA SECTION
=========================================== */

.cta-section{

padding:110px 20px;

text-align:center;

background:

linear-gradient(180deg,#08111c,#07111a);

}

.cta-section h2{

font-size:52px;

color:white;

font-weight:800;

margin-bottom:25px;

}

.cta-section p{

font-size:21px;

color:var(--muted);

margin-bottom:40px;

}

.cta-section .btn{

font-size:24px;

padding:18px 60px;

border-radius:18px;

}

/* ===========================================
Sticky Telegram Button
=========================================== */

#stickyCTA{

position:fixed;

bottom:20px;

left:50%;

transform:translateX(-50%);

width:min(92%,520px);

z-index:9999;

display:none;

animation:slideUp .4s ease;

}

@keyframes slideUp{

from{

transform:translate(-50%,120px);

opacity:0;

}

to{

transform:translate(-50%,0);

opacity:1;

}

}

#stickyCTA .btn{

height:62px;

font-size:22px;

font-weight:700;

border-radius:18px;

}

/* ===========================================
Footer
=========================================== */

footer{

padding:60px 20px;

text-align:center;

background:#050c14;

border-top:1px solid rgba(255,255,255,.06);

}

footer img{

margin-bottom:20px;

filter:drop-shadow(0 0 15px rgba(22,213,255,.25));

}

footer p{

color:var(--muted);

margin-bottom:10px;

}

footer .small{

opacity:.7;

font-size:14px;

}

/* ===========================================
Scrollbar
=========================================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#08111c;

}

::-webkit-scrollbar-thumb{

background:var(--cyan);

border-radius:20px;

}

/* Firefox */

*{

scrollbar-width:thin;

scrollbar-color:var(--cyan) #08111c;

}

/* ===========================================
Text Selection
=========================================== */

::selection{

background:var(--gold);

color:#08111c;

}

::-moz-selection{

background:var(--gold);

color:#08111c;

}

/* ===========================================
Fade In Animations
=========================================== */

.fade-up{

opacity:0;

transform:translateY(40px);

transition:all .8s ease;

}

.fade-up.show{

opacity:1;

transform:translateY(0);

}

.fade-left{

opacity:0;

transform:translateX(-50px);

transition:all .8s ease;

}

.fade-left.show{

opacity:1;

transform:translateX(0);

}

.fade-right{

opacity:0;

transform:translateX(50px);

transition:all .8s ease;

}

.fade-right.show{

opacity:1;

transform:translateX(0);

}

/* ===========================================
Hover Effects
=========================================== */

.feature-card,
.news-card,
.poll-box,
.trust-circle{

transition:all .35s ease;

}

.feature-card:hover{

transform:translateY(-10px) scale(1.02);

}

.news-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 50px rgba(0,0,0,.35);

}

.poll-box:hover{

box-shadow:0 25px 60px rgba(0,0,0,.35);

}

.hero-logo:hover{

transform:scale(1.05);

}

/* ===========================================
Buttons
=========================================== */

.btn{

transition:.35s;

}

.btn:active{

transform:scale(.96);

}

.btn-info{

position:relative;

overflow:hidden;

}

.btn-info::after{

content:"";

position:absolute;

left:-120%;

top:0;

width:120%;

height:100%;

background:linear-gradient(90deg,
transparent,
rgba(255,255,255,.35),
transparent);

transition:.7s;

}

.btn-info:hover::after{

left:120%;

}

/* ===========================================
Links
=========================================== */

a{

transition:.3s;

}

a:hover{

text-decoration:none;

}

/* ===========================================
Images
=========================================== */

img{

max-width:100%;

height:auto;

}

.hero-logo{

user-select:none;

}

/* ===========================================
Containers
=========================================== */

.container{

position:relative;

z-index:2;

}

/* ===========================================
Utility Classes
=========================================== */

.text-gold{

color:var(--gold);

}

.text-cyan{

color:var(--cyan);

}

.bg-glass{

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

backdrop-filter:blur(14px);

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

border-radius:20px;

}

.shadow-soft{

box-shadow:0 20px 45px rgba(0,0,0,.30);

}

/* ===========================================
Responsive
=========================================== */

@media(max-width:1200px){

.hero h1{

font-size:46px;

}

.hero h2{

font-size:34px;

}

.section-title{

font-size:38px;

}

}

@media(max-width:992px){

.hero{

padding-top:70px;

padding-bottom:70px;

}

.hero-logo{

width:140px;

}

.hero h1{

font-size:38px;

}

.hero h2{

font-size:30px;

}

.hero p{

font-size:18px;

}

.trust-circle{

width:260px;

height:260px;

margin-top:40px;

}

.cta-section h2{

font-size:38px;

}

}

@media(max-width:768px){

.navbar-brand{

font-size:22px;

}

.hero{

text-align:center;

}

.hero h1{

font-size:32px;

}

.hero h2{

font-size:26px;

}

.hero p{

font-size:17px;

line-height:1.9;

}

.hero h3{

font-size:28px;

}

.feature-card{

padding:28px;

}

.news-card{

padding:28px;

}

.poll-box{

padding:30px;

}

.cta-section{

padding:70px 15px;

}

.cta-section h2{

font-size:32px;

}

.cta-section p{

font-size:18px;

}

#stickyCTA{

bottom:12px;

width:94%;

}

#stickyCTA .btn{

font-size:20px;

height:58px;

}

footer{

padding-bottom:100px;

}

}

@media(max-width:576px){

.hero-logo{

width:120px;

}

.hero h1{

font-size:28px;

}

.hero h2{

font-size:22px;

}

.hero p{

font-size:16px;

}

.section-title{

font-size:30px;

}

.feature-card h4{

font-size:22px;

}

.news-card h4{

font-size:22px;

}

.trust h2{

font-size:30px;

}

.trust-circle{

width:220px;

height:220px;

}

.trust-circle i{

font-size:52px;

}

.cta-section .btn{

width:100%;

padding:18px;

}

}

/* ===========================================
Print
=========================================== */

@media print{

#stickyCTA,

nav,

.btn,

#loader{

display:none !important;

}

body{

background:white;

color:black;

}

}

/* ===========================================
End of File
=========================================== */

.ripple{

position:absolute;

border-radius:50%;

transform:scale(0);

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

animation:ripple .6s linear;

pointer-events:none;

}

@keyframes ripple{

to{

transform:scale(4);

opacity:0;

}
}