/*==================================
        UN ARMY HERO SECTION
==================================*/


.hero{


height:100vh;


display:flex;


align-items:center;


justify-content:center;


position:relative;


overflow:hidden;


text-align:center;


}




/* BACKGROUND OVERLAY */


.hero-overlay{


position:absolute;


inset:0;


background:


linear-gradient(

180deg,

rgba(5,8,22,.25),

rgba(5,8,22,.95)

);



z-index:1;



}




/* CONTENT */


.hero-content{


position:relative;


z-index:2;


animation:

heroEnter 1.5s ease;


}




/* SYSTEM TAG */


.hero-tag{


display:inline-block;


padding:10px 30px;


margin-bottom:35px;


font-size:13px;


letter-spacing:5px;


color:#00e5ff;


border:

1px solid #00e5ff;



background:

rgba(0,229,255,.05);



box-shadow:


0 0 25px rgba(0,229,255,.5);



animation:

tagPulse 2s infinite;


}





@keyframes tagPulse{


0%,100%{


box-shadow:

0 0 15px #00e5ff;


}



50%{


box-shadow:

0 0 40px #00e5ff;


}


}





/* TITLE */


.hero h1{


font-size:100px;


font-weight:900;


letter-spacing:20px;


color:white;


position:relative;


margin:0;


text-shadow:


0 0 20px #00e5ff,

0 0 60px #00e5ff;



}





/* GLITCH */


.hero h1::before,

.hero h1::after{


content:attr(data-text);


position:absolute;


left:0;


top:0;


width:100%;


overflow:hidden;



}





.hero h1::before{


color:#00e5ff;


z-index:-1;


animation:

glitchOne 2s infinite;


}





.hero h1::after{


color:#8a2be2;


z-index:-2;


animation:

glitchTwo 1.5s infinite;


}







/* DESCRIPTION */


.hero p{


margin-top:35px;


font-size:22px;


line-height:2;


letter-spacing:8px;


color:#bbb;


text-shadow:

0 0 15px rgba(255,255,255,.3);



}





/* BUTTON AREA */


.hero-buttons{


margin-top:55px;


display:flex;


justify-content:center;


gap:30px;


}




/* BUTTON */


.cyber-btn{


width:220px;


height:65px;


display:flex;


align-items:center;


justify-content:center;



background:

transparent;



border:

1px solid #00e5ff;



color:white;



font-size:18px;



letter-spacing:4px;



text-decoration:none;



position:relative;



overflow:hidden;



cursor:pointer;



transition:.4s;



}




.cyber-btn::before{


content:"";


position:absolute;


left:-100%;


top:0;


width:100%;


height:100%;


background:


linear-gradient(

90deg,

transparent,

rgba(0,229,255,.5),

transparent

);



transition:.5s;


}




.cyber-btn:hover::before{


left:100%;


}




.cyber-btn:hover{


background:#00e5ff;


color:#050816;



box-shadow:


0 0 50px #00e5ff;



transform:

translateY(-5px);


}





/* PURPLE BUTTON */


.cyber-btn.purple{


border-color:#8a2be2;


}





.cyber-btn.purple:hover{


background:#8a2be2;



box-shadow:


0 0 50px #8a2be2;



}






/* HERO ENTER */


@keyframes heroEnter{


from{


opacity:0;


transform:

translateY(80px);


}



to{


opacity:1;


transform:

translateY(0);


}


}





/* GLITCH ANIMATION */


@keyframes glitchOne{


0%{


clip-path:

inset(0 0 90% 0);


}




20%{


clip-path:

inset(20% 0 40% 0);


transform:

translateX(-8px);


}



40%{


clip-path:

inset(70% 0 10% 0);


transform:

translateX(8px);


}



100%{


clip-path:

inset(0);


}


}






@keyframes glitchTwo{


0%{


clip-path:

inset(90% 0 0 0);


}




30%{


clip-path:

inset(10% 0 60% 0);


transform:

translateX(8px);


}



70%{


clip-path:

inset(50% 0 20% 0);


transform:

translateX(-8px);


}



100%{


clip-path:

inset(0);


}


}






/* MOBILE */


@media(max-width:900px){



.hero h1{


font-size:45px;


letter-spacing:8px;


}



.hero p{


font-size:15px;


letter-spacing:4px;


}




.hero-buttons{


flex-direction:column;


align-items:center;


}



.cyber-btn{


width:180px;


}



}