/*==========================================
AIDPAY WEBSITE
Premium Gold Theme
==========================================*/

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

:root{

--primary:#C8A447;
--secondary:#E4C76A;
--dark:#1A1A1A;
--light:#FAFAFA;
--white:#ffffff;
--text:#333333;
--gray:#777777;
--shadow:0 10px 30px rgba(0,0,0,.12);

}

body{

font-family:Arial,Helvetica,sans-serif;
background:var(--light);
color:var(--text);
line-height:1.8;

}

a{

text-decoration:none;

}

img{

max-width:100%;
display:block;

}

ul{

list-style:none;

}

.container{

width:90%;
max-width:1200px;
margin:auto;

}

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

header{

position:fixed;
top:0;
left:0;
width:100%;
height:80px;
background:#fff;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 6%;
box-shadow:var(--shadow);
z-index:9999;

}

.logo{

display:flex;
align-items:center;
gap:15px;

}

.logo img{

width:60px;
height:60px;
object-fit:contain;

}

.logo h2{

font-size:28px;
font-weight:700;
color:var(--primary);

}

.menu-btn{

font-size:35px;
cursor:pointer;
display:none;
color:var(--primary);

}

nav{

display:flex;

}

nav ul{

display:flex;
gap:30px;
align-items:center;

}

nav ul li a{

font-size:17px;
font-weight:600;
color:#222;
transition:.3s;

}

nav ul li a:hover{

color:var(--primary);

}

.close-btn{

display:none;

}

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

.hero{

padding-top:120px;
padding-bottom:70px;
text-align:center;

}

.hero img{

width:100%;
max-width:1100px;
margin:auto;
border-radius:20px;
box-shadow:var(--shadow);

}

.hero h1{

margin-top:35px;
font-size:48px;
color:var(--primary);

}

.hero p{

margin-top:15px;
font-size:20px;
color:#555;
max-width:800px;
margin-left:auto;
margin-right:auto;

}

.hero-btn{

display:flex;
justify-content:center;
gap:20px;
margin-top:35px;
flex-wrap:wrap;

}

.btn{

padding:16px 45px;
border-radius:50px;
font-size:18px;
font-weight:bold;
transition:.3s;

}

.register{

background:linear-gradient(45deg,#C8A447,#E6CF7C);
color:#fff;

}

.download{

background:#222;
color:#fff;

}

.btn:hover{

transform:translateY(-5px);

}

/*==========================================
REFER CODE
==========================================*/

.refer{

padding:70px 20px;
text-align:center;

}

.refer h2{

font-size:34px;
margin-bottom:25px;
color:var(--primary);

}

.refer-box{

display:inline-flex;
align-items:center;
gap:15px;
padding:18px 30px;
background:#fff;
border-radius:15px;
box-shadow:var(--shadow);

}

#code{

font-size:28px;
font-weight:bold;
letter-spacing:2px;
color:#222;

}

.refer-box button{

padding:12px 30px;
background:var(--primary);
color:#fff;
border:none;
border-radius:10px;
cursor:pointer;
font-size:16px;

}

.telegram{

display:inline-block;
margin-top:35px;
padding:15px 40px;
background:#0088cc;
color:#fff;
border-radius:50px;
font-weight:bold;

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

.content{

max-width:1200px;
margin:70px auto;
padding:0 20px;

}

.content h2{

font-size:34px;
color:var(--primary);
margin-top:60px;
margin-bottom:20px;
padding-left:18px;
border-left:6px solid var(--primary);

}

.content p{

font-size:18px;
line-height:1.9;
color:#444;
margin-bottom:25px;
text-align:justify;

}

.content ul{

margin:20px 0 30px 40px;

}

.content ul li{

list-style:disc;
font-size:18px;
margin-bottom:12px;
color:#444;

}

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

.faq{

margin-top:40px;

}

.faq h3{

background:#fff;
padding:18px 25px;
margin-top:20px;
border-left:5px solid var(--primary);
border-radius:10px;
box-shadow:var(--shadow);
font-size:22px;

}

.faq p{

background:#fff;
padding:20px;
margin-top:8px;
border-radius:10px;
box-shadow:var(--shadow);

}

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

footer{

margin-top:80px;
background:#151515;
color:#fff;

}

.footer-box{

max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:40px;
padding:70px 20px;

}

.footer-box h3{

font-size:26px;
margin-bottom:25px;
color:var(--secondary);

}

.footer-box p{

color:#ddd;
line-height:1.8;

}

.footer-box a{

display:block;
color:#ddd;
margin-bottom:14px;
transition:.3s;

}

.footer-box a:hover{

color:var(--secondary);
padding-left:8px;

}

.copyright{

border-top:1px solid rgba(255,255,255,.15);
text-align:center;
padding:22px;
font-size:16px;
color:#ccc;

}

/*==========================================
BACK TO TOP
==========================================*/

#topBtn{

position:fixed;
bottom:25px;
right:25px;
width:55px;
height:55px;
border:none;
border-radius:50%;
background:var(--primary);
color:#fff;
font-size:24px;
cursor:pointer;
display:none;
box-shadow:var(--shadow);
transition:.3s;
z-index:999;

}

#topBtn:hover{

transform:translateY(-6px);

}

/*==========================================
HOVER EFFECTS
==========================================*/

.hero img,
.refer-box,
.faq h3,
.faq p,
.footer-box div{

transition:.35s;

}

.hero img:hover{

transform:scale(1.01);

}

.refer-box:hover{

transform:translateY(-6px);

}

.faq h3:hover{

transform:translateX(8px);

}

.footer-box div:hover{

transform:translateY(-5px);

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f2f2f2;

}

::-webkit-scrollbar-thumb{

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

}

::-webkit-scrollbar-thumb:hover{

background:#a8862d;

}

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

::selection{

background:var(--primary);
color:#fff;

}
/*==========================================
TABLET RESPONSIVE
==========================================*/

@media(max-width:992px){

header{

padding:0 25px;

}

.logo img{

width:50px;
height:50px;

}

.logo h2{

font-size:24px;

}

.menu-btn{

display:block;

}

nav{

position:fixed;
top:0;
right:-100%;
width:320px;
max-width:85%;
height:100vh;
background:#1A1A1A;
display:flex;
justify-content:flex-start;
align-items:flex-start;
padding:90px 35px;
transition:.40s ease;
z-index:99999;
overflow-y:auto;
box-shadow:-10px 0 40px rgba(0,0,0,.30);

}

nav.active{

right:0;

}

.close-btn{

display:block;
position:absolute;
top:25px;
right:25px;
font-size:35px;
color:#fff;
cursor:pointer;

}

nav ul{

flex-direction:column;
align-items:flex-start;
gap:25px;
width:100%;

}

nav ul li{

width:100%;

}

nav ul li a{

display:block;
width:100%;
padding:14px 18px;
border-radius:10px;
font-size:18px;
color:#fff;
transition:.30s;

}

nav ul li a:hover{

background:var(--primary);
color:#fff;
padding-left:25px;

}

.hero{

padding-top:120px;

}

.hero h1{

font-size:38px;

}

.hero p{

font-size:18px;

}

.content h2{

font-size:30px;

}

.footer-box{

grid-template-columns:1fr 1fr;

}

}

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

@media(max-width:768px){

header{

height:72px;

}

.logo img{

width:45px;
height:45px;

}

.logo h2{

font-size:20px;

}

.hero{

padding-top:105px;
padding-left:15px;
padding-right:15px;

}

.hero img{

border-radius:15px;

}

.hero h1{

font-size:32px;
margin-top:25px;

}

.hero p{

font-size:17px;

}

.hero-btn{

flex-direction:column;
align-items:center;

}

.btn{

width:100%;
max-width:320px;
text-align:center;

}

.refer{

padding:50px 15px;

}

.refer h2{

font-size:28px;

}

.refer-box{

flex-direction:column;
width:100%;

}

#code{

font-size:26px;

}

.refer-box button{

width:100%;

}

.telegram{

width:100%;
max-width:320px;

}

.content{

padding:0 15px;

}

.content h2{

font-size:26px;

}

.content p{

font-size:16px;

}

.content ul{

margin-left:22px;

}

.faq h3{

font-size:20px;

}

.footer-box{

grid-template-columns:1fr;

text-align:center;

}

.footer-box a{

padding:5px 0;

}

}

/*==========================================
SMALL MOBILE
==========================================*/

@media(max-width:480px){

.logo h2{

font-size:18px;

}

.hero h1{

font-size:28px;

}

.hero p{

font-size:15px;

}

.btn{

font-size:16px;
padding:15px;

}

.content h2{

font-size:24px;

}

.refer h2{

font-size:24px;

}

#topBtn{

width:50px;
height:50px;
font-size:20px;

}

}

/*==========================================
FADE ANIMATION
==========================================*/

.hero,
.refer,
.content,
footer{

animation:fadeUp .8s ease;

}

@keyframes fadeUp{

0%{

opacity:0;
transform:translateY(35px);

}

100%{

opacity:1;
transform:translateY(0);

}

}

/*==========================================
STICKY HEADER EFFECT
==========================================*/

header.sticky{

background:rgba(255,255,255,.95);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);

}
/*=========================
ACTIVE MENU
=========================*/

nav ul li a.active{

background:var(--primary);
color:#fff;
padding:12px 18px;
border-radius:8px;

}

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

.hidden{

opacity:0;
transform:translateY(40px);
transition:all .8s ease;

}

.show{

opacity:1;
transform:translateY(0);

}

/*=========================
BUTTON RIPPLE
=========================*/

.btn{

position:relative;
overflow:hidden;

}

.ripple{

position:absolute;
width:20px;
height:20px;
background:rgba(255,255,255,.6);
border-radius:50%;
transform:scale(0);
animation:ripple .6s linear;

}

@keyframes ripple{

to{

transform:scale(15);
opacity:0;

}

}
/*==========================================
CONTACT FORM
==========================================*/

.contact-form{

margin-top:30px;
display:flex;
flex-direction:column;
gap:20px;

}

.contact-form input,
.contact-form textarea{

width:100%;
padding:16px;
border:1px solid #ddd;
border-radius:10px;
font-size:16px;
outline:none;
transition:.3s;

}

.contact-form input:focus,
.contact-form textarea:focus{

border-color:var(--primary);
box-shadow:0 0 10px rgba(200,164,71,.2);

}

.contact-form button{

width:220px;
cursor:pointer;

}

@media(max-width:768px){

.contact-form button{

width:100%;

}

}