*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
}

body{
background:#f5f6fa;
}

.header{
position:fixed;
top:0;
left:0;
width:100%;
height:70px;
background:#0B1F5E;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 15px;
z-index:9999;
box-shadow:0 2px 10px rgba(0,0,0,.20);
}

.logo{
display:flex;
align-items:center;
color:#fff;
font-size:22px;
font-weight:bold;
}

.logo img{
width:48px;
height:48px;
border-radius:50%;
background:#fff;
padding:5px;
border:2px solid #FF7A00;
object-fit:contain;
box-shadow:0 4px 12px rgba(0,0,0,.25);
}

.logo img:hover{
transform:rotate(5deg) scale(1.05);
}

.menu-btn{
background:none;
border:none;
color:#fff;
font-size:28px;
cursor:pointer;
}

.login-btn{
background:#FF7A00;
color:#fff;
padding:8px 14px;
border-radius:8px;
text-decoration:none;
font-weight:bold;
font-size:14px;
}

.login-btn:hover{
background:#e66b00;
}

.register-btn{
background:#fff;
color:#0B1F5E;
padding:8px 14px;
border-radius:8px;
text-decoration:none;
font-weight:bold;
font-size:14px;
border:2px solid #FF7A00;
}

.register-btn:hover{
background:#FF7A00;
color:#fff;
}

.header-btns{
display:flex;
align-items:center;
gap:8px;
}

.hero{
margin-top:70px;
background:linear-gradient(135deg,#0B1F5E,#123A9C);
padding:50px 20px;
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
}

.hero-content{
flex:1;
min-width:300px;
}

.hero-content h4{
color:#FF7A00;
font-size:18px;
letter-spacing:3px;
margin-bottom:10px;
}

.hero-content h1{
color:#fff;
font-size:42px;
margin-bottom:20px;
font-weight:bold;
}

.hero-content p{
color:#fff;
font-size:20px;
line-height:32px;
margin-bottom:30px;
}

.join-btn{
display:inline-block;
background:#FF7A00;
color:#fff;
padding:14px 35px;
border-radius:10px;
text-decoration:none;
font-size:18px;
font-weight:bold;
transition:.3s;
}

.join-btn:hover{
background:#e66b00;
}

.member{
margin-top:20px;
color:#fff;
font-size:16px;
}

.member a{
color:#FF7A00;
text-decoration:none;
font-weight:bold;
}

.hero-image{
flex:1;
text-align:center;
min-width:300px;
}

.hero-image img{
width:100%;
max-width:450px;
}

@media(max-width:768px){

.hero{
text-align:center;
padding:40px 20px;
}

.hero-content h1{
font-size:34px;
}

.hero-content p{
font-size:18px;
line-height:28px;
}

.hero-image{
margin-top:30px;
}

.hero-image img{
max-width:320px;
}

}

.about{
padding:70px 20px;
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
background:#fff;
}

.about-image{
flex:1;
min-width:300px;
text-align:center;
}

.about-image img{
width:100%;
max-width:420px;
}

.about-content{
flex:1;
min-width:300px;
padding:20px;
}

.about-content h4{
color:#FF7A00;
font-size:18px;
letter-spacing:2px;
margin-bottom:10px;
}

.about-content h2{
font-size:34px;
color:#0B1F5E;
margin-bottom:20px;
}

.about-content p{
font-size:17px;
line-height:30px;
color:#555;
margin-bottom:25px;
text-align:justify;
}

.read-btn{
display:inline-block;
background:#0B1F5E;
color:#fff;
padding:12px 28px;
border-radius:8px;
text-decoration:none;
font-weight:bold;
}

.read-btn:hover{
background:#FF7A00;
}

@media(max-width:768px){

.about{
text-align:center;
}

.about-content h2{
font-size:28px;
}

.about-content p{
text-align:center;
}

.about-image{
margin-bottom:30px;
}

/*=====================================
      WHY CHOOSE ANMOL WORLD
======================================*/

.why-section{
    position:relative;
    padding:60px 18px;
    background:linear-gradient(180deg,#071B45 0%,#0A275A 100%);
    overflow:hidden;
}

/* Background Glow */

.why-section::before{
    content:'';
    position:absolute;
    top:-120px;
    right:-90px;
    width:220px;
    height:220px;
    background:rgba(255,152,0,.12);
    border-radius:50%;
    filter:blur(60px);
}

.why-section::after{
    content:'';
    position:absolute;
    bottom:-100px;
    left:-70px;
    width:200px;
    height:200px;
    background:rgba(255,255,255,.05);
    border-radius:50%;
    filter:blur(70px);
}

/*===================*/

.why-top{
    text-align:center;
    position:relative;
    z-index:2;
    margin-bottom:35px;
}

.why-tag{

    display:inline-block;
    padding:8px 18px;

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

    color:#FFC107;

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

    border-radius:50px;

    font-size:12px;

    letter-spacing:1px;

    font-weight:700;

}

.why-top h2{

    margin-top:18px;

    color:#fff;

    font-size:30px;

    line-height:38px;

    font-weight:800;

}

.why-top span{

    color:#FF9800;

}

.why-top p{

    margin-top:15px;

    color:#d6dbe7;

    font-size:15px;

    line-height:28px;

}

/*======================*/

.why-card{

    position:relative;

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

    backdrop-filter:blur(18px);

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

    border-radius:24px;

    padding:28px 22px;

    margin-bottom:18px;

    overflow:hidden;

    transition:.35s;

}

.why-card:active{

    transform:scale(.98);

}

.why-card::before{

    content:'';

    position:absolute;

    top:0;

    left:0;

    width:5px;

    height:100%;

    background:linear-gradient(#FFC107,#FF9800);

}

/*======================*/

.icon-box{

    width:72px;

    height:72px;

    border-radius:22px;

    background:linear-gradient(135deg,#FFC107,#FF9800);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:20px;

    box-shadow:0 12px 30px rgba(255,152,0,.35);

}

.icon-box i{

    color:#fff;

    font-size:28px;

}

/*===================*/

.why-card h3{

    color:#fff;

    font-size:21px;

    font-weight:700;

    margin-bottom:12px;

}

.why-card p{

    color:#d9dfe9;

    line-height:27px;

    font-size:15px;

}

/*===================*/

.why-card:hover{

    transform:translateY(-6px);

    border-color:#FF9800;

    box-shadow:
    0 15px 35px rgba(0,0,0,.25),
    0 0 25px rgba(255,152,0,.15);

}

/*===================*/

.why-card::after{

    content:'';

    position:absolute;

    right:-30px;

    top:-30px;

    width:90px;

    height:90px;

    border-radius:50%;

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

}

/*===================*/

@keyframes float{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-6px);
}

100%{
transform:translateY(0px);
}

}

.icon-box{

animation:float 3s ease-in-out infinite;

}

/*===================*/

@media(max-width:390px){

.why-top h2{

font-size:26px;

line-height:34px;

}

.why-card{

padding:24px 18px;

}

.icon-box{

width:65px;
height:65px;

}

.icon-box i{

font-size:24px;

}

}

/*=====================================
        WAYS TO EARN
======================================*/

.earn-section{
background:#071B4D;
padding:60px 15px;
}

.earn-title{
text-align:center;
margin-bottom:35px;
}

.earn-title span{
display:inline-block;
color:#FF7A00;
font-size:15px;
font-weight:bold;
letter-spacing:2px;
margin-bottom:10px;
}

.earn-title h2{
color:#fff;
font-size:30px;
line-height:38px;
margin-bottom:15px;
font-weight:700;
}

.earn-title p{
color:#d8d8d8;
font-size:15px;
line-height:25px;
}

.earn-list{
display:flex;
flex-direction:column;
gap:16px;
}

.earn-item{
display:flex;
align-items:center;
justify-content:space-between;
background:#fff;
padding:18px;
border-radius:18px;
text-decoration:none;
box-shadow:0 8px 20px rgba(0,0,0,.12);
transition:.25s;
}

.earn-item:active{
transform:scale(.98);
}

.earn-left{
display:flex;
align-items:center;
}

.icon-box{
width:56px;
height:56px;
min-width:56px;
background:#FF7A00;
border-radius:16px;
display:flex;
justify-content:center;
align-items:center;
font-size:26px;
color:#fff;
margin-right:15px;
box-shadow:0 8px 18px rgba(255,122,0,.35);
}

.earn-text{
flex:1;
}

.earn-text h3{
font-size:18px;
color:#0B1F5E;
margin-bottom:6px;
}

.earn-text p{
font-size:13px;
color:#666;
line-height:20px;
}

.arrow{
font-size:22px;
font-weight:bold;
color:#FF7A00;
margin-left:10px;
}

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

.faq-section{
padding:60px 15px;
background:#F7FAFF;
}

.faq-title{
text-align:center;
margin-bottom:30px;
}

.faq-title span{
color:#FF7A00;
font-size:15px;
font-weight:bold;
letter-spacing:2px;
}

.faq-title h2{
font-size:28px;
color:#0B1F5E;
margin:12px 0;
}

.faq-title p{
color:#666;
font-size:15px;
line-height:24px;
}

.faq-item{
background:#fff;
border-radius:16px;
margin-bottom:15px;
overflow:hidden;
box-shadow:0 5px 15px rgba(0,0,0,.08);
}

.faq-question{
width:100%;
padding:18px;
border:none;
background:#fff;
display:flex;
justify-content:space-between;
align-items:center;
font-size:16px;
font-weight:600;
color:#0B1F5E;
cursor:pointer;
}

.faq-question span{
font-size:22px;
color:#FF7A00;
}

.faq-answer{
display:none;
padding:0 18px 18px;
font-size:14px;
line-height:24px;
color:#666;
}

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

.footer{

background:#071B4D;

padding:45px 20px;

text-align:center;

}

.footer img{

width:75px;

height:75px;

background:#fff;

padding:8px;

border-radius:50%;

border:3px solid #FF7A00;

margin-bottom:15px;

}

.footer h2{

color:#fff;

font-size:26px;

margin-bottom:10px;

}

.footer-text{

color:#d7d7d7;

font-size:15px;

line-height:24px;

margin-bottom:30px;

}

.footer-menu{

display:flex;

flex-direction:column;

gap:14px;

margin-bottom:30px;

}

.footer-menu a{

color:#fff;

text-decoration:none;

font-size:16px;

font-weight:600;

transition:.3s;

}

.footer-menu a:hover{

color:#FF7A00;

}

.footer hr{

border:none;

height:1px;

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

margin:25px 0;

}

.copyright{

color:#d7d7d7;

font-size:14px;

line-height:24px;

}

.version{

margin-top:10px;

color:#FF7A00;

font-size:14px;

font-weight:bold;

}