/* ===== GOOGLE FONT ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');



/* ===== BODY ===== */
body{
    margin:0;
    font-family:'Poppins',sans-serif;
    background: black;   /* default black */
    min-height:100vh;
    transition: background 0.5s;
}


/* After lamp click */

body.light-on{

background: linear-gradient(to right,#74ebd5,#ACB6E5);

}
#countdown{

color:white;

font-size:24px;

font-weight:bold;

text-align:center;

margin-top:20px;

}
/* Dark mode style */

.dark{
  background: #121212;
  color: white;
}

.dark .container{
  background: #1e1e1e;
}

.dark input{
  background: #333;
  color: white;
  border: 1px solid white;
}

/* ===== NAV ===== */
nav{
    background:rgba(98,89);
    color:white;
    padding:0px;
    text-align:center;
    font-size:14px;
    font-weight:bold;
    box-shadow:0 4px 10px rgba(0,0,0,0.3);
}/* Add this to your form.css file */
nav a {
    text-decoration: none;
    color: white; /* Ensures the text stays white as intended in your HTML */
}

/* ===== STICKY TAB BAR ===== */

nav{

position: sticky;

top: 0;

z-index: 1000;

background: rgba(0,0);

padding: 0px;

display: flex;

justify-content: space-around;

align-items: center;

box-shadow: 0 4px 10px rgba(0,0,0,0.3);

}nav{

position: sticky;
top: 0;

backdrop-filter: blur(5px);

background: rgba(0,0);

}




/* ===== FORM CONTAINER ===== */
form{

    background:white;
    max-width:500px;
    margin:40px auto;
    padding:30px;

    border-radius:15px;

    box-shadow:0 10px 30px rgba(0,0,0,0.2);

}

/* ===== INPUT FIELDS ===== */

input[type=text],
input[type=email],
input[type=tel],
input[type=file]{

    width:100%;
    padding:12px;
    margin:8px 0;

    border-radius:8px;
    border:1px solid #ccc;

    font-size:16px;

    transition:0.3s;

}

/* Hover effect */

input:focus{

    border-color:#0033cc;
    outline:none;
    box-shadow:0 0 5px rgba(0,51,204,0.5);

}

/* ===== CHECKBOX ===== */

label{

font-size:16px;

}

/* ===== BUTTON ===== */

input[type=submit]{

    width:100%;
    background:#0033cc;
    color:white;
    padding:12px;

    border:none;
    border-radius:8px;

    font-size:18px;
    cursor:pointer;

    transition:0.3s;

}

input[type=submit]:hover{

background:#001a80;

}

/* ===== BACK BUTTON ===== */

input[type=button]{

background:#28a745;
color:white;
padding:10px 20px;
border:none;
border-radius:8px;
cursor:pointer;

}

input[type=button]:hover{

background:#1e7e34;

}

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

@media(max-width:600px){

form{

margin:15px;

}

}/* ===== LAMP CONTAINER ===== */

.lamp-container{

text-align:center;

margin-top:20px;

}


/* Rope animation */

.rope{

width:6px;

height:140px;

background:white;

margin:auto;

cursor:pointer;

transition: transform 0.3s;

}


/* Pull effect */

.rope.pull{

transform:translateY(40px);

}


/* Lamp swing */

.lamp{
width:120px;
display:block;
margin:auto;

/* IMPORTANT */
transform-origin: top center;

/* smooth animation */
transition: transform 0.3s ease;
}
.lamp.swing{
animation: swingLamp 0.6s ease;
}


@keyframes swingLamp{

0%{ transform: rotate(0deg); }

25%{ transform: rotate(15deg); }

50%{ transform: rotate(-10deg); }

75%{ transform: rotate(5deg); }

100%{ transform: rotate(0deg); }

}



/* Hide form initially */

#formBox{

display:none;

animation: fadeIn 0.5s;

}


/* Fade animation */

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}
.dark input[type="checkbox"]{

accent-color: black;

}


.dark label{

color: black;

}
/* NAV WHITE COLOR */
nav a{
color:white;
text-decoration:none;
}


/* GLOW EFFECT */
.glow{

color:white;

text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #00ccff,
0 0 40px #00ccff,
0 0 80px #00ccff;

}


/* TYPING CURSOR */
.typing::after{

content:"|";

animation: blink 1s infinite;

}

@keyframes blink{

0%,50%,100%{opacity:1;}
25%,75%{opacity:0;}

}