body {
    scroll-behavior: smooth;
  }
  .hero {
    background: linear-gradient(to right, #EEEFF1, #dddddf);
    color: rgb(82, 81, 81);
    padding: 100px 0;
    text-align: center;
  }
  .section-title {
    margin-top: 80px;
    margin-bottom: 40px;
    text-align: center;
  }
  footer {
    background-color: #3FBEEE;
    color: white;
    padding: 30px 0;
  }
  .material{
    vertical-align: middle;
    margin-left: 5px;
  }


  .banner{
    margin-bottom: -100px;
  }

  .glassmorphism-form {
    animation: fadeInUp 0.8s cubic-bezier(.39,.575,.565,1.000) both;
  }
  .modern-input:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13,110,253,.15);
    background: rgba(255,255,255,0.95);
  }
  @keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(40px);}
    100% { opacity: 1; transform: translateY(0);}
  }
  .btn-gradient:hover {
    background: linear-gradient(90deg, #00c6ff 0%, #0d6efd 100%);
    color: #fff;
  }

.box {
  display: grid;
  place-content: center;
  --border-angle: 0turn;
  --main-bg: conic-gradient(    from var(--border-angle),    rgb(255, 255, 255),    rgb(255, 255, 255) 5%,    rgb(255, 255, 255) 60%,    rgb(255, 255, 255) 95%  );
  border-radius: 10px;
  --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, #3FBEEE, #000 99%, transparent);
  background:   var(--main-bg) padding-box,    var(--gradient-border) border-box,   var(--main-bg) border-box;
  background-position: center center;
  animation: bg-spin 3s linear infinite;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

.box:hover {
animation-play-state: paused;
}

@keyframes bg-spin {
to {
  --border-angle: 1turn;
}
}

@property --border-angle {
syntax: "<angle>";
inherits: true;
initial-value: 0turn;
}