/* =====================================
   NEEKEE AI - PREMIUM AI WEBSITE STYLE
   ===================================== */


/* ---------- GLOBAL ---------- */


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html{
    scroll-behavior:smooth;
}


body{

    background:
    radial-gradient(circle at top right,
    rgba(0,229,255,0.08),
    transparent 30%),

    #050505;

    color:white;

    font-family:
    "Segoe UI",
    Arial,
    Helvetica,
    sans-serif;

    line-height:1.6;

}



a{

    text-decoration:none;
    color:white;

}



a:hover{

    color:#00e5ff;

}





/* ---------- HEADER ---------- */


header{

    position:sticky;
    top:0;

    z-index:1000;

    background:
    rgba(5,5,5,0.85);

    backdrop-filter:blur(15px);

    border-bottom:
    1px solid rgba(255,255,255,0.08);

}




nav{

    width:90%;

    max-width:1400px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px 0;

}





/* LOGO AREA */


.brand{

    display:flex;

    align-items:center;

    gap:15px;

}



.brand img{

    width:130 px;
    height:auto;

}



.logo-text{

    font-size:14px;

    font-weight:500;

    color:#ffffff;

    letter-spacing:1px;

}



.logo-text span{

    color:#ffffff;

}






/* MENU */


.menu{

    display:flex;

    list-style:none;

    gap:35px;

}



.menu a{

    font-size:16px;

    color:#ddd;

    transition:.3s;

}



.menu a:hover{

    color:#ff8c00;

}





/* ---------- HERO ---------- */


.hero{


    min-height:90vh;
    width:90%;
    max-width:1400px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
}



.hero-content{
    max-width:750px;
}




.hero h1{

    font-size:70px;
    line-height:0.75;
    font-weight:900;
    color:#ffd700;
}

.hero h1 span{
    font-size:57px;
    line-height:1.00;
    font-weight:700;
    color:#ff8c00;
}





.hero p{


    margin-top:30px;


    font-size:21px;


    color:#cccccc;


    max-width:650px;


}






/* BUTTONS */


.hero-buttons{

    margin-top:45px;

}



.primary-btn,
.secondary-btn{

    display:block;

    width:max-content;

    margin:30px auto;

    padding:15px 35px;

    border-radius:40px;

    font-weight:700;

    transition:.3s;

}


.primary-btn{

    background:#00e5ff;

    color:#000;

}


.primary-btn:hover{

    background:#ffd700;

    color:black;

}



.secondary-btn{


    border:1px solid #ff8c00;

    color:#ff8c00;


}



.secondary-btn:hover{

    background:#ff8c00;

    color:black;

}






/* ---------- AI ORB ---------- */


.ai-orb{


    width:300px;

    height:300px;


    border-radius:50%;


    border:

    3px solid #00e5ff;


    display:flex;


    justify-content:center;


    align-items:center;



    box-shadow:


    0 0 40px #00e5ff,


    inset 0 0 50px rgba(255,215,0,.3);



    animation:

    floating 5s infinite ease-in-out;


}




.ai-orb div{


    font-size:100px;

    font-weight:900;


    color:#ffd700;


}



@keyframes floating{


    0%{
        transform:translateY(0);
    }


    50%{
        transform:translateY(-25px);
    }


    100%{
        transform:translateY(0);
    }


}







/* ---------- SECTIONS ---------- */


.section{


    width:90%;

    max-width:1400px;

    margin:auto;


    padding:100px 0;


    text-align:center;


}



.section h2,
.about h2{


    font-size:45px;

    color:#ffd700;

    margin-bottom:60px;


}







/* ---------- CARDS ---------- */


.cards{


    display:flex;

    justify-content:center;

    gap:35px;

    flex-wrap:wrap;


}



.card{


    width:330px;


    padding:40px 30px;


    background:

    rgba(255,255,255,0.04);


    border:

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


    border-radius:25px;


    backdrop-filter:blur(10px);


    transition:.4s;


}




.card:hover{


    transform:translateY(-15px);


    border-color:#00e5ff;


    box-shadow:

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


}




.card h3{


    color:#ff8c00;


    font-size:26px;

    margin-bottom:20px;


}



.card p{


    color:#bbb;

    font-size:17px;


}






/* ---------- PROJECTS ---------- */


.projects{


    display:flex;

    justify-content:center;

    gap:35px;

    flex-wrap:wrap;


}



.project-card{


    width:350px;


    min-height:250px;


    padding:35px;


    text-align:left;


    background:

    linear-gradient(

    145deg,

    #111,

    #050505

    );


    border-radius:25px;


    border:

    1px solid #222;


    transition:.4s;


}



.project-card:hover{


    border-color:#ffd700;


    transform:scale(1.05);


}



.project-card h3{


    color:#ffd700;

    font-size:25px;


}



.project-card p{


    color:#ccc;

    margin:20px 0;


}




.project-card a{


    color:#00e5ff;

    font-weight:bold;


}





/* ---------- ABOUT ---------- */


.about{


    width:80%;

    max-width:900px;

    margin:auto;


    text-align:center;

    padding:80px 0;


}




.about p{


    font-size:24px;

    color:#ccc;


}







/* ---------- FOOTER ---------- */


footer{


    text-align:center;


    padding:35px;


    border-top:

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


    color:#888;


    background:#020202;


}






/* ---------- MOBILE ---------- */


@media(max-width:1000px){


nav{


    flex-direction:column;

    gap:25px;


}



.menu{


    flex-wrap:wrap;

    justify-content:center;

    gap:20px;


}



.hero{


    flex-direction:column;

    text-align:center;

    padding-top:70px;


}



.hero h1{


    font-size:45px;


}



.hero p{


    font-size:18px;


}



.ai-orb{


    margin-top:60px;


}


}





@media(max-width:600px){



.logo-text{

    font-size:25px;

}



.hero h1{

    font-size:36px;

}

.section h2,
.about h2{
    font-size:35px;
}

.primary-btn,
.secondary-btn{

    display:block;

    margin:15px auto;

    width:220px;
}
}
project-card img{

    width:100%;
    height:180px;
    object-fit:cover;
    border-radius:15px;
    margin-bottom:20px;

}

/* ==========================
   CONTACT PAGE
========================== */


.contact-container{

    display:flex;

    justify-content:center;

    gap:50px;

    margin-top:60px;

    flex-wrap:wrap;

}



.contact-info{

    max-width:400px;

    text-align:left;

}



.contact-info h2{

    color:#ffd700;

    margin-bottom:25px;

}



.contact-info h3{

    color:#ff8c00;

    margin-top:25px;

}



.contact-form-box{


    width:450px;


    background:

    rgba(255,255,255,0.04);


    padding:35px;


    border-radius:25px;


    border:

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


}




.contact-form-box input,
.contact-form-box textarea{


    width:100%;


    background:#111;


    border:

    1px solid #333;


    color:white;


    padding:15px;


    margin-bottom:20px;


    border-radius:10px;


    font-size:16px;


}



.contact-form-box textarea{


    resize:none;


}



.contact-form-box input:focus,
.contact-form-box textarea:focus{


    outline:none;


    border-color:#00e5ff;


}






@media(max-width:800px){


.contact-info{


    text-align:center;


}


.contact-form-box{

    width:100%;

}


}