/*==================================================
Vivipay Professional Website
Theme : Premium Blue Finance
Author : Vivipay.in
==================================================*/

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

:root{

--primary:#0A4DAD;
--secondary:#146CFF;
--dark:#07142C;
--light:#F5F8FF;
--white:#ffffff;
--text:#222;
--gray:#666;
--border:#dce7ff;

--radius:16px;

--shadow:
0 10px 30px rgba(0,0,0,.08);

--transition:.35s ease;

}

body{

font-family:'Segoe UI',Arial,sans-serif;

background:var(--light);

color:var(--text);

line-height:1.8;

overflow-x:hidden;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

transition:var(--transition);

}

ul{

list-style:none;

}

.container{

width:92%;

max-width:1280px;

margin:auto;

}

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

.header{

position:sticky;

top:0;

left:0;

width:100%;

z-index:999;

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

backdrop-filter:blur(18px);

box-shadow:0 5px 20px rgba(0,0,0,.08);

}

.header .container{

display:flex;

justify-content:space-between;

align-items:center;

padding:15px 0;

}

.logo a{

display:flex;

align-items:center;

gap:12px;

font-size:26px;

font-weight:700;

color:var(--dark);

}

.logo img{

width:55px;

height:55px;

border-radius:50%;

box-shadow:var(--shadow);

}

.logo span{

color:var(--primary);

}

/*==========================
DESKTOP MENU
==========================*/

nav ul{

display:flex;

align-items:center;

gap:25px;

}

nav ul li a{

color:var(--dark);

font-weight:600;

font-size:16px;

padding:8px 14px;

border-radius:8px;

}

nav ul li a:hover,

nav ul li a.active{

background:var(--primary);

color:#fff;

}

/*==========================
MENU BUTTON
==========================*/

.menu-btn{

display:none;

font-size:30px;

cursor:pointer;

color:var(--primary);

}

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

.mobile-menu{

position:fixed;

top:0;

right:-100%;

width:300px;

height:100vh;

background:linear-gradient(180deg,#0A4DAD,#07142C);

padding:30px;

transition:.4s;

z-index:10000;

overflow:auto;

}

.mobile-menu.active{

right:0;

}

.close-btn{

font-size:34px;

color:#fff;

text-align:right;

cursor:pointer;

margin-bottom:25px;

}

.mobile-menu ul li{

margin:18px 0;

}

.mobile-menu ul li a{

color:#fff;

font-size:18px;

font-weight:600;

display:block;

padding:12px;

border-radius:10px;

}

.mobile-menu ul li a:hover{

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

}

/*==========================
HERO SECTION
==========================*/

.hero{

padding:70px 0;

text-align:center;

}

.hero img{

width:100%;

max-width:900px;

margin:auto;

border-radius:20px;

box-shadow:

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

transition:.4s;

}

.hero img:hover{

transform:scale(1.02);

}

.hero-buttons{

margin-top:35px;

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.btn{

display:inline-block;

padding:15px 35px;

background:linear-gradient(135deg,#146CFF,#0A4DAD);

color:#fff;

font-weight:700;

border-radius:50px;

box-shadow:

0 10px 25px rgba(20,108,255,.35);

transition:.35s;

}

.btn:hover{

transform:translateY(-5px);

}

.telegram-btn{

margin-top:25px;

}

.telegram-btn a{

display:inline-block;

padding:15px 40px;

background:#0088cc;

color:#fff;

font-weight:700;

border-radius:50px;

box-shadow:0 10px 25px rgba(0,136,204,.30);

}

.telegram-btn a:hover{

transform:translateY(-4px);

}
/*=========================================
INTRO SECTION
=========================================*/

.intro{

padding:30px 0 60px;

text-align:center;

}

.intro h1{

font-size:42px;

color:var(--dark);

margin-bottom:20px;

font-weight:800;

line-height:1.3;

}

.intro p{

font-size:18px;

color:var(--gray);

max-width:950px;

margin:auto;

}

/*=========================================
CONTENT SECTION
=========================================*/

.content-section{

padding:70px 0;

background:#fff;

}

.content-section.light{

background:#f5f8ff;

}

.content-section .container{

max-width:1150px;

}

.content-section h2{

font-size:34px;

color:var(--primary);

margin-bottom:20px;

position:relative;

padding-left:18px;

}

.content-section h2::before{

content:"";

position:absolute;

left:0;

top:5px;

width:6px;

height:40px;

border-radius:10px;

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

}

.content-section p{

font-size:17px;

color:var(--text);

margin-bottom:18px;

text-align:justify;

line-height:1.9;

}

.content-section ul{

margin-top:25px;

}

.content-section ul li{

background:#fff;

padding:18px 22px;

margin-bottom:15px;

border-radius:14px;

box-shadow:var(--shadow);

border-left:5px solid var(--primary);

transition:.35s;

}

.content-section ul li:hover{

transform:translateX(8px);

}

/*=========================================
CTA BOX
=========================================*/

.cta-box{

margin-top:40px;

background:linear-gradient(135deg,#0A4DAD,#146CFF);

padding:40px;

border-radius:20px;

text-align:center;

color:#fff;

box-shadow:0 20px 50px rgba(20,108,255,.25);

}

.cta-box h3{

font-size:32px;

margin-bottom:15px;

}

.cta-box p{

color:#fff;

margin-bottom:25px;

font-size:18px;

}

/*=========================================
FAQ
=========================================*/

.faq-preview{

padding:80px 0;

background:#fff;

}

.section-title{

text-align:center;

margin-bottom:50px;

}

.section-title h2{

font-size:40px;

color:var(--dark);

margin-bottom:10px;

}

.section-title p{

color:var(--gray);

font-size:18px;

}

.faq-box{

background:#fff;

padding:25px;

margin-bottom:20px;

border-radius:18px;

box-shadow:var(--shadow);

transition:.35s;

border-left:5px solid var(--primary);

}

.faq-box:hover{

transform:translateY(-6px);

}

.faq-box h3{

color:var(--primary);

margin-bottom:10px;

font-size:22px;

}

.faq-box p{

color:#555;

line-height:1.8;

}

/*=========================================
CALL TO ACTION
=========================================*/

.cta-section{

padding:80px 20px;

background:linear-gradient(135deg,#07142C,#0A4DAD);

text-align:center;

color:#fff;

}

.cta-section h2{

font-size:42px;

margin-bottom:20px;

}

.cta-section p{

font-size:19px;

max-width:850px;

margin:auto auto 35px;

line-height:1.9;

}

.cta-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

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

footer{

background:#07142C;

padding:70px 0 20px;

color:#fff;

}

.footer-grid{

display:grid;

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

gap:40px;

margin-bottom:40px;

}

.footer-grid h3{

font-size:24px;

margin-bottom:20px;

color:#fff;

}

.footer-grid p{

color:#cfd7ea;

line-height:1.9;

}

.footer-grid ul li{

margin-bottom:12px;

}

.footer-grid ul li a{

color:#dbe6ff;

transition:.3s;

}

.footer-grid ul li a:hover{

padding-left:10px;

color:#fff;

}

footer hr{

border:none;

height:1px;

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

margin:30px 0;

}

.copyright{

text-align:center;

}

.copyright p{

color:#d0d8ea;

margin-bottom:10px;

font-size:15px;

line-height:1.8;

}
/*=========================================
ANIMATIONS
=========================================*/

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

.hero,
.intro,
.content-section,
.faq-preview,
.cta-section,
footer{

animation:fadeUp .8s ease;

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#edf3ff;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(#146CFF,#0A4DAD);

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#0A4DAD;

}

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

::selection{

background:#146CFF;

color:#fff;

}

/*=========================================
BUTTON EFFECT
=========================================*/

.btn{

position:relative;

overflow:hidden;

}

.btn::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

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

transition:.5s;

}

.btn:hover::before{

left:100%;

}

/*=========================================
IMAGE EFFECT
=========================================*/

.hero img{

cursor:pointer;

}

.hero img:hover{

transform:scale(1.03);

}

/*=========================================
LINK EFFECT
=========================================*/

a{

transition:.3s;

}

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

@media(max-width:992px){

nav{

display:none;

}

.menu-btn{

display:block;

}

.logo span{

font-size:22px;

}

.intro h1{

font-size:34px;

}

.content-section h2{

font-size:28px;

}

.section-title h2{

font-size:34px;

}

.cta-section h2{

font-size:34px;

}

.hero{

padding:50px 0;

}

}

@media(max-width:768px){

.header .container{

padding:12px 0;

}

.logo img{

width:45px;

height:45px;

}

.logo span{

font-size:19px;

}

.hero img{

width:100%;
max-width:900px;
height:auto;
object-fit:contain;
border-radius:15px;
margin:auto;
display:block;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.hero-buttons .btn{

width:100%;

max-width:300px;

text-align:center;

}

.telegram-btn a{

width:100%;

max-width:300px;

text-align:center;

}

.intro{

padding:25px 0 40px;

}

.intro h1{

font-size:28px;

}

.intro p{

font-size:16px;

}

.content-section{

padding:50px 0;

}

.content-section h2{

font-size:24px;

}

.content-section p{

font-size:16px;

text-align:left;

}

.faq-box{

padding:20px;

}

.faq-box h3{

font-size:20px;

}

.cta-section{

padding:60px 20px;

}

.cta-section h2{

font-size:28px;

}

.cta-section p{

font-size:16px;

}

.footer-grid{

grid-template-columns:1fr;

gap:30px;

}

.mobile-menu{

width:280px;

}

}

@media(max-width:480px){

.container{

width:94%;

}

.logo span{

font-size:17px;

}

.hero img{

width:100%;
max-width:900px;
height:auto;
object-fit:contain;
border-radius:15px;
margin:auto;
display:block;

}

.btn{

padding:14px 25px;

font-size:15px;

}

.telegram-btn a{

padding:14px 25px;

font-size:15px;

}

.content-section h2{

font-size:22px;

}

.section-title h2{

font-size:28px;

}

.footer-grid h3{

font-size:21px;

}

.copyright p{

font-size:14px;

}

}

/*=========================================
END OF CSS
=========================================*/

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

.hidden{

opacity:0;

transform:translateY(40px);

transition:.8s ease;

}

.show{

opacity:1;

transform:translateY(0);

}

.header.sticky{

box-shadow:0 15px 40px rgba(0,0,0,.12);

}

#topButton{

position:fixed;

right:25px;

bottom:25px;

width:50px;

height:50px;

border:none;

border-radius:50%;

background:#0A4DAD;

color:#fff;

font-size:22px;

cursor:pointer;

display:flex;

justify-content:center;

align-items:center;

opacity:0;

visibility:hidden;

transition:.3s;

z-index:999;

}

#topButton.show{

opacity:1;

visibility:visible;

}

#topButton:hover{

transform:translateY(-5px);

background:#146CFF;

}

img{

opacity:0;

transition:opacity .5s ease;

}

body.loaded{

overflow-x:hidden;

}
/*==========================
CONTACT PAGE
==========================*/

.contact-card{

background:#fff;

padding:30px;

margin-top:30px;

border-radius:18px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

transition:.35s;

}

.contact-card:hover{

transform:translateY(-8px);

}

.contact-card h3{

color:#0A4DAD;

margin-bottom:15px;

font-size:24px;

}

.contact-card p{

margin-bottom:20px;

line-height:1.8;

}