/* Import Quicksand Font */
    @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500&display=swap');
    
    /* --- Reset & Base --- */
    .login-wrapper * {
      box-sizing: border-box;
      font-family: 'Quicksand', sans-serif;
    }
    
    .login-wrapper {
      width: 100%;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    /* --- The Card --- */
    .figma-card {
      width: 100%;
      max-width: 448px;
      background: #ffffff;
      border: 1.82px solid #d1d5dc;
      border-radius: 0px;
      padding: 24px 33.81px 33.81px 33.81px;
      display: flex;
      flex-direction: column;
      gap: 23.99px;
    }
    
    /* --- Title --- */
    .figma-heading {
      width: 100%;
      text-align: center;
      font-weight: 500;
      font-size: 20px;
      line-height: 30px;
      color: #0a0a0a;
      margin: 0;
    }
    
    /* --- Form Groups --- */
    .form-group {
      width: 100%;
      display: flex;
      flex-direction: column;
    }
    
    .figma-label {
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      color: #364153;
      margin-bottom: 8px;
    }
    
    /* --- Inputs --- */
    .input-wrapper {
      position: relative;
      width: 100%;
      height: 51.61px;
    }
    
    .figma-input {
      width: 100%;
      height: 100%;
      border: 1.82px solid #d1d5dc; /* Default Gray Border */
      border-radius: 0px;
      padding: 12px 16px 12px 48px;
      font-size: 16px;
      color: #0a0a0a;
    
      /* REMOVES DEFAULT BROWSER OUTLINES */
      outline: none !important;
      box-shadow: none !important;
      appearance: none;
    }
    
    /* KEEPS BORDER GRAY ON CLICK/FOCUS */
    .figma-input:focus {
      border-color: #d1d5dc !important;
      outline: none !important;
      box-shadow: none !important;
    }
    
    .figma-input::placeholder {
      color: rgba(10, 10, 10, 0.5);
    }
    
    /* Icons */
    .input-icon-left {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: #99a1af;
      font-size: 18px;
      pointer-events: none;
    }
    
    .input-icon-right {
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      color: #99a1af;
      cursor: pointer;
    }
    
    /* --- Forgot Password --- */
    .forgot-password-row {
      display: flex;
      justify-content: flex-end;
      margin-top: -10px;
    }
    .forgot-password-link {
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      color: #1a52a2;
      text-decoration: none;
    }
    
    /* --- Buttons --- */
    .figma-btn {
      width: 100%;
      height: 51.61px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 400;
      font-size: 16px;
      border-radius: 0px;
      cursor: pointer;
      text-decoration: none;
      transition: opacity 0.2s;
      /* Removes click border on buttons too */
      outline: none !important;
      border: none;
    }
    .figma-btn:focus {
      outline: none !important;
      box-shadow: none !important;
    }
    .figma-btn:hover {
      opacity: 0.9;
    }
    
    .btn-primary-yellow {
      background: #ffb81c;
      color: #ffffff;
    }
    
    .btn-social {
      background: #ffffff;
      border: 1.82px solid #d1d5dc; /* Social buttons border matches inputs */
      color: #364153;
      font-weight: 500;
      gap: 8px;
    }
    
    /* --- Divider --- */
    .divider-container {
      position: relative;
      width: 100%;
      height: 20px;
      text-align: center;
    }
    .divider-line {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 1.82px;
      background-color: #d1d5dc;
      z-index: 1;
    }
    .divider-text {
      position: relative;
      z-index: 2;
      background-color: #fff;
      padding: 0 10px;
      font-size: 14px;
      color: #6a7282;
    }
    
    /* --- Footer --- */
    .footer-text-S {
      text-align: center;
      font-size: 14px;
      color: #4a5565;
      width: 100%;
    }
    .footer-text a {
      color: #0b33ef;
      text-decoration: none;
      font-weight: 500;
      margin-left: 5px;
    }
    
    @media (max-width: 380px) {
      .figma-card {
        padding: 20px 20px;
      }
    }
    
    @media (max-width: 576px) {
      .login-wrapper {
        min-height: auto !important;
        padding-top: 50px !important; /* small top space */
        padding-bottom: 50px !important; /* small bottom space */
      }
    
      body,
      html {
        margin: 0 !important;
        padding: 0 !important;
      }
    }

     /* footer perfect */
                  .footer_right{
                    margin-left: -5px !important;
                    margin-right: -10px !important;

                  }
                  
                   @media (max-width: 576px) {
                  .footer_right {
                       margin-left: 0px !important;
                        margin-right: 0px !important;
                  }
                }