html {
     scroll-behavior: smooth;
   }

   body {
     margin: 0;
     font-family: 'Montserrat', sans-serif;
     background: #fff;
     color: #000;
   }

   header,
   footer,
   section {
     padding: 60px 20px;
     text-align: center;
   }

   h2,
   section h2,
   .services h2,
   .hero h2 {
     font-weight: bold;
   }

   nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0 20px;
     background: #fff;
     position: relative;
     z-index: 10;
   }

   nav ul {
     list-style: none;
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 15px;
     margin: 0; 
     padding: 0;
   }

   nav a {
     text-decoration: none;
     color: #000;
     font-weight: 600;
   }

   .hero {
     background: #0d1b2a url('bg-grid.png') no-repeat center;
     color: #fff;
     padding: 100px 20px;
     background-size: cover;
   }

   .grid-background {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
     overflow: hidden;
   }

   .grid-layer {
     position: absolute;
     width: 100%;
     height: auto;
     opacity: 0.3;
     pointer-events: none;
   }

   .grid-layer-1 {
     top: -10%;
     left: 40%;
     transform: scale(1);
   }

   /* Bottom Left - element2 */
   .grid-layer-2 {
     bottom: -10%;
     left: 0;
     transform: scale(1.8);
     opacity: 0.1;
   }

   /* Bottom Right - element4 */
   .grid-layer-3 {
     bottom: 0%;
     right: 20%;
     transform: scale(1.3);

   }

   .grid-layer-5 {
     top: -20%;
     right: 500px;
     transform: scale(0.8);
     opacity: 0.5;
   }

   .hero h1 {
     font-size: 2.5rem;
     margin: 0;
   }

   .btn {
     padding: 10px 20px;
     border: 1px solid #000;
     background: #fff;
     font-weight: 600;
     cursor: pointer;
   }

   .about {
     background: #fff;
   }

   .about img {
     max-width: 100%;
     height: auto;
   }

   .services {
     background: #eee;
     padding: 40px 20px;
     text-align: center;
   }

   .services-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 20px;
     max-width: 1000px;
     margin: 0 auto;
   }

   .service-card {
     background: #fff;
     padding: 20px;
     border-radius: 10px;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
     /* Stronger, more realistic shadow */
     transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
   }

   .service-card:hover {
     background-color: #0d1b2a;
     color: white;
     transform: translateY(-8px);
     /* Creates a "pop" 3D effect */
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
     /* Deeper shadow on hover */
   }


   .cta {
     position: relative;
     background-color: #0a1a2f;
     color: white;
     text-align: center;
     padding: 6rem 2rem;
     overflow: hidden;
   }

   .contact-form {
     max-width: 100%;
     padding: 20px;
     display: flex;
     flex-direction: column;
     gap: 10px;
   }

   .contact-form input,
   .contact-form textarea {
     width: 100%;
     padding: 12px;
     border: 1px solid #ccc;
     border-radius: 5px;
   }

   .contact-form button {
     padding: 12px;
     border: 1px solid #000;
     background: #fff;
     cursor: pointer;
     font-weight: 600;
   }

   .contact-form button:hover {
     background-color: #0d1b2a;
     color: white;
   }

   footer {
     background: #0d1b2a;
     color: #fff;
     padding: 40px 20px;
   }

   .scene {
     width: 100%;
     max-width: 450px;
     height: auto;
     perspective: 800px;
     margin: 0 auto;
   }

   .bcard {
     width: 100%;
     aspect-ratio: 16/9;
     position: relative;
     transform-style: preserve-3d;
     transition: transform 0.5s ease;
     cursor: pointer;
   }

   .bcard-face {
     position: absolute;
     width: 100%;
     height: 100%;
     backface-visibility: hidden;
     border-radius: 12px;
     overflow: hidden;
   }

   .front {
     transform: rotateY(0deg);
   }

   .back {
     transform: rotateY(180deg);
   }

   .bcard.flipped .front {
     transform: rotateY(180deg);
   }

   .bcard.flipped .back {
     transform: rotateY(0deg);
   }

   .bcard-face img {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }

.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #000;
  color: #fff;
  font-size: 10px;
  padding: 10px 14px;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1000;
}

.back-to-top.show {
  opacity: 0.8;
  pointer-events: auto;
}

.back-to-top:hover {
  opacity: 1;
  transform: scale(1.1);
}

@media (max-width: 768px) {
  nav {
    display: none; /* Hide nav on mobile */
  }

  .grid-layer-3 {
    display: none !important; /* Hide element3 on mobile */
  }

  .grid-layer-2 {
     bottom: -10%;
     left: 0;
     transform: scale(2.8);
     opacity: 0.1;
   }

  .row > [class*='col-'] {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .scene {
    max-width: 100%;
    height: auto;
  }

  .contact-form {
    padding: 0;
  }

  footer .row {
    text-align: center;
  }

  footer .col-lg-6 {
    justify-content: center !important;
  }

  .back-to-top {
    font-size: 16px;
    bottom: 20px;
    right: 20px;
    padding: 8px 12px;
  }

    .grid-layer-1 {
      display: none;
   }
     .grid-layer-3 {
      display: none;
   }

}