body {
  margin: 0;
   font-family: 'Poppins', sans-serif;
}



.topnav {
  display: flex;
align-items: center; 
justify-content: space-between;
  position: relative; 
  


  
  
  background-color: #0e183e;

}

.nav-links{
 margin-right: 20px;
}
 .topnav .nav-links a{

  

display: inline-flex;
margin-left: 30px;
/*padding-left: 50px;*/



color: #f2f2f2;
 
    
  
  
  text-decoration: none;
  font-size: 20px;
}

.topnav a img{
  width:150px;
  height:auto;

}



.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/*.topnav a.active {
  background-color: #04AA6D;
  color: white;
}
*/
.topnav .icon {
      display: none;
      

  

  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 25px;

}
@media screen and (max-width: 600px) {
  
  .topnav a.icon {
    float: right;
 display:flex;

  }
}

@media screen and (max-width: 600px) {
  .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    background-color: #0e183e;
    position: absolute;
    top: 54px;
    left: 0;
      z-index: 999;   /* ADD THIS */

  }

  .nav-links a {
    display: block;
    margin: 15px 0;
    text-align: center;
  }

  .nav-links.responsive {
    display: flex;
  }

 
}


/*video section*/
#myVideo {
    width: 100%; /* Makes the video responsive within its container */
    height: auto; /* Maintains the aspect ratio */
    /*border: 2px solid #333; /* Adds a border */
    /*border-radius: 5px; /* Rounds the corners */
}

/*footer section*/
.footer {
  background: #0e183e;
  color: #fff;
  padding: 50px 20px;
  font-family: Arial, sans-serif;
}

.footer a {
  color: #ccc;
  text-decoration: none;
}

.footer a:hover {
  color: #fff;
}

/* ROW Layout */
.footer-container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  flex-direction: row;   /* ROW layout */
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap; /* responsive */
}

/* Columns */
.footer-column {
  flex: 1;
  min-width: 220px;
}

.footer-column h3 {
  margin-bottom: 15px;
  font-size: 18px;
}

/* Subscribe Form */
.subscribe-form {
  display: flex;
  margin-top: 10px;
}

.subscribe-form input {
  padding: 8px;
  border: none;
  outline: none;
  flex: 1;
}

.subscribe-form button {
  padding: 8px 15px;
  border: none;
  background: #ff3c00;
  color: white;
  cursor: pointer;
}

.subscribe-form button:hover {
  background: #e03200;
}

/* Copyright */
.copyright {
  margin-top: 15px;
  font-size: 14px;
  color: #aaa;
}

/* Mobile Responsive */
@media (max-width: 600px) {
  .footer-container {
    flex-direction: column;
    text-align: center;
  }

  .subscribe-form {
    justify-content: center;
  }
}


/*whyshock css*/



/* SECTION SPACING */
section{
  padding:40px 10%;
  text-align:center;
}

/* HEADINGS */
h1{
  font-size:48px;
  font-weight:700;
}

h2{
  font-size:36px;
  margin-bottom:20px;
}



/* BUTTON STYLE */
button{
  background:#00e5ff;
  color:#070b1f;
  border:none;
  padding:14px 28px;
  font-size:16px;
  border-radius:30px;
  cursor:pointer;
  transition:0.3s;
}

button:hover{
  transform:scale(1.1);
  box-shadow:0 0 20px #00e5ff;
}


.features{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:30px;
}

.feature{
  background:#0e183e;
  padding:30px;
  border-radius:15px;
  transition:0.4s;
  color: #f2f2f2;
}

.feature:hover{
  transform:translateY(-10px);
  box-shadow:0 0 20px #0e183e;
}

.feature{
  opacity:0;
  transform:translateY(40px);
}
.why-hero img{
  width:100%;
  max-width:420px;
  height:auto;
  display:block;
  margin:30px auto;

  /* Strong layered glow */
  filter:
    drop-shadow(0 0 20px #00e5ff)
    drop-shadow(0 0 40px #00e5ff)
    drop-shadow(0 0 80px #0099ff);

  animation: shockGlow 2s ease-in-out infinite alternate;
}

/* Pulsing glow animation */
@keyframes shockGlow{
  from{
    filter:
      drop-shadow(0 0 15px #00e5ff)
      drop-shadow(0 0 30px #00e5ff)
      drop-shadow(0 0 60px #0099ff);
  }
  to{
    filter:
      drop-shadow(0 0 30px #00ffff)
      drop-shadow(0 0 60px #00e5ff)
      drop-shadow(0 0 100px #0099ff);
  }
}



/* SECTION */
.power-section{
  background:#070b1f;
  color:white;
  text-align:center;
  padding:80px 10%;
}

/* TITLE */
.power-section h2{
  font-size:42px;
  margin-bottom:50px;
  letter-spacing:1px;
}

/* GRID LAYOUT */
.power-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:30px;
}

/* CARDS */
.power-card{
  background:#0e183e;
  padding:40px 20px;
  border-radius:15px;
  font-size:40px;
  transition:0.4s;
  cursor:pointer;
  color: #f2f2f2;
}

/* TEXT */
.power-card p{
  margin-top:15px;
  font-size:18px;
}

/* HOVER EFFECT */
.power-card:hover{
  transform:translateY(-10px);
  box-shadow:0 0 25px #0e183e;
}

.cta{
  text-align:center;
  padding:100px 10%;
  color:white;

  background:linear-gradient(
    135deg,
    #070b1f,
    #0e183e,
    #070b1f
  );
}