/* =========================
   PHOENIX (X)
   FUTURE DARK UI DESIGN
========================= */


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



body{
    background-image: url("phoenix.png");

    background:
    radial-gradient(circle at top right,#7b008f,transparent 30%),
    radial-gradient(circle at bottom left,#3b0048,transparent 25%),
    #020408;

    color:white;
    min-height:100vh;

}







/* =========================
 NAVBAR
========================= */


.navbar{

    width:90%;
    margin:25px auto;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:20px 30px;

    background:rgba(255,255,255,0.05);

    backdrop-filter:blur(20px);

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

    border-radius:20px;

    position:sticky;

    top:20px;

    z-index:100;

}





.logo{

    font-size:30px;

    font-weight:bold;

    letter-spacing:2px;

}



.logo span{

    color:#ff00ff;

}







nav{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}





nav a{

    color:#ddd;

    text-decoration:none;

    font-size:14px;

    transition:.3s;

}





nav a:hover{

    color:#ff00ff;


    text-shadow:

    0 0 10px #ff00ff;

}







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


.hero,
.contact-section,
.projects-hero,
.about-hero{


    width:90%;

    margin:80px auto;


    padding:70px 50px;


    border-radius:35px;



    background:

    linear-gradient(

    135deg,

    rgba(255,0,255,.12),

    rgba(255,255,255,.03)

    );



    backdrop-filter:blur(25px);



    border:

    1px solid rgba(255,0,255,.25);


}







h1{

    font-size:60px;

    line-height:1.2;

}





h1 span{


    color:#ff00ff;


    text-shadow:

    0 0 20px #ff00ff;


}







p{

    color:#ffffff;

    line-height:1.8;

    margin-top:20px;

    font-size:18px;

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


.btn,
button{

    display:inline-block;

    margin-top:30px;

    padding:15px 35px;

    border-radius:30px;

    border:none;


    background:

    linear-gradient(
    90deg,
    #ff00ff,
    #8a00ff
    );


    color:white;

    text-decoration:none;

    cursor:pointer;


    box-shadow:

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


    transition:.3s;

}




.btn:hover,
button:hover{


    transform:translateY(-5px);


    box-shadow:

    0 0 40px #ff00ff;


}





.btn-outline{


    display:inline-block;


    margin:30px;


    padding:15px 35px;


    border-radius:30px;


    border:1px solid #ff00ff;


    color:white;


    text-decoration:none;


}







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


.feature-card,
.contact-card,
.info-card,
.project-card,
.about-card,
.mission-box,
.value-card{


    background:

    rgba(255,255,255,.06);



    backdrop-filter:

    blur(20px);




    border:

    1px solid rgba(255,0,255,.25);




    border-radius:25px;




    padding:35px;




    transition:.4s;


}







.feature-card:hover,
.contact-card:hover,
.project-card:hover,
.about-card:hover{


    transform:translateY(-10px);



    box-shadow:


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


}







/* =========================
 GRID SYSTEM
========================= */


.features,
.projects-container,
.contact-container,
.about-container{


    width:90%;


    margin:60px auto;



    display:grid;



    grid-template-columns:


    repeat(auto-fit,minmax(280px,1fr));



    gap:30px;


}







/* =========================
 PROJECT DETAILS
========================= */


details{


    cursor:pointer;

}



summary{


    list-style:none;
    


    font-size:25px;


    font-weight:bold;


   color:#ff00ff;


}




summary::after{


    content:"+";


    float:right;


    color:#ff00ff;


}



details[open] summary::after{


    content:"−";


}



.project-content{


    margin-top:25px;


    min-height:150px;


    border-top:


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


}



.status{


    color:#ff00ff;


    font-size:14px;


}






/* =========================
 CHART EFFECT
========================= */


.chart-box{


    height:250px;



    border-radius:25px;



    background:


    linear-gradient(

    145deg,

    #1a001f,

    #52005f

    );



    display:flex;



    flex-direction:column;



    justify-content:center;



    align-items:center;



    box-shadow:


    inset 0 0 40px #ff00ff;


}






.chart-line{


    width:80%;


    height:3px;



    background:#ff00ff;



    box-shadow:


    0 0 20px #ff00ff;


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


footer{


    margin-top:80px;


    padding:40px;


    text-align:center;


    background:#010204;



    border-top:


    1px solid rgba(255,0,255,.25);


}





footer h3{


    color:#ff00ff;


    font-size:25px;


}





footer p{


    color:white;


}









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


@media(max-width:900px){



.navbar{


    flex-direction:column;


    gap:20px;


}




h1{


    font-size:38px;


}





.hero,
.contact-section,
.projects-hero,
.about-hero{


    padding:40px 25px;


}





nav{


    justify-content:center;


}




.feature-card,
.project-card{


    padding:25px;


}




}





/* =========================
 CAPITAL LETTER STYLE
========================= */


.logo,
nav a,
h1,
h2,
h3,
button,
.btn,
.btn-outline,
summary{


    text-transform:uppercase;


}








/* =========================
 PHOENIX PURPLE GLOW
========================= */


::selection{


    background:#ff00ff;


    color:white;


}



::-webkit-scrollbar{


    width:10px;


}



::-webkit-scrollbar-thumb{


    background:#ff00ff;


    border-radius:10px;


}