/* Import Quicksand Font */
    @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500&display=swap');

    /* --- Reset & Base --- */
    .signup-wrapper * {
        box-sizing: border-box;
        font-family: 'Quicksand', sans-serif;
    }

    .signup-wrapper {
        width: 100%;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 40px 20px;
    }

    /* --- The Card (Figma Container) --- */
    .figma-card {
        width: 100%; 
        max-width: 768px; /* Exact Width from Figma */
        background: #FFFFFF;
        border: 1.82px solid #D1D5DC; /* Exact Border */
        border-radius: 0px;
        
        /* Exact Padding */
        padding: 24px 33.81px 33.81px 33.81px; 
        
        /* Layout */
        display: flex;
        flex-direction: column;
        gap: 23.99px; /* Exact vertical gap */
    }

    /* --- Title --- */
    .figma-heading {
        width: 100%;
        text-align: center;
        font-weight: 500;
        font-size: 20px;
        line-height: 30px;
        color: #0A0A0A;
        margin: 0;
        text-transform: uppercase;
    }

    /* --- Layout Grid (For Side-by-Side Inputs) --- */
    .split-row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        gap: 16px; /* Calculated spacing between columns */
    }

    .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;
        text-transform: uppercase;
    }

    /* --- Inputs --- */
    .input-wrapper {
        position: relative;
        width: 100%;
        height: 51.61px; /* Exact height */
    }

    .figma-input {
        width: 100%;
        height: 100%;
        border: 1.82px solid #D1D5DC;
        border-radius: 0px;
        padding: 12px 16px 12px 48px; /* Left padding for icon */
        font-size: 16px;
        color: #0A0A0A;
        outline: none !important;
        box-shadow: none !important;
        appearance: none;
    }
    
    .figma-input:focus {
        border-color: #D1D5DC !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;
    }

    /* --- Terms Checkbox --- */
    .terms-wrapper {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .form-check-input {
        border: 1.82px solid #D1D5DC;
        border-radius: 0;
        width: 16px;
        height: 16px;
        margin: 0;
        cursor: pointer;
    }
    .form-check-input:checked {
        background-color: #FFB800;
        border-color: #FFB800;
    }
    .terms-text {
        font-size: 14px;
        color: #4A5565;
        line-height: 20px;
    }
    .terms-text a {
        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;
        border: none;
        outline: none !important;
    }
    .figma-btn:hover {
        opacity: 0.9;
    }

    .btn-primary-yellow {
        background: #FFB800; /* Updated per Figma */
        color: #000000;
        text-transform: uppercase;
    }

    .btn-social {
        background: #FFFFFF;
        border: 1.82px solid #D1D5DC;
        color: #364153;
        font-weight: 500;
        gap: 8px;
        text-transform: uppercase;
    }

    /* --- 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 {
        text-align: center;
        font-size: 14px;
        color: #4A5565;
        width: 100%;
        text-transform: uppercase;
    }
    .footer-text a {
        color: #1A52A2;
        text-decoration: none;
        font-weight: 400;
        margin-left: 5px;
    }

    /* --- Responsive Breakpoint --- */
    /* Stacks the split rows on screens smaller than the card width */
    @media (max-width: 768px) {
        .split-row {
            flex-direction: column;
            gap: 23.99px; /* Maintain vertical gap when stacked */
        }
        .figma-card {
            padding: 20px;
        }
    }

     /* 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;
                  }
                }