body {
      font-family: Arial, sans-serif;
      background-image: linear-gradient(rgb(96, 163, 227) 10%, rgb(2, 53, 97) 90%);
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 20px;
      padding: 10px;
      background-color:#004080;
      background-repeat: no-repeat;
    }

    
    .card {
      background: white;
      color: black;
      border-radius: 12px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
      padding: 15px;
      max-width: 400px;
      max-height: 400px;
      text-align: center;
      line-height: normal;
    }

    .card p {
      color: black;
      font-size: 16px;
    
    }
     .card a {
      display: inline-block;
      margin-top: 15px;
      padding: 10px 20px;
      background: #004080;
      color: rgb(255, 255, 255);
      text-decoration: none;
      border-radius: 8px;
      transition: 0.3s ease;
    }
    
    .card a:hover {
      background: #ffcc00;
      color: #000;
    }

    div.card {
      line-height: normal;
    }

    div#scholarship {
      line-height: 78%;
      padding: 16px;
    }
    
    .badge img {
        position: absolute;
        top: -90px;
        left: 36%;
        width: 100px;
        opacity: 0.9;
    }   

     address {
      padding:-10px;
      width: 200px;
    } 

.backlink a{
  margin: 5px;
  display: inline-block;
  color: #9c0404;
  text-decoration: none;
}

.backlink a:hover {
  text-decoration: underline;
  color:rgb(136, 78, 1)
}     

.bg-image {
  opacity: 0.5;
  width: 100%;
  height: auto;
  display: block;
}

.overlay-container {
  position: relative;
  /* width: 100%; */
  max-width: 800px;  
}

.overlay {
  position: absolute;
  top: -20%; 
  left: 50%; 
  width: 45%;
} 

div.overlay-container div.card {
  padding: 20px;
}

div.contact {
  width: 200px;
  border: px solid #000000;
  border-radius: 8px;
  text-align: center;
  margin: auto;
  background-color:#ffffff;
  color: rgb(255, 255, 255);
  text-decoration: none;
    }

.contact {
  width: 120px;
  font-style: normal;
  color: white;
  margin-top: 10px;
}

.contact a:hover {
  background-color: #ffcc00;
  color: #000;
  }

/* random tilt: assign different classes via JS or nth-child */
.random-tilt {
  display: inline-block;
  transform-origin: center center;
}

/*fallback: if no JS, give them all a subtle tilt variation */ 
.overlay:nth-child(2) { transform: translate(-50%, -50%) rotate(-9deg); }
.overlay:nth-child(3) { transform: translate(-50%, -50%) rotate(9deg);   width:50%;}
.overlay:nth-child(1) { transform: translate(-50%, -50%) rotate(3deg);  top:40px;  width:50%; left: 20px; left: 80px;}