:root{
  --primary:#1779e8;
  --bg:#f5f7fb;
  --text:#1f2937;
}

*{margin:0;padding:0;box-sizing:border-box;font-family:Arial, sans-serif;}
body{height:100svh;background:var(--bg);} 

.container{display:flex;width:100%;height:100%;}

/* .left{
  width:60%;
  background:url('https://images.unsplash.com/photo-1612872087720-bb876e2e67d1?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
  position:relative;
  display:flex;align-items:center;justify-content:center;
}

.left::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(23,121,232,0.7), rgba(0,0,0,0.5));
}

.left-content{
  position:relative;
  color:white;
  text-align:center;
  padding:40px;
} */

.left{
  width:60%;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.bg-img{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
}

.overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(23,121,232,0.7), rgba(0,0,0,0.5));
}

.left-content{
  position:relative;
  color:white;
  text-align:center;
  z-index:2;
}

.left h1{
  font-size: 9rem;
  font-weight: 900;
  opacity: 0.2;
  margin-bottom:15px;
}
.left p{font-size:18px;opacity:0.9;}

.right{
  width:40%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction: column;
  gap: 50px;
}

.card{
  background:white;
  padding:40px;
  border-radius:18px;
  width:100%;max-width:410px;
  box-shadow:0 15px 40px rgba(0,0,0,0.08);
}

.card h2{
  margin-bottom:20px;
  margin-left: 6px;
  color:var(--text);} 

.input-group {
  margin-bottom:15px;
}
.input-group input {
  width:100%;
  padding:13px;
  border-radius:8px;
  border: 1px solid #e5e7eb;
  font-size: 14px;
}

.button{
  width:100%;
  padding:13px;
  border:none;
  border-radius:8px;
  background:var(--primary);
  color:white;
  font-size:16px;
  cursor:pointer;
}

.switch{
  margin-top:15px;text-align:center;font-size:14px;
}

.switch a{
  color:var(--primary);
  text-decoration:none;font-weight:bold;
}

.hidden{display:none;}


/* Logo */

.logo{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:'DejaVu Sans', Arial, sans-serif;
  font-weight:bold;
  font-size: 32px;
  opacity: 0.95;
}

.badge{
  background:#1779e8;
  color:white;
  padding: 3px 13px 7px 12px;
  border-radius:10px;
  letter-spacing:-1.5px;
}

.friends{
  color:#1779e8;
  letter-spacing:-1.5px;
  margin-bottom: 2.5px;
}

/* Mobile Queries */

@media(max-width:768px){
  .container {
    flex-direction: column;
    height: 100svh;
    overflow: hidden;
  }

  .left, .right {
    width: 100%;
  }
  .right {
    order: 1;
    padding: 40px 28px 64px;
    gap: 24px;
  }
  .left {
    order: 2;
    height: 100%;
    overflow: initial;
    aspect-ratio: 12 /8;
  }
  .card {
    padding: 38px 28px 40px;
  }
  .bg-img {
    position: inherit;
  }
}