/*================================
    CYBER INFO SECTIONS
================================*/


.info-section{

width:90%;

margin:150px auto;


display:flex;

align-items:center;

justify-content:space-between;


gap:80px;


opacity:0;


transform:translateY(100px);


transition:

1s ease;


}



.info-section.show{


opacity:1;


transform:translateY(0);


}




.info-text{

width:50%;


}



.info-text h2{


font-size:60px;


letter-spacing:8px;


color:white;


text-shadow:

0 0 25px #00e5ff;


margin-bottom:30px;


}



.info-text p{


font-size:20px;


line-height:2;


color:#bbb;


}




.info-image{


width:50%;


display:flex;

justify-content:center;


}








.reverse{


flex-direction:row-reverse;


}


/* Mobile */

@media(max-width:900px){


.info-section{


flex-direction:column;


}


.info-text,

.info-image{


width:100%;


}


.info-text h2{


font-size:40px;


}


}
/*================================
        WHY UN SECTION
================================*/


.why-section{

    position:relative;

}



.section-tag{


    color:#00e5ff;

    letter-spacing:5px;

    font-size:13px;

    text-shadow:

    0 0 15px #00e5ff;

}



.image-frame{


    position:relative;

    padding:20px;


}



.image-frame::before{


    content:"";

    position:absolute;

    inset:0;

    border:1px solid #00e5ff;


    clip-path:

    polygon(

    0 0,

    100% 0,

    100% 85%,

    85% 100%,

    0 100%

    );


    box-shadow:

    0 0 30px #00e5ff;


}



.cyber-image{

    width:420px;

    height:330px;

    position:relative;

    overflow:hidden;

    border:1px solid rgba(0,229,255,.5);

    background:#050816;

    box-shadow:

    0 0 40px rgba(0,229,255,.4);

}


.cyber-image img{


    width:100%;

    height:100%;


    object-fit:cover;


    filter:

    contrast(1.15)

    brightness(.8)

    saturate(1.2);


    transition:.7s;


}



.cyber-image:hover img{


    transform:scale(1.1);


    filter:

    contrast(1.3)

    brightness(1)

    saturate(1.5);


}



.image-overlay{


    position:absolute;

    inset:0;


    background:


    linear-gradient(

    135deg,

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

    rgba(138,43,226,.35),

    transparent

    );


}



.scan-effect{


    position:absolute;

    left:0;

    top:-100%;

    width:100%;

    height:40%;


    background:

    linear-gradient(

    transparent,

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

    transparent

    );


    animation:

    imageScan 4s infinite;


}



@keyframes imageScan{


    0%{

        top:-50%;

    }


    100%{

        top:120%;

    }


}



.feature-list{


    display:flex;

    gap:20px;

    margin-top:40px;

    flex-wrap:wrap;


}



.feature-card{


    width:170px;


    padding:20px;


    background:

    rgba(5,8,22,.45);


    border:

    1px solid rgba(0,229,255,.2);


    backdrop-filter:

    blur(10px);


    transition:.4s;


}



.feature-card span{


    color:#8a2be2;

    font-size:25px;


}



.feature-card h3{


    color:white;

    letter-spacing:2px;

    margin:15px 0;


}



.feature-card p{


    font-size:14px;

    color:#999;


}



.feature-card:hover{


    transform:

    translateY(-12px);


    border-color:#00e5ff;


    box-shadow:

    0 0 35px rgba(0,229,255,.4);


}



@keyframes imagePulse{


    0%,100%{

        transform:scale(1);

    }


    50%{

        transform:scale(1.03);

    }

}