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

    :root{
      --green:#0d5c35;
      --green-light:#16995b;
      --gold:#ffcc29;
      --white:#ffffff;
      --glass:rgba(255,255,255,0.08);
      --border:rgba(255,255,255,0.15);
    }

    body{
      min-height:100vh;

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

      padding:20px;

      overflow:hidden;

      font-family:'Montserrat', sans-serif;
      color:white;

      position:relative;

      background:
      linear-gradient(
        rgba(6,25,15,0.75),
        rgba(6,25,15,0.82)
      ),
      url('../img/banner.avif')
      center/cover no-repeat;
    }

    /* Background Overlay Shapes */
    .circle1{
      position:absolute;
      border-radius:50%;
      filter:blur(90px);
      z-index:0;
    }

    .circle1{
      width:320px;
      height:320px;
      background:#00ff88;
      top:-100px;
      left:-100px;
      opacity:0.18;
    }

    /* Main Card */
    .container{
      position:relative;
      z-index:2;
      width:100%;
      max-width:580px;
      padding:50px 40px;
      border-radius:30px;
      //background:var(--glass);
	  background:rgba(0,0,0,0.3);
      backdrop-filter:blur(18px);
      border:1px solid var(--border);
      box-shadow:
      0 20px 50px rgba(0,0,0,0.35);
      text-align:center;
    }

    /* Top Accent */
    .top-bar{
      width:80px;
      height:6px;
      margin:30px auto 30px;
      border-radius:50px;
      background:linear-gradient(
        90deg,
        var(--gold),
        var(--green-light)
      );
    }

    /* Logo */
    .logo-box{
      width:125px;
      height:125px;
      margin:0 auto 25px;
      border-radius:50%;
      background:rgba(255,255,255,0.08);
      border:1px solid rgba(255,255,255,0.15);
      display:flex;
      align-items:center;
      justify-content:center;
      //transform:rotate(45deg);
      box-shadow:
      0 10px 25px rgba(0,0,0,0.25);
    }

    .logo{
      width:78px;
      height:78px;
      object-fit:contain;
      //transform:rotate(-45deg);
    }

    /* Heading */
    .hero-title{
      font-size:3rem;
      font-weight:800;
      line-height:1.1;
      margin-bottom:18px;
      text-transform:uppercase;
    }

    .hero-title span{
      display:block;
      color:var(--gold);
      font-size:1.4rem;
      margin-top:8px;
      letter-spacing:5px;
      font-weight:600;
    }

    /* Description */
    .subtitle{
      max-width:470px;
      margin:0 auto 20px;
      font-size:12px;
      line-height:1.9;
      color:rgba(255,255,255,0.82);
      font-weight:300;
    }

    /* Button Area */
    .btn-group{
      display:flex;
      flex-direction:column;
      gap:18px;
    }

    .portal-btn{
      text-decoration:none;
      padding:17px 22px;
      border-radius:18px;
      font-size:1rem;
      font-weight:700;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:12px;
      position:relative;
      overflow:hidden;
      transition:0.35s ease;
    }

    .portal-btn::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.18),
        transparent
      );
      transform:translateX(-100%);
      transition:0.5s;
    }

    .portal-btn:hover::before{
      transform:translateX(100%);
    }

    .portal-btn:hover{
      transform:translateY(-4px);
    }

    .student{
      background:linear-gradient(
        135deg,
        #ffd84f,
        #ffb300
      );
      color:#222;
      box-shadow:
      0 10px 25px rgba(255,184,0,0.25);
    }

    .teacher{
      background:linear-gradient(
        135deg,
        #19b56f,
        #0d5c35
      );

      color:white;

      box-shadow:
      0 10px 25px rgba(0,255,120,0.18);
    }

    /* Footer */
    .footer{
      margin-top:35px;
      font-size:0.78rem;
      color:rgba(255,255,255,0.30);
      letter-spacing:1px;
    }

    /* Responsive */
    @media(max-width:600px){
	
      .container{
        padding:35px 22px;
        border-radius:24px;
      }

      .hero-title{
        font-size:2rem;
      }

      .hero-title span{
        font-size:1rem;
        letter-spacing:3px;
      }

      .subtitle{
        font-size:0.92rem;
        line-height:1.7;
      }

      .logo-box{
        width:100px;
        height:100px;
      }

      .logo{
        width:62px;
        height:62px;
      }

      .portal-btn{
        padding:14px;
        font-size:0.92rem;
      }
    }