@import url(components.css);
* { 
  padding: 0px;
  margin: 0px;
}

html {
  scroll-behavior: smooth;
}

body { 
  padding: 0px;
  margin: 0px;
  font-family: 'Sofia Pro', sans-serif;
  font-size: 14px;
  font-weight: normal;
}

select {
  cursor: pointer !important;
}

a { text-decoration: none !important; }
img{max-width:100%;}
h1,h2,h3,h4,h5,h6 { margin: 0; }
.h1, .h2, .h3, .h4, .h5, .h6 { margin: 0; }






.flag-bg{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;overflow: hidden; }
.flag-img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Subtle filters on hero image enhance visual depth while keeping text readable */

.hero-content{ position:relative; z-index:1; text-align:left; }

.hero-badge{
backdrop-filter:blur(6px);
background:rgba(255,255,255,.85)!important;
color:#0a2540!important;
border:1px solid rgba(255,255,255,.7);
border-radius:999px;
box-shadow:0 4px 14px rgba(0,0,0,.12);
} /* Small frosted badge: blurred backdrop with semi-opaque base */

.hero-title{
margin-top:1rem;
font-weight:800;
letter-spacing:.2px;
line-height:1.12;
font-size: clamp(2rem, 2.6rem + 1.5vw, 4rem);
text-shadow:0 8px 30px rgba(0,0,0,.4);
} /* Bold, large typography plus soft shadow for contrast over imagery */

.hero-subtitle{
max-width:52ch;
font-size: clamp(1rem, .95rem + .5vw, 1.25rem);
color:rgba(233,242,255,.92);
margin-top:.75rem;
}

.g-3{ gap:1rem!important; }
.form-card .card-body{ padding:2rem 2rem 1.6rem; }
@media (min-width:992px){
.form-card .card-body{ padding:2.25rem 2.5rem 1.85rem; }
}
@media (max-width: 575.98px){
.hero{ min-height:66vh; padding-block:5rem 3rem; }
.hero-title{ font-size: clamp(1.8rem, 5.8vw, 2.6rem); }
.hero-subtitle{ font-size:1rem; }
.form-card{ border-radius:16px; }
}
@supports not (backdrop-filter: blur(1px)){
.form-card, .hero-badge{
background: rgba(15, 39, 79, .85);
}
} 
.form-card { background-color: rgba(0,0,0, 0.2) !important;
  backdrop-filter: blur(115px);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff; }
.register-btn-wrapper{
  padding-top: 100px;
}

  .focus-button {
  animation: blinkZoom 1.5s infinite;
  transition: transform 0.3s ease;
}


@keyframes blinkZoom {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}