@font-face {
  font-family: 'Dilemma';
  src: url('../fonts/Dilemma-SansMedium (1).otf') format('truetype');
  font-style: normal;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  width:100%;
  min-height:100vh;
  overflow:hidden;
  font-family: 'Dilemma';
  background:#000;
  position:relative;
}

/* Background Image */
.ui-bg{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;

  background-image:url("../images/Banner.png");
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

/* Blur Overlay */
.ui-overlay{
  position:fixed;
  inset:0;

  background:rgba(0,0,0,0.15);

  backdrop-filter:blur(0.45rem);
  -webkit-backdrop-filter:blur(0.45rem);

  display:flex;
  justify-content:center;
  align-items:center;

  padding:2rem;
}

/* Card */
.ui-card{
  width: 35%;
  max-width: auto;
  background: #000;
  border-radius: .8rem;
  padding: 3rem;
  text-align: center;
  color: #fff;
  box-shadow: 0 0 3vw rgba(0, 0, 0, 0.45);
}

/* Logo */
.ui-logo{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:2rem;
}

.ui-logo img{
  width:7.5rem;
  height:auto;
  object-fit:contain;
}

/* Heading */
h1{
  font-size:2.6rem;
  font-weight:700;
  margin-bottom:1.3rem;
}

h2{
  font-size:1.8rem;
  font-weight:700;
  margin-bottom:1.7rem;
      letter-spacing: 1px;
}

/* Description */
.ui-desc{
  max-width:37rem;
  margin:0 auto;

  font-size:1.25rem;
  line-height:1.7;

  color:#f1f1f1;
}

/* Buttons */
.ui-btn-group{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1.3rem;

  margin:1.5rem 0 0rem;

  flex-wrap:wrap;
}

.ui-btn{
  border:none;
  outline:none;

  background:#fff;
  color:#000;

  font-size:1rem;
  font-weight:700;

  padding:1rem 1.3rem;

  border-radius:1rem;

  min-width:7rem;

  cursor:pointer;

  transition:0.3s ease;
}

.ui-yellow{
  background: #ffc800;
}

.ui-dark{
  background: #212c1c;
  color: #fff;
}

.ui-btn:hover{
  transform:translateY(-0.2rem);
}

/* Bottom Text */
.ui-bottom-text{
  max-width:38rem;
  margin:0 auto;

  font-size:1rem;
  line-height:1.7;

  color:#f3f3f3;
}

/* Accessibility Icon */
.ui-accessibility{
  position:fixed;

  right:1.3rem;
  bottom:1.3rem;

  width:3.6rem;
  height:3.6rem;

  border-radius:50%;

  background:#f1b61a;

  border:0.18rem solid #000;

  display:flex;
  justify-content:center;
  align-items:center;

  z-index:99;
}

.ui-accessibility span{
  font-size:2rem;
  color:#000;
}

/* Tablet */
@media(max-width:768px){
    
  .ui-bg{
    background-image:url("../images/mob.png");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
  }

  .ui-overlay{
    padding:1.2rem;
  }

  .ui-card{
    padding:2.3rem 1.5rem;
    border-radius:1.4rem;
    width: 90%;
  }

  .ui-logo img{
    width:8rem;
  }

  h1{
    font-size:2.4rem;
  }

  h2{
    font-size:1.6rem;
  }

  .ui-desc{
    font-size:1rem;
    line-height:1.6;
  }

  .ui-btn-group{
    flex-direction: row; 
    flex-wrap: nowrap;
  }
  
  .ui-btn {
    font-size: 1.05rem;
    min-width: auto;
    cursor: pointer;
  }

  .ui-bottom-text{
    font-size:0.92rem;
  }
}

/* Mobile */
@media(max-width:480px){

  .ui-card{
    padding:2rem 1.2rem;
  }

  .ui-logo img{
    width:7rem;
  }

  h1{
    font-size:2rem;
  }

  h2{
    font-size:1.4rem;
  }

  .ui-desc{
    font-size:0.95rem;
  }

  .ui-btn{
    padding:0.95rem 1.5rem;
    font-size:1rem;
  }

  .ui-bottom-text{
    font-size:0.8rem;
    line-height:1.6;
  }

  .ui-accessibility{
    width:3rem;
    height:3rem;
  }

  .ui-accessibility span{
    font-size:1.6rem;
  }
}
    
/* Footer */
.ui-footer {
  position: absolute;
  bottom: 2vh;
  font-size: 0.9rem;
  width: 100%;
  color: #ddd;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-footer a {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}