/*
=========================================================
MYAYA TECHNOLOGIES V2
Global Styles
=========================================================
*/

@import url("theme.css");

/*=========================================================
RESET
=========================================================*/

*,
*::before,
*::after{

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

}

html{

scroll-behavior:smooth;

}

body{

font-family:var(--font-main);

background:var(--background);

color:var(--text);

overflow-x:hidden;

line-height:1.6;

position:relative;

min-height:100vh;

}

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

body::before{

content:"";

position:fixed;

top:-300px;
left:-300px;

width:700px;
height:700px;

background:radial-gradient(circle,
rgba(0,232,255,.15),
transparent 70%);

filter:blur(80px);

pointer-events:none;

z-index:var(--z-background);

animation:floatOne 18s linear infinite;

}

body::after{

content:"";

position:fixed;

bottom:-350px;
right:-350px;

width:700px;
height:700px;

background:radial-gradient(circle,
rgba(255,106,0,.12),
transparent 70%);

filter:blur(90px);

pointer-events:none;

z-index:var(--z-background);

animation:floatTwo 20s linear infinite;

}

/*=========================================================
TYPOGRAPHY
=========================================================*/

h1,h2,h3,h4,h5,h6{

font-family:var(--font-display);

font-weight:700;

line-height:1.1;

letter-spacing:var(--tracking-sm);

}

p{

color:var(--text-secondary);

}

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

a{

text-decoration:none;

color:inherit;

transition:var(--normal);

}

a:hover{

color:var(--primary);

}

/*=========================================================
IMAGES
=========================================================*/

img{

display:block;

max-width:100%;

}

/*=========================================================
LISTS
=========================================================*/

ul{

list-style:none;

}

/*=========================================================
BUTTONS
=========================================================*/

button{

font-family:inherit;

cursor:pointer;

border:none;

outline:none;

}

/*=========================================================
INPUTS
=========================================================*/

input,
textarea{

font-family:inherit;

outline:none;

}

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

.container{

width:min(92%,var(--container));

margin:auto;

}

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

.section{

padding:120px 0;

position:relative;

}

/*=========================================================
GLASS
=========================================================*/

.glass{

background:var(--glass);

border:1px solid var(--glass-border);

backdrop-filter:blur(var(--blur-md));

-webkit-backdrop-filter:blur(var(--blur-md));

border-radius:var(--radius-lg);

}

/*=========================================================
CARD
=========================================================*/

.card{

background:var(--card);

border:1px solid var(--border);

border-radius:var(--radius-lg);

transition:var(--normal);

box-shadow:var(--shadow-small);

}

.card:hover{

transform:translateY(-8px);

box-shadow:var(--shadow-cyan);

}

/*=========================================================
HEADINGS
=========================================================*/

.section-title{

font-size:3rem;

margin-bottom:20px;

}

.section-subtitle{

color:var(--primary);

font-weight:700;

text-transform:uppercase;

letter-spacing:4px;

margin-bottom:12px;

}

/*=========================================================
GLOW TEXT
=========================================================*/

.glow{

color:var(--primary);

text-shadow:

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

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#060606;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(

180deg,

#00E8FF,

#009EFF

);

border-radius:999px;

}

/*=========================================================
UTILITIES
=========================================================*/

.text-center{

text-align:center;

}

.hidden{

display:none;

}

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

@keyframes floatOne{

0%{

transform:translate(0,0);

}

50%{

transform:translate(80px,60px);

}

100%{

transform:translate(0,0);

}

}

@keyframes floatTwo{

0%{

transform:translate(0,0);

}

50%{

transform:translate(-80px,-60px);

}

100%{

transform:translate(0,0);

}

}