/* Reset & Base */
* {margin:0; padding:0; box-sizing:border-box;}
body {font-family:'Poppins',sans-serif; background:#000; color:#fff; overflow-x:hidden; line-height:1.6;}

/* Navbar */
.navbar {position:fixed; top:0; width:100%; display:flex; justify-content:space-between; align-items:center; padding:15px 40px; background:rgba(0,0,0,0.7); backdrop-filter:blur(6px); z-index:1000;}
.navbar .logo {font-size:1.5rem; color:#ffcc33; font-weight:bold;}
.navbar nav a {margin:0 15px; color:#fff; text-decoration:none; transition:color 0.3s;}
.navbar nav a:hover {color:#ffcc33;}

/* Hero */
.hero {height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; position:relative; z-index:2;}
.hero h1 {font-size:3rem; color:#ffcc33; text-shadow:0 0 15px #ffcc33;}
.hero p {font-size:1.2rem; margin-top:10px; color:#fff;}
.btn {margin-top:20px; padding:10px 20px; background:#ffcc33; color:#000; border:none; border-radius:25px; cursor:pointer; transition:0.3s;}
.btn:hover {background:#ff9900; transform:scale(1.05);}

/* Sections */
section {padding:80px 20px; max-width:1000px; margin:auto; z-index:2; position:relative; text-align:center;}
h2 {font-size:2.2rem; margin-bottom:30px; color:#ffcc33; text-shadow:0 0 15px #ffcc33;}
p {font-size:1.1rem; color:#fff;}

/* Cards */
.card-container {display:flex; flex-wrap:wrap; gap:20px; justify-content:center;}
.card {background:rgba(255,255,255,0.08); border-radius:15px; overflow:hidden; width:280px; text-align:center; box-shadow:0 0 15px rgba(255,204,51,0.3); transition:0.3s;}
.card img {width:100%; height:180px; object-fit:cover;}
.card-content {padding:15px;}
.card h3 {color:#ffcc33; margin:10px 0;}
.card:hover {transform:translateY(-8px); box-shadow:0 0 25px rgba(255,204,51,0.6);}

/* Modal */
.modal {display:none; position:fixed; z-index:2000; padding-top:80px; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.95);}
.modal-content {margin:auto; display:block; width:80%; max-width:700px;}
.close, .prev, .next {position:absolute; top:50%; transform:translateY(-50%); color:#fff; font-size:40px; font-weight:bold; cursor:pointer; user-select:none;}
.close {top:20px; right:40px;}
.prev {left:20px;}
.next {right:20px;}
.close:hover, .prev:hover, .next:hover {color:#ffcc33;}

/* Toast */
.toast {position:fixed; bottom:30px; right:30px; background:#111; color:#fff; padding:0.8rem 1.2rem; border-radius:8px; opacity:0; transform:translateY(20px); transition:all 0.3s ease; z-index:2000;}
.toast.show {opacity:1; transform:translateY(0);}

/* Fade-in */
.fade-in {opacity:0; transform:translateY(20px); transition:opacity 1s ease, transform 1s ease;}
.fade-in.visible {opacity:1; transform:translateY(0);}

/* Iron Man Panels */
#bgAnimation {position:fixed; top:0; left:0; width:100%; height:100%; display:flex; z-index:-1; overflow:hidden;}
.panel {flex:1; background:linear-gradient(145deg,#8b0000,#330000); box-shadow:inset 0 0 50px rgba(255,204,51,0.2); transition:transform 0.8s ease-in-out;}
.panel.left.active {transform:translateX(-100%);}
.panel.right.active {transform:translateX(100%);}

/* Footer */
footer {text-align:center; padding:20px; background:rgba(0,0,0,0.8); color:#fff; font-size:0.9rem;}
.social-links a {margin:0 10px; font-size:1.2rem; color:#fff; transition:0.3s;}
.social-links a:hover {color:#ffcc33;}

/* Contact Form */
#contactForm {display:flex; flex-direction:column; gap:15px; max-width:500px; margin:20px auto 0;}
#contactForm input, #contactForm textarea {padding:10px; border-radius:6px; border:none; font-size:1rem;}
#contactForm textarea {resize: vertical; min-height:100px;}
#contactForm button {align-self:flex-start;}