styles.css

    body {
      font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    .navbar {
      position: fixed;
      z-index:2;
      top: 0;
      left: 0;
      right: 0;
      background-color: white;
      color:grey;
      display: flex;
      justify-content: space-between;
      padding: 10px 20px;
    }
    .navbar a {
      text-decoration: none;
      color: grey;
      margin: 0 15px;
    }

    /* Section 1 */
    .section1 {
      background-color:black;
      color:white;
      text-align: center;
      padding: 100px 80px;
    }
    .section1 h2 {
      font-size: 48px;
      font-family: 'Comic Sans MS', cursive;
    }
    .section1 p {
      font-size: 24px;
      font-family: Arial, sans-serif;
    }



    /* Section 2 */
    .section2 {
        text-align: center;
        padding: 100px 80px;
        background-image: url("section2bg.jpg"); /* Replace with your image file path */
        background-size: cover; /* Adjust background size as needed */
        background-position: center; /* Adjust background position as needed */
        color: white;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        opacity: 0.85;
        position: relative;
        z-index: 1;
      }
      
    .section2 h2 {
      font-size: 36px;
    }
    .section2 p {
      font-size: 20px;
      font-family: 'Times New Roman', Times, serif;
    }

    /* Section 3 */
    .section3 {
        background-color: #f8f8f8;
        text-align: center;
        padding: 40px 20px;
        background-image: url("section3bg.jpg");
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
      }
    .section3 h2 {
      font-size: 36px;
    }
    .section3 p {
      font-size: 20px;
    }

    /* Section 4 */
    .section4 {
        background-color: #f0f0f0;
        text-align: center;
        padding: 40px 20px;
        background-image: url("section4bg.jpg");
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
      }
    .section4 h2 {
      font-size: 36px;
    }
    .section4 p {
      font-size: 20px;
    }
    .section4 ul {
      text-align: center;
      margin: 0;
      padding: 0;
    }
    .section4 ul li {
      list-style: square;
      list-style-position: inside;
    }

    /* Section 5 */
    .section5 {
        background-color: #dedede;
        text-align: center;
        padding: 40px 20px;
        background-image: url("section7bg.jpg");
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
      }
    .section5 h1 {
      font-size: 24px;
      text-align: left;
    }
    .section5 p {
      font-size: 20px;
    }
    .section5 ul {
      text-align: left;
      margin: 0;
      padding: 0;
    }
    .section5 ul li {
      list-style: square;
    }

    /* Button styling with magnetic hover effect */
    .try-button, .report-button {
      background-color: #007bff;
      color: #fff;
      border: none;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 20px;
      margin-top: 20px;
      cursor: pointer;
      border-radius: 5px;
      transition: background-color 0.2s, transform 0.2s;
    }
    .try-button:hover, .report-button:hover {
      background-color: #0056b3;
      transform: scale(1.05);
    }

    .team-section {
      text-align: center;
    }
    .top-button {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: #333;
      z-index:2;
      color: #fff;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
      border-radius: 5px;
    }