body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f8f9fa;
      color: #333;
    }
   .hero {
     background: url('https://www.transparenttextures.com/patterns/brushed-alum.png'), linear-gradient(135deg, #000000e1, #a1a1a1);
     background-blend-mode: overlay;
     background-size: 200% 200%;
     animation: steelGloss 15s linear infinite;
     padding: 100px 20px 60px;
     text-align: center;
     border-bottom-left-radius: 60px;
     border-bottom-right-radius: 60px;
     box-shadow: inset 0 0 60px rgba(255, 255, 255, 0.2);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.897);
     margin-bottom: 20px;

 }


 @keyframes steelGloss {
     0% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }

     100% {
         background-position: 0% 50%;
     }
 }

 .hero h1 {
     font-size: 48px;
     animation: bounceInDown 1.5s both;
     background: linear-gradient(to right, rgb(5, 5, 5), rgba(0, 0, 0, 0.164));
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     color: transparent;

 }

 .hero p {
     max-width: 700px;
     margin: 20px auto 0;
     font-size: 18px;
     color: #f0f0f0;
     animation: fadeInUp 2s both;
     animation-delay: 0.5s;
 }

 .hero .links {
     margin-top: 30px;
     display: flex;
     justify-content: center;
     gap: 20px;
     animation: fadeInUp 2s both;
     animation-delay: 1s;
 }

 .hero .links a {
     text-decoration: none;
     background: #333;
     color: #fff;
     padding: 10px 20px;
     border-radius: 25px;
     font-weight: bold;
     transition: background 0.3s ease;
 }

 .hero .links a:hover {
     background: #000;
 }
    section {
      padding: 40px 20px;
      max-width: 1000px;
      margin: auto;
    }
    h2 {
      color: #3f3f3f;
      margin-bottom: 20px;
    }
    ul {
      padding-left: 20px;
    }
    .section-block {
      margin-bottom: 40px;
    }
    footer {
      background-color: #383838;
      color: #fff;
      text-align: center;
      padding: 20px;
    }
     @media (max-width: 768px) {
         .hero {
         height: 400px;
         display: flex;
         flex-direction: column;
         align-items: center;
         text-align: center;
     }
     .hero h1 {
           margin-top: -55px;
     }
     .links {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 15px;
         margin-top: -40px;
     }
    


     .content {
         padding: 20px;
     }
    #h{
      margin-bottom: 55px;
    } 
    }