/*==========================================
      LIGHT40X PRIVACY POLICY
==========================================*/

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

:root{

--primary:#4F8CFF;
--cyan:#00D4FF;
--dark:#08111F;
--card:#101C31;
--border:#23395E;
--gray:#BFC7D8;

}

*{

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

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;
background:#08111F;
color:#fff;
overflow-x:hidden;

}

/*==========================
BACKGROUND
==========================*/

.background{

position:fixed;
inset:0;
z-index:-3;
overflow:hidden;

}

.background::before{

content:"";
position:absolute;
width:900px;
height:900px;
left:-350px;
top:-350px;
background:radial-gradient(circle,#4F8CFF,transparent 70%);
opacity:.08;
animation:blob1 18s linear infinite alternate;

}

.background::after{

content:"";
position:absolute;
width:850px;
height:850px;
right:-300px;
bottom:-300px;
background:radial-gradient(circle,#00D4FF,transparent 70%);
opacity:.08;
animation:blob2 22s linear infinite alternate;

}

@keyframes blob1{

100%{

transform:translateY(120px) rotate(20deg);

}

}

@keyframes blob2{

100%{

transform:translateY(-120px) rotate(-20deg);

}

}

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

.header{

position:fixed;
top:0;
left:0;
width:100%;
padding:22px 8%;
display:flex;
justify-content:space-between;
align-items:center;
background:rgba(8,17,31,.82);
backdrop-filter:blur(18px);
border-bottom:1px solid rgba(255,255,255,.05);
z-index:999;

}

.logo{

display:flex;
align-items:center;
gap:14px;
font-family:'Orbitron',sans-serif;
font-size:24px;
font-weight:700;
text-decoration:none;
color:white;

}

.logo i{

font-size:30px;
color:var(--cyan);

}

nav{

display:flex;
gap:35px;

}

nav a{

text-decoration:none;
color:white;
font-size:15px;
font-weight:500;
position:relative;
transition:.35s;

}

nav a:hover{

color:var(--cyan);

}

nav a::after{

content:"";
position:absolute;
left:0;
bottom:-8px;
width:0;
height:2px;
background:var(--cyan);
transition:.35s;

}

nav a:hover::after{

width:100%;

}

.menu-btn{

display:none;
font-size:30px;
cursor:pointer;
color:white;

}

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

.hero{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    padding:160px 8% 70px;
}

.logo-img{
    display:block;
    margin:0 auto 25px;
}

.badge{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    margin:0 auto 25px;
}

.hero h1{
    width:100%;
    text-align:center;
}

.hero p{
    width:100%;
    max-width:700px;
    margin:0 auto;
    text-align:center;
}

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

.policy{

padding:0 8% 100px;

}

.container{

max-width:950px;
margin:auto;
background:linear-gradient(145deg,#101C31,#162845);
border:1px solid var(--border);
border-radius:30px;
padding:55px;
box-shadow:0 25px 60px rgba(0,0,0,.35);

}

.container h1{

text-align:center;
font-size:46px;
margin-bottom:15px;
font-family:'Orbitron',sans-serif;

}

.subtitle{

text-align:center;
color:#9FD7FF;
margin-bottom:50px;
font-size:18px;

}
/*==========================
POLICY SECTIONS
==========================*/

section{

margin-bottom:45px;

}

section:last-child{

margin-bottom:0;

}

section h2{

font-size:30px;
font-family:'Orbitron',sans-serif;
margin-bottom:18px;
color:var(--cyan);

}

section p{

font-size:17px;
line-height:2;
color:var(--gray);
margin-bottom:18px;

}

section ul{

margin:20px 0;
padding-left:28px;

}

section li{

margin:12px 0;
color:white;
line-height:1.8;

}

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

a{

color:#6fdcff;
text-decoration:none;
transition:.3s;

}

a:hover{

color:white;

}

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

.footer{

margin-top:60px;
padding-top:35px;
border-top:1px solid rgba(255,255,255,.08);
text-align:center;
color:#8EA7C7;
line-height:2;

}

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

.top{

position:fixed;
right:30px;
bottom:30px;

width:58px;
height:58px;

border:none;
border-radius:50%;

background:linear-gradient(135deg,#4F8CFF,#00D4FF);

color:white;

font-size:20px;

cursor:pointer;

display:none;

box-shadow:0 15px 35px rgba(79,140,255,.35);

transition:.35s;

z-index:999;

}

.top:hover{

transform:translateY(-6px) scale(1.08);

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

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#08111F;

}

::-webkit-scrollbar-thumb{

background:#4F8CFF;
border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:#00D4FF;

}

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

.container{

animation:fadeUp .9s ease;

}

@keyframes fadeUp{

from{

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

}

to{

opacity:1;
transform:translateY(0);

}

}

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

@media(max-width:950px){

.menu-btn{

display:block;

}

nav{

position:fixed;
top:85px;
right:-100%;

width:280px;
height:100vh;

background:#08111F;

display:flex;
flex-direction:column;

padding:40px;

gap:30px;

transition:.35s;

border-left:1px solid #23395E;

}

nav.active{

right:0;

}

.hero h1{

font-size:48px;

}

.container{

padding:35px;

}

}

@media(max-width:700px){

.hero{

padding-top:140px;

}

.logo-img{

width:95px;
height:95px;

}

.hero h1{

font-size:38px;

}

.hero p{

font-size:16px;

}

.container{

padding:25px;

}

.container h1{

font-size:34px;

}

.subtitle{

font-size:16px;

}

section h2{

font-size:24px;

}

section p{

font-size:15px;

}

.top{

right:20px;
bottom:20px;

width:50px;
height:50px;

font-size:18px;

}

}

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

::selection{

background:#00D4FF;
color:#08111F;

}

*{

-webkit-tap-highlight-color:transparent;

}