/* General */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI',sans-serif; color:#fff; scroll-behavior:smooth; background:#000; overflow-x:hidden; }

/* Header */
header { display:flex; flex-direction:column; align-items:center; background-color:rgba(0,0,0,0.7); padding:10px 20px; position:sticky; top:0; z-index:100; }
.logo-container { display:flex; align-items:center; gap:10px; }
.logo { width:100px; transition:transform 0.3s; }
.logo:hover { transform: scale(1.2) rotate(5deg); }
nav ul { list-style:none; display:flex; gap:20px; margin-top:10px; }
nav ul li a { color:#fff; text-decoration:none; transition:color 0.3s; }
nav ul li a:hover { color:#00ffff; }

/* Hero Section */
#hero { position:relative; height:80vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; overflow:hidden; }
#particles-js { position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; }
.hero-text { font-size:3em; font-weight:bold; }
.typing { border-right:2px solid #fff; padding-right:5px; animation:blink 0.7s infinite; }
@keyframes blink{0%,50%,100%{border-color:#fff}25%,75%{border-color:transparent}}

/* Sections */
section { padding:60px 20px; text-align:center; }
.cards, .portfolio-items, .testimonials-container { display:flex; justify-content:center; flex-wrap:wrap; gap:20px; margin-top:20px; }
.card, .portfolio-item, .testimonial { background-color: rgba(0,0,0,0.6); padding:20px; border-radius:12px; transition: transform 0.5s, box-shadow 0.5s; transform-style: preserve-3d; perspective: 1000px; opacity:0; transform: translateY(20px); }
.card:hover, .portfolio-item:hover, .testimonial:hover { transform: rotateY(10deg) scale(1.1); box-shadow: 0 0 25px #00ffff, 0 0 50px #ff0080; }
.appear { opacity:1; transform: translateY(0); transition: all 0.8s ease-out; }

/* Contact Form */
#contact-form { display:flex; flex-direction:column; gap:15px; max-width:400px; margin:0 auto; }
#contact-form input, #contact-form textarea { padding:10px; border:none; border-radius:8px; outline:none; background:rgba(255,255,255,0.1); color:#fff; transition:0.3s; }
#contact-form input:focus, #contact-form textarea:focus { background:rgba(255,255,255,0.2); }
#contact-form button { padding:12px; border:none; border-radius:8px; background-color:#00ffff; color:#000; font-weight:bold; cursor:pointer; transition:0.3s; }
#contact-form button:hover { background-color:#00baba; color:#fff; }

/* Footer */
footer { text-align:center; padding:15px; background-color:rgba(0,0,0,0.4); }

/* Floating Chatbot */
#chatbot-widget { position:fixed; bottom:20px; right:20px; z-index:9999; }
#chatbot-icon { width:60px; height:60px; background:#00ffff; color:#000; display:flex; justify-content:center; align-items:center; border-radius:50%; cursor:pointer; font-size:24px; box-shadow:0 0 15px #00ffff; transition:0.3s; }
#chatbot-icon:hover { transform:scale(1.1); }
#chat-container { display:none; flex-direction:column; width:320px; max-height:420px; background-color:rgba(0,0,0,0.85); border-radius:12px; overflow:hidden; box-shadow:0 0 25px #00ffff; }
#chatbot-header { background-color:#00ffff; color:#000; padding:10px; font-weight:bold; text-align:center; }
.chat-box { flex:1; padding:10px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; }
.message { padding:8px 12px; border-radius:18px; max-width:80%; word-wrap:break-word; opacity:0; transform:translateY(20px); animation:fadeIn 0.3s forwards; }
@keyframes fadeIn { to { opacity:1; transform:translateY(0); } }
.user-message { background-color:#00ffff; align-self:flex-end; color:#000; }
.bot-message { background-color:#ff0080; align-self:flex-start; color:#fff; }
.typing-indicator { align-self:flex-start; font-style:italic; color:#fff; opacity:0.6; }
.typing-indicator::after { content: ''; display:inline-block; margin-left:5px; width:6px; height:6px; background:#fff; border-radius:50%; animation:dots 1s infinite steps(3,end); }
@keyframes dots { 0%,20%{transform:translateX(0)}40%{transform:translateX(6px)}60%{transform:translateX(12px)}80%,100%{transform:translateX(18px)} }
.input-container { display:flex; border-top:1px solid rgba(255,255,255,0.2); }
#user-input { flex:1; padding:8px; border:none; outline:none; font-size:14px; background-color:rgba(255,255,255,0.1); color:#fff; }
#send-btn, #voice-btn { padding:0 12px; border:none; cursor:pointer; transition:0.3s; }
#send-btn { background:#00ffff; color:#000; }
#send-btn:hover { background-color:#00baba; color:#fff; }
#voice-btn { background:#ff0080; color:#fff; }
#voice-btn:hover { background:#d60070; }