body {
     margin: 0;
     font-family: Arial, sans-serif;
     background: url('https://www.transparenttextures.com/patterns/brushed-alum.png'), linear-gradient(135deg, #000000e1, #a1a1a1);
     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: 8px auto 0;
     font-size: 18px;
     color: #f0f0f0;
     animation: fadeInUp 2s both;
     animation-delay: 0.5s;
 }

 .hero .links {
     margin-top: 19px;
     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;
 }


 .content {
     margin-bottom: -190px;
     padding: 40px 20px;
     max-width: 800px;
     margin: auto;
     background-color: #afacac;
     border-radius: 10px;
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
     border-top-left-radius: 60px;
     border-top-right-radius: 60px;
     justify-content: center;
 }

 h2 {
     color: #222;
     margin-bottom: 10px;
 }

 ul {
     margin-left: 20px;
     margin-bottom: 20px;
 }

  .collab-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content:  center;
    gap: 30px;
}

.collab-item {
    width: 95%;
    background-color: #f0f0f0;
    padding: 20px;
    border-radius: 10px;
}

.collab-item.center {
    width: 100%;
    text-align: center;
    background-color: #e0e0e0;
}

.collab-item h3 {
    margin-top: 0;
    text-align: center;
}
.collab-item.left {
       border-top-left-radius: 60px;
     border-top-right-radius: 60px;
}
 

.collab-item ul {
    padding-left: 0px;
    text-align: left;
}
 


 .referral-form {
     background-color: #575757;
     padding: 20px;
     border: 1px solid #ddd;
     border-radius: 10px;
     width: 50%;
 }

 .referral-form input,
 .referral-form select {
     width: 60%;
     padding: 10px;
     margin: 10px 0;
     border: 1px solid #ccc;
     border-radius: 5px;
 }

 .referral-form button {
     background-color: #007BFF;
     color: white;
     padding: 10px 20px;
     border: none;
     border-radius: 5px;
     cursor: pointer;
 }

 .referral-form button:hover {
     background-color: #0056b3;
 }

 @media (max-width: 768px) {
     .hero {
         height: 400px;
         display: flex;
         flex-direction: column;
         align-items: center;
         text-align: center;
     }

     .links {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 15px;
         margin-top: -10px;
     }

     p {
         font-size: 39px;
     }

     .content {
         padding: 20px;
     }
         .collab-item {
        width: 100%;
    }
 
.collab-item.left {
    grid-column: 1;
}

.collab-item.right {
    grid-column: 2;
}
    .collab-grid {
        grid-template-columns: 1fr;
    }

    .collab-item.left,
    .collab-item.right {
        grid-column: auto;
    }
 }