:root{
  --font-sans: 'Rethink Sans', 'Inter';
  --purple-900:#260C38;
  --pink:#CD2374;
  --pink-200:#f74da2;
  --violet:#6239A7;
  --white:#fff;
  --text:#333;
  --radius-lg:25px;
  --shadow-sm:0 4px 15px rgba(98,57,167,.3);
  --shadow-sm-hot:0 6px 20px rgba(246,18,133,.4);
  --maxw:1200px;
}

html,body{
  font-family:var(--font-sans);
  font-weight:400;
  line-height:1.6;
}

.header-area{
  position:absolute; inset:0 0 auto 0;
  z-index:999; width:100%;
  background:transparent;
}

.header-top-contact{
  background:var(--purple-900);
  padding:2px 0; color:var(--white); font-size:14px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.header-top-contact .container,
.header-main .container{
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--maxw); margin:0 auto; padding:0 15px; gap:30px;
}

.contact-info{ display:flex; align-items:center; gap:30px; }
.contact-item{ display:flex; align-items:center; gap:8px; color:var(--white); opacity:.9; transition:opacity .3s; }
.contact-item:hover{ opacity:1; }
.contact-item:hover span{ color:var(--pink); }
.contact-item i{ font-size:16px; }
.contact-item img{ width:20px; height:20px; }
.contact-item span{ font-weight:400; transition:color .3s; }

.header-actions{ display:flex; align-items:center; gap:20px; }
.header-actions .nav-link{
  color:var(--white); padding:5px 10px; font-size:14px; font-weight:400; opacity:.9; transition:opacity .3s;
}
.header-actions .nav-link:hover{ opacity:1; }

.header-main{
  background:rgba(0,0,0,.15);
  padding:15px 0;
  border-bottom:1px solid rgba(255,255,255,.1);
}

.logo{ flex:0 0 auto; max-width:170px; }
.logo img{ max-height:50px; max-width:220px; object-fit:contain; }

.header-right{ display:flex; align-items:center; gap:30px; }

.main-navigation{
  display:flex; align-items:center; gap:30px; flex-wrap:wrap;
}
.nav-link{
  color:var(--white);
  font-weight:600; font-size:15px;
  padding:8px 15px; border-radius:var(--radius-lg);
  display:flex; align-items:center; gap:5px; white-space:nowrap; opacity:.9;
  transition:color .3s, opacity .3s;
}
.nav-link:hover{ color:var(--pink); opacity:1; }


.header-right .dropdown .nav-link{
  background:linear-gradient(135deg, var(--pink) 0%, var(--violet) 100%);
  color:var(--white); font-weight:600; padding:10px 20px; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  transition:color .3s, transform .2s, box-shadow .3s;
}
.header-right .dropdown .nav-link:hover{ color:#8B1A4B; transform:translateY(-2px); box-shadow:var(--shadow-sm-hot); }
 
/* Dropdown */
.dropdown{ position:relative; }
.dropdown-menu{
  position:absolute; top:100%; left:0; z-index:1000;
  background:#fff; border:none; border-radius:12px; margin-top:8px; min-width:180px; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.15); display:none;
}
.dropdown.active .dropdown-menu{ display:block; }

.dropdown-item{
  display:flex; align-items:center; gap:8px;
  padding:12px 18px; color:var(--text); font-size:14px; font-weight:500;
  border-bottom:1px solid #f0f0f0; transition:background .3s, color .3s;
}
.dropdown-item:last-child{ border-bottom:none; }
.dropdown-item:hover{ background:#f8f9fa; color:var(--pink); }
.dropdown-item i{ font-size:14px; width:16px; }
.flag-icon{ width:25px; height:25px; object-fit:contain; }

/* Login Button Container */
.login-btn-container{
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

/* Login Button */
.login-btn{
  background:linear-gradient(135deg, var(--pink) 0%, var(--violet) 100%);
  color:var(--white);
  font-weight:600;
  font-size:15px;
  padding:10px 20px;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  transition:all .3s;
  white-space:nowrap;
  display:inline-block;
}

.login-btn:hover{
  color:var(--white);
  transform:translateY(-2px);
  box-shadow:var(--shadow-sm-hot);
}

/* Login Tooltip - First Union Rectangle */
.login-tooltip{
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 210px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1;
  border-radius: 14px;
  background: rgba(192, 192, 192, 0.33);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.43), 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
}

/* Gradient border using mask */
.login-tooltip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 1px;
  background: linear-gradient(93.04deg, #FDF7FA 8.38%, #FF1082 103.14%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}


.login-tooltip .tooltip-text{
  position: relative;
  font-family: 'Rethink Sans', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 31px;
  letter-spacing: 0%;
  color: white;
  text-align: center;
  white-space: nowrap;
}

.login-btn-container:hover .login-tooltip{
  opacity: 1;
  visibility: visible;
}