/* ===== Base Styles ===== */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html, body {
      height: 100%;
      width: 100%;
      overflow-x: hidden;
    }

    body {
      font-family: "Poppins", sans-serif;
      background-color: #fff;
      color: #000;
      position: relative;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: space-between; /* Keep top/bottom checkers visible */
 min-height: 100dvh; /* dynamic viewport height fixes Chrome scroll */
  overflow: hidden; /* optional, extra safety */
    }

    

    /* ===== Checker Borders ===== */
    .checker-top,
    .checker-bottom {
      width: 100%;
      overflow: hidden;
      flex-shrink: 0;
    }

    .checker-top img,
    .checker-bottom img {
      width: 100%;
      height: auto;
      display: block;
    }
    /* ===== Smooth Tilt Animation ===== */
@keyframes tilt {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(6deg); }   /* slight right tilt */
  50% { transform: rotate(0deg); }   /* back to center */
  75% { transform: rotate(-6deg); }  /* slight left tilt */
  100% { transform: rotate(0deg); }  /* back to center */
}


    /* ===== Decorative Corner Images ===== */
    .decor-image-left,
    .decor-image-right {
      position: absolute;
      z-index: 2;
    }

    .decor-image-left {
      width: 70px;
      top: 50px;
      left: 15px;
        animation-delay: 0.5s;
    }

    .decor-image-right {
      width: 40px;
      top: 60px; /* slightly lower */
      right: 15px;
      animation-delay: 1s;
      
    }
/* Apply tilt to decorative and bottom images */
.decor-image-left,
.decor-image-right,
.bottom-image-left,
.bottom-image-right {
  animation: tilt 4s ease-in-out infinite;
  transform-origin: center center;
}
    /* ===== Logo Section ===== */
    .logo-section img {
      width: 130px;
      margin-top: 70px;
    }

    /* ===== Text Styles ===== */
    .subtext {
      font-size: 14px;
      color: #555;
      margin-top: 8px;
    }

    /* ===== Form Section ===== */
    .form-container {
      margin-top: 30px;
      flex-grow: 1;
    }

/* ===== Input Fields ===== */
/* ===== Input Fields ===== */
.form-control {
  border: none;
  background-color: rgba(255, 196, 41, 1);
  height: 45px;
  
  font-size: 14px;
  color: #000;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  display: block;
  /* Tilt left side downward */
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0% 100%);
  border-radius: 0;
  transition: 0.3s;
  padding: 0 30px;
}

.form-control::placeholder {
  color: #777;
}

.form-control:focus {
  outline: none;
  box-shadow: 0 0 0 2px #001aff33;
   background-color: rgba(255, 196, 41, 1);
}
.form-container form {
  text-align: left; /* Aligns button (and anything else) left */
  max-width: 300px;
  margin: 0 auto; /* Keep form centered horizontally */
}

/* ===== Button ===== */
.btn-custom {
  position: relative;
  background-color: transparent;
  color: #001AFF;
  border: none; /* We'll create the border manually */
  border-radius: 0;
  padding: 8px 30px;
  font-weight: 500;
  margin-top: 15px;
  transition: 0.3s;
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0% 100%);
  z-index: 1;
  overflow: hidden;
    display: inline-block;
}

/* Add border separately so it stays visible */
.btn-custom::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #001AFF;
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0% 100%);
  z-index: -1;
  background-color: transparent;
}

.btn-custom:hover {
  background-color: #001AFF;
  color: white;
}

.btn-custom:hover::before {
  border-color: #001AFF;
}

        /* ===== Decorative Corner Images ===== */
    .bottom-image-left,
    .bottom-image-right {
      position: absolute;
      z-index: 2;
    }

    .bottom-image-left {
      width: 70px;
      bottom: 50px;
      left: 15px;
      animation-delay: 1s;
    }

    .bottom-image-right {
      width: 50px;
      bottom: 60px; /* slightly lower */
      right: 15px;
        animation-delay: 0.5s;
    }

    
    /* ===== Responsiveness ===== */
    @media (min-width: 768px) {
      body {
        width: 400px;
        margin: auto;
        border: 2px solid #001AFF;
        border-radius: 10px;
        
      }
      .logo-section img {
    width: 100px;
   margin-top: 0;
      }
      

      
    }