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

  .hero-section {
    position: relative;
    height: 40vh;
    background: url('/image/manu.svg') center/cover no-repeat; /* Replace with your image path */
    color: #000000; /* Text color on top of the image */
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: start;
  }

  .hero-text {
    max-width: auto;
    margin-top:36.1vh;
    margin-bottom: 0;
    margin-right: 0;
    text-align: center;
  }

  .hero-text h1 {
    font-size: 6em;
    margin-bottom: 5px; 
    background-color: white;
    padding-left: 5px;
  }

  .hero-text p {
    font-size: 3em;
    margin-top: 10px; 
    background-color: white;
    padding-left: 5px;
  }

  .container-box {
    font-size: 14px;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    height: 30vh; /* Adjust height as needed */
    margin: 5px;
    margin-top: 12vh;
    a{
    font-size: 7em; 
    color:black;
    text-align: center;
    text-decoration: none !important;
    }
    }

    .box1 {    
      border: 1px solid #000;
      padding: 15px;
      text-align: center;
      border-top:  rgba(0, 0, 0, 0) ;
      border-left:  rgba(0, 0, 0, 0) ;
      padding-top: 40px ;
      padding-bottom: 15px;
    color: #000000;
    }
    .box2 {    
        border: 1px solid #000;
        padding: 20px;
        text-align: center;
        border-top:  rgba(0, 0, 0, 0) ;
        padding-top: 40px ;
        padding-bottom: 15px;
        padding-right: 0px;
   }
      .box3 {    
        border: 1px solid #000;
        padding: 20px;
        text-align: center;
        border-top:  rgba(0, 0, 0, 0) ;
        border-right:  rgba(0, 0, 0, 0) ;
        padding-top: 40px ;
        padding-bottom: 15px;
      }
      .box4 {    
        border: 1px solid #000;
        padding: 20px;
        text-align: center;
        border-left:  rgba(0, 0, 0, 0) ; 
        padding-top:40px ;
        padding-bottom: 15px;
      }
      .box5 {    
        border: 1px solid #000;
        padding: 20px;
        text-align: center;
 
        padding-top:40px ;
        padding-bottom: 15px;
      }
      .box6 {    
        border: 1px solid #000;
        padding: 20px;
        text-align: center;
         border-right:  rgba(0, 0, 0, 0) ; 
        padding-top:40px ;
        padding-bottom: 15px;
      }
      .box7 {    
        border: 1px solid #000;
        padding: 20px;
        text-align: center;
        border-bottom:  rgba(0, 0, 0, 0) ;
        border-left:  rgba(0, 0, 0, 0) ;
        padding-top:40px ;
        padding-bottom: 15px;
      }
      .box8 {    
        border: 1px solid #000;
        padding: 20px;
        text-align: center;
         border-bottom:  rgba(0, 0, 0, 0) ;
      
        padding-top:40px ;
        padding-bottom: 15px;
      }
      .box9 {    
        border: 1px solid #000;
        padding: 20px;
        text-align: center;
        border-bottom:  rgba(0, 0, 0, 0) ;
        border-right:  rgba(0, 0, 0, 0) ;
        padding-top:40px ;
        padding-bottom: 15px;
      }

    .container-connect{
        border: 0px solid;
        background-color: #000;
        color:white;
        text-align: center;
        margin-right: 30%;
        margin-left:30%;
        margin-top: 9%;
        padding: 0.5px;
        /* margin-bottom: 40px; */
        border-radius: 20px;
        font-size: 2em;
    }