/* ================= GOOGLE FONTS ================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;400;600;700;800;900&display=swap');

/* ================= RESET ================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
 font-family: 'Inter', sans-serif;
}

body{
  background:#f5f5f5;
}

@keyframes heroFloatFix {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(25px); }
  100% { transform: translateY(0px); }
}

/* FORCE animation */
.heroFloatLeft {
  animation: heroFloatFix 6s ease-in-out infinite !important;
}

.heroFloatRight {
  animation: heroFloatFix 7s ease-in-out infinite !important;
  animation-delay: 1.5s !important;
}

/* force GPU */
.heroFloatLeft,
.heroFloatRight {
  will-change: transform;
  transform: translateY(0); /* important */
}


h1,h2,h3{
  font-family: Arial, sans-serif;
}

p{
  font-family: 'Inter', sans-serif;
}

/* ================= CARD ANIMATION ================= */
.card-anim{
  opacity:0;
  transform:translateY(80px) scale(0.5);
  transition:all 1s ease-out;
}

.card-anim.show{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* ================= MODULE ANIMATION ================= */
.module-inner{
  opacity:0;
  transform:translateY(60px);
  transition:opacity 0.8s ease, transform 0.8s ease;
}

.module-section.show .module-inner{
  opacity:1;
  transform:translateY(0);
}

/* ================= HERO SECTION ================= */
.hero{
  position:relative;
  background:linear-gradient(105.01deg,#C9E2FF -5.48%,#FBFAF6 49.75%,#FCFFC9 104.98%);
  overflow:hidden;
  padding:80px 20px;
}

/* ================= GLOW EFFECT ================= */
.glow{
  position:absolute;
  width:320px;
  height:320px;
  filter:blur(165px);
  opacity:0.9;
  border-radius:50%;
  z-index:1;
}

.glow.tl{
  background:#2AA8EC;
  top:-180px;
  left:-180px;
}

.glow.tr{
  background:#81EC2A;
  top:-180px;
  right:-180px;
}

.glow.bl{
  background:#542AEC;
  bottom:-180px;
  left:-180px;
}

.glow.br{
  background:#EC642A;
  bottom:-180px;
  right:-180px;
}

.glow.hrms{
  background:#ECC52A;
  bottom:-180px;
  right:-180px;
}

/* ================= GRID OVERLAY ================= */
.grid-overlay{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.35) 3px, transparent 3px),
    linear-gradient(90deg, rgba(255,255,255,0.35) 3px, transparent 3px);
  background-size:60px 60px;
  opacity:1;
  z-index:2;
}

/* ================= HERO CONTENT ================= */
.hero-container{
  position:relative;
  z-index:3;
  max-width:1200px;
  margin:auto;
  display:flex;
  gap:60px;
  align-items:center;
  padding:0 80px;
}

/* ================= HERO TEXT ================= */
.hero-text{
  flex:1;
  color:#1E1E2F;
}

.hero-text h1{
  font-size:38px;
  line-height:1.2;
  margin-bottom:20px;
  font-weight:600;
}

.hero-text p{
  color:#303035;
  font-size:18px;
  font-weight:400;
}

/* ================= FORM CARD ================= */
.form-card{
  width:380px;
  background:#FFFFFF;
  backdrop-filter:blur(48.8px);
  -webkit-backdrop-filter:blur(48.8px);
  padding:30px;
  border-radius:16px;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.08),
    0 0 30px rgba(231,236,255,0.6);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}

.form-card:hover{
  transform:scale(1.03);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.12),
    0 0 40px rgba(231,236,255,0.8);
}

.form-card h3{
  text-align:center;
  margin-bottom:20px;
  font-size:18px;
  color:#000;
  font-weight:600;
}

.form-card label{
  display:block;
  font-size:13px;
  margin-top:12px;
  margin-bottom:6px;
  color:#1E1E1E;
}

.form-card input{
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid #D9D9D9;
  outline:none;
}

.form-card button{
  width:100%;
  margin-top:20px;
  padding:12px;
  background:#EC642A;
  border:none;
  color:#fff;
  border-radius:10px;
  font-size:15px;
  cursor:pointer;
}

/* ================= PINK BACKGROUND ================= */
.pink-background{
  background:url(../../images/lms-pink-background.png);
  width:100%;
  height:100%;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  align-items:center;
}

/* ================= RESPONSIVE ================= */
@media (max-width:900px){

  .hero-container{
    flex-direction:column;
    text-align:center;
    padding:0 10px;
  }

  .hero-text h1{
    font-size:22px;
  }

  .hero-text p{
    color:#F2F2F7;
    font-size:15px;
  }

  .form-card{
    width:100%;
    max-width:420px;
  }

}

@media (max-width:640px){

  .form-card label{
    text-align:left;
    align-self:flex-start;
  }

}