styles.css

body.page1{
    
  font-family: 'Roboto Flex', sans-serif;
  background-color: #000;
  background-size: cover;
}

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

.navbar{
  background-color: black; 
  color: white; 
  padding: 20px 0; 
  width:100%;
}


.container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}


.logo img {
  max-width: 35px; 
}


.nav-links a {
  color: white; 
  text-decoration: none; 
  margin: 0 15px; 
  font-weight: bold;
  transition: color 0.3s ease; 
}


.nav-links {
  text-align: center;
}


.nav-links a.active {
  color: #4CAF50; 
}

.nav-links a:hover {
  color: #4CAF50; 
}

/*Footer CSS */

.content {
  min-height: calc(100vh - 150px); /* Adjust based on your footer's height and nav's height */
  padding-bottom: 50px; /* Ensure content is above the footer */
}

/* Flexbox setup to push footer to the bottom */
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.footer {
  margin-top: auto; /* Push footer to the bottom */
  background-color: black; /* Background color */
  color: white; 
  padding: 20px 0;
  width: 100%;
}

.footer .container {
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

/*Home Carousel*/

h2 {
font-size: 60px;
text-align: center;
color: white; /* Added color for h2 */
}

.content-slider {
width: 100%;
height: 360px;
}

.slider {
height: 320px;
width: 680px;
margin: 40px auto 0;
overflow: visible;
position: relative;
}

.mask {
overflow: hidden;
height: 320px;
}

.slider ul {
margin: 0;
padding: 0;
position: relative;
}

.slider li {
width: 680px;
height: 320px;
position: absolute;
top: -325px;
list-style: none;
}

.slider .quote {
font-size: 40px;
font-style: italic;
color: rgba(255, 255, 255, 0.915); 
}

.slider .source {
font-size: 20px;
text-align: right;
}

.slider li.anim1 {
animation: cycle 15s linear infinite;
}

.slider li.anim2 {
animation: cycle2 15s linear infinite;
}

.slider li.anim3 {
animation: cycle3 15s linear infinite;
}

.slider li.anim4 {
animation: cycle4 15s linear infinite;
}

.slider li.anim5 {
animation: cycle5 15s linear infinite;
}

.slider:hover li {
animation-play-state: paused;
}

@keyframes cycle {
0% {
  top: 0px;
}
4% {
  top: 0px;
}
16% {
  top: 0px;
  opacity: 1;
  z-index: 0;
}
20% {
  top: 325px;
  opacity: 0;
  z-index: 0;
}
21% {
  top: -325px;
  opacity: 0;
  z-index: -1;
}
50% {
  top: -325px;
  opacity: 0;
  z-index: -1;
}
92% {
  top: -325px;
  opacity: 0;
  z-index: 0;
}
96% {
  top: -325px;
  opacity: 0;
}
100% {
  top: 0px;
  opacity: 1;
}
}

@keyframes cycle2 {
0% {
  top: -325px;
  opacity: 0;
}
16% {
  top: -325px;
  opacity: 0;
}
20% {
  top: 0px;
  opacity: 1;
}
24% {
  top: 0px;
  opacity: 1;
}
36% {
  top: 0px;
  opacity: 1;
  z-index: 0;
}
40% {
  top: 325px;
  opacity: 0;
  z-index: 0;
}
41% {
  top: -325px;
  opacity: 0;
  z-index: -1;
}
100% {
  top: -325px;
  opacity: 0;
  z-index: -1;
}
}

@keyframes cycle3 {
0% {
  top: -325px;
  opacity: 0;
}
36% {
  top: -325px;
  opacity: 0;
}
40% {
  top: 0px;
  opacity: 1;
}
44% {
  top: 0px;
  opacity: 1;
}
56% {
  top: 0px;
  opacity: 1;
  z-index: 0;
}
60% {
  top: 325px;
  opacity: 0;
  z-index: 0;
}
61% {
  top: -325px;
  opacity: 0;
  z-index: -1;
}
100% {
  top: -325px;
  opacity: 0;
  z-index: -1;
}
}

@keyframes cycle4 {
0% {
  top: -325px;
  opacity: 0;
}
56% {
  top: -325px;
  opacity: 0;
}
60% {
  top: 0px;
  opacity: 1;
}
64% {
  top: 0px;
  opacity: 1;
}
76% {
  top: 0px;
  opacity: 1;
  z-index: 0;
}
80% {
  top: 325px;
  opacity: 0;
  z-index: 0;
}
81% {
  top: -325px;
  opacity: 0;
  z-index: -1;
}
100% {
  top: -325px;
  opacity: 0;
  z-index: -1;
}
}

@keyframes cycle5 {
0% {
  top: -325px;
  opacity: 0;
}
76% {
  top: -325px;
  opacity: 0;
}
80% {
  top: 0px;
  opacity: 1;
}
84% {
  top: 0px;
  opacity: 1;
}
96% {
  top: 0px;
  opacity: 1;
  z-index: 0;
}
100% {
  top: 325px;
  opacity: 0;
  z-index: 0;
}
}

/* Home body styles*/
.home-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center; 
  margin-top: 50px; 
  margin-bottom: 100px;
  }
  
  .home-heading{
      color:rgba(255, 220, 95, 0.947);
      font-size: 45px;
      font-weight: 600;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
          }
  
  
  .outer-container{
    display:flex;
    flex-direction: row;
    width:550px;
    padding-top:80px;
    justify-content:space-between;
    align-items: center;
    }
  
  form{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .column2 p {
    color:white;
    font-size: 25px;
    font-weight:500;
    width:300px;
  }
  
  input[type="text"] {
    width:250px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 5px;
    font-size: 16px;
    outline: none;
  }
  
  button[type="submit"] {
    padding: 8px 1px;
    display:block;
    width:100px;
    border: none;
    border-radius: 4px;
    background-color: #37874aec;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top:10px;
  }
  
  button[type="submit"]:hover {
    background-color: #29783b;
  }

/*sign-up page css */

body.page2{
background-image: url('img/purple-graphic-bg.jpeg');
background-size: cover; 
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

.signup-form-container {
display:flex;
flex-direction:column;
align-items: center;
width:450px;
background-color: #ffffff05;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(25px);
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
margin: 0 auto;
margin-top: 50px; 

}

.signup-form-container:hover{
  background: transparent radial-gradient(at calc(var(--mouse-x, 0) * 100%) calc(var(--mouse-y, 0) * 100%), #824BB6, transparent) no-repeat 0 0  
}

.signup-form-container p{
  margin-bottom: 25px;
  font-size: 30px;
  font-weight: 500px;
  color:white;
}

.form-group {
  margin-bottom: 40px;
  width:330px;
}

label {
display: block;
margin-bottom: 5px;
color:white;
}

input[type="text"],
input[type="email"],
input[type="password"],
button {
  width: 100%;
  padding: 8px;
  border-radius: 3px;
  border: 1px solid #ccc;
}



/*about page interactive heading*/

body .page3{
background-color: #5a69c0;
}

h1 {
font-family: 'Space Mono', monospace;
font-size: clamp(3rem, 10vw, 10rem);
color: white;
padding: 0rem clamp(1rem, 2vw, 3rem);
white-space: nowrap;
border-radius: clamp(0.4rem, 0.75vw, 1rem);
margin: 10px;
position: absolute;
left: 50%;
top: 10%;
translate: -50% -50%;
z-index: 3;
}

.about-description{
font-size:15px;
position:absolute;
left: 15%;
top: 15%;
text-align: center;
}

.card-container{
display:flex;
flex-direction:row;
margin-top:200px;
margin-left:60px;
margin-right:60px;
justify-content: space-between;
}

.card{
padding:20px;
background:#4CAF50;
border-radius:15px;
box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
width:300px;
height:400px;
cursor:pointer;
transition:all 0.3s ease-in-out;
}

.card:hover{
  box-shadow:0 0 20px rgba(0, 0, 0, 0.3);
  scale:1.04;
  background:white;
}

/*Contact page styles*/

/*Carousel Style*/

body.page4{
background-image: url("img/Grey Photographic Spot Light Backdrop White Background Black And White Shade, Printing, Ornaments, Graceful Background Image And Wallpaper for Free Download.jpeg");
background-size: cover;
}

.carousel-inner {
max-width: 100%;
width: 100%;
margin: 0 auto;
}

.carousel-container {
position: absolute;
height: 300px;
width: 600px;
top: 60px;
left: calc(50% - 250px);
display: flex;
align-items: center;
margin-top:100px;
}

.carousel-card {
display: flex;
height: 280px;
width: 200px;
background-color: #17141d;
border-radius: 10px;
box-shadow: -1rem 0 3rem #000;
/*   margin-left: -50px; */
transition: 0.4s ease-out;
position: relative;
left: 0px;
}

.carousel-card:not(:first-child) {
  margin-left: -50px;
}

.carousel-card:hover {
transform: translateY(-20px);
transition: 0.4s ease-out;
}

.carousel-card:hover ~ .card {
position: relative;
left: 50px;
transition: 0.4s ease-out;
}

.carousel-card-title {
color: white;
font-weight: 300;
position: absolute;
left: 20px;
top: 15px;
}

.bar {
position: absolute;
top: 100px;
left: 20px;
height: 5px;
width: 150px;
}

.emptybar {
background-color: #2e3033;
width: 100%;
height: 100%;
}

.filledbar {
position: absolute;
top: 0px;
z-index: 3;
width: 0px;
height: 100%;
background: rgb(0,154,217);
background: linear-gradient(90deg, rgba(0,154,217,1) 0%, rgba(217,147,0,1) 65%, rgba(255,186,0,1) 100%);
transition: 0.6s ease-out;
color:rgba(255, 255, 255, 0.472)
}

.carousel-card:hover .filledbar {
width: 120px;
transition: 0.4s ease-out;
}

.circle {
position: absolute;
top: 150px;
left: calc(50% - 60px);
}

.stroke {
stroke: white;
stroke-dasharray: 360;
stroke-dashoffset: 360;
transition: 0.6s ease-out;
}

svg {
fill: #17141d;
stroke-width: 2px;
}

.card:hover .stroke {
stroke-dashoffset: 100;
transition: 0.6s ease-out;
}

.black-strip{
height:80px;
width:100%;
position: absolute;
top:70%;
background-color: #17141d;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.black-strip p{
color:white;
}

body.incident-page {
background-color: #000;
color: #fff;
font-family: 'Roboto Flex', sans-serif;
}

.card-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin-top: 20px;
}

.incident-card {
color: #fff;
border: 1px solid #555;
border-radius: 8px;
width: calc(33.33% - 20px);
transition: transform 0.3s ease-in-out;
cursor:pointer;
padding: 20px;
height: 300px;
display: grid;
place-items: center;
text-align: center;
margin-left: 40px;
}

.incident-card:hover {
transform: scale(1.05);
border-color: rebeccapurple;
background-color: rgb(51,51,51);
background: transparent radial-gradient(at calc(var(--mouse-x, 0) * 100%) calc(var(--mouse-y, 0) * 100%), rgb(0,0,255,0.2), transparent) no-repeat 0 0 
}

.card-body {
padding: 20px;
}

.card-title {
font-size: 1.5rem;
margin-bottom: 50px;
}

.card-text {
font-size: 1rem;
}

h2 {
color: #fff;
}

@media (max-width: 768px) {
.incident-card {
    width: 100%;
}
}

.incident-row{
display: flex;
justify-content:space-evenly;
}