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

    body {
      font-family: Arial, sans-serif;
      background: linear-gradient(to right, #fceabb, #f8b500);
      line-height: 1.5;
      scroll-behavior: smooth;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    h1, h2 {
      margin-bottom: 15px;
    }

  
    #header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #2E3B4E;
      padding: 10px 20px;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 1000;
    }

    #header-img {
      width: 100px;
      height: 80px;
      object-fit: contain;
      background-color: #F0F4F8;
    }

    #nav-bar {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      width: 50%;
      flex-wrap: wrap;
    }

    .nav-link {
      color: #F1C40F;
      font-family: sans-serif;
      margin: 5px 10px;
      font-weight: bold;
      transition: color 0.3s;
    }

    .nav-link:hover {
      color: #ffffff;
    }


    #home-section {
      margin-top: 100px;
      height: 100vh;
      background-image: url('https://eu-images.contentstack.com/v3/assets/blt69509c9116440be8/blt6bd0194741e647be/67d481ec1b3347f591291e1b/augmented_reality_virtual_reality-Sasin_Paraksa-alamy.jpg');
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 0 20px;
    }

    #introduction h1 {
      font-size: 3rem;
      color: #00FFFF;
      font-family: Tahoma, sans-serif;
      margin-bottom: 10px;
    }

    #introduction p {
      font-size: 1.8rem;
      color: #FFB6C1;
      font-family: Tahoma, sans-serif;
    }

    #feature-section {
      padding: 50px 20px;
      background-color: #f8f9fa;
    }

    #feature-section h1 {
      text-align: center;
      font-size: 2rem;
      margin-bottom: 40px;
      color: #1a1a1a;
    }

    .feature-div {
      display: flex;
      justify-content: space-evenly;
      flex-wrap: wrap;
      gap: 20px;
    }

    .feature-div-1, .feature-div-2, .feature-div-3 {
      width: 100%;
      max-width: 500px;
      background-color: #fff3cd;
      border-radius: 20px;
      padding: 20px;
    }

    .feature-div ol {
      padding-left: 20px;
    }

    .feature-div li {
      margin-bottom: 20px;
    }

    .feature-div li h2 {
      font-size: 1.5rem;
      margin-bottom: 5px;
    }

    .feature-div li p {
      font-size: 1rem;
      line-height: 1.4;
    }

    .feature-div li p::before {
      content: '✨ ';
    }

  
    #product-section {
      padding: 50px 20px;
    }

    #product-section h1 {
      text-align: center;
      font-size: 2rem;
      margin-bottom: 40px;
      color: #1a1a1a;
    }

    .img-div {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
    }

    .img-div img {
      width: 300px;
      height: 300px;
      object-fit: cover;
      border-radius: 15px;
      transition: transform 0.3s;
    }

    .img-div img:hover {
      transform: scale(1.05);
    }

    /* How It Works Section */
    #how-it-works-section {
      padding: 50px 20px;
      text-align: center;
    }

    #how-it-works-section h1 {
      font-size: 2rem;
      margin-bottom: 30px;
    }

    .iframe-flex {
      display: flex;
      justify-content: center;
    }

    iframe {
      width: 100%;
      max-width: 560px;
      height: 315px;
      border: none;
      border-radius: 10px;
    }

    /* Contact Section */
    #contact-us-section {
      padding: 50px 20px;
      text-align: center;
    }

    #contact-us-section h1 {
      font-size: 2rem;
      margin-bottom: 30px;
    }

    form {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      max-width: 350px;
      margin: auto;
      margin-bottom: 20px;
      padding: 20px;
      border-radius: 15px;
      background-color: #ffffff;
      box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    }

    input {
      padding: 12px;
      margin: 10px 0;
      border-radius: 7px;
      border: 1px solid #ccc;
      width: 90%;
      font-size: 1rem;
    }

    input[type="submit"] {
      width: 120px;
      cursor: pointer;
      background-color: #2E3B4E;
      color: #F1C40F;
      border: none;
      transition: background 0.3s, color 0.3s;
    }

    input[type="submit"]:hover {
      background-color: #F1C40F;
      color: #2E3B4E;
    }

    /* Responsive Styles */
    @media (max-width: 1024px) {
      .feature-div {
        flex-direction: column;
        align-items: center;
      }

      #nav-bar {
        width: 70%;
      }
    }

    @media (max-width: 768px) {
      #introduction h1 {
        font-size: 2.2rem;
      }

      #introduction p {
        font-size: 1.5rem;
      }

      .img-div img {
        width: 250px;
        height: 250px;
      }

      iframe {
        height: 250px;
      }
    }

    @media (max-width: 480px) {
      #nav-bar {
        flex-direction: column;
        width: 100%;
      }

      .nav-link {
        margin: 5px 0;
      }

      #introduction h1 {
        font-size: 1.8rem;
      }

      #introduction p {
        font-size: 1.2rem;
      }

      .img-div img {
        width: 200px;
        height: 200px;
      }

      form {
        width: 90%;
        padding: 15px;
      }

      input {
        width: 100%;
      }
    }