body, header {
    max-width: 2000px;
    margin: auto!important;
}

.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-top-color: #000;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: inline-block;
    vertical-align: middle;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* whatsapp link */
.whatsapp-link {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.whatsapp-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
}

.compress-link {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.compress-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
}

.help-section {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.icon-bounce {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translateY(0);
    }
    40%, 43% {
        transform: translateY(-10px);
    }
    70% {
        transform: translateY(-5px);
    }
    90% {
        transform: translateY(-2px);
    }
}

/*  accounts form */
.account-forms h1 {
    font-size: 3em;
    border-bottom: 2px solid #e6a97a;
    padding-bottom: 0.1em;
    font-weight: bold;
}


/* .account-forms form input[type="checkbox"] p {
    width: 20px;
    height: 20px;
    background-color: transparent;
 } */

.account-forms p, .account-forms form p label  {
    font-weight: bold;
    font-size: large;
    margin: .3em 0;
 }

 .account-forms p a,  .account-forms a {
    color: #7cd1db;
    text-decoration: underline;
    font-weight: bold;
}

.account-forms p a:hover, .account-forms a:hover {
    color:  #3b2b30;
    text-decoration: none;

}

/* sign in/up button */
.account-forms button {
    background-color: #3b2b30;
    color: white;
    border: none;
    padding: 0.5em 1em;
    margin-top: 1em;
    cursor: pointer;
    font-weight: bold;
    border-radius: 3px;
    margin: 20px 0;
    width: 100%;
}

.account-forms button:hover {
    background-color: #e6a97a;
    color: black;
}

/* google button and h2 */
.account-forms h2 {
    font-size: 2em;
    text-align: center;
    padding-bottom: 0.2em;
    font-weight: bold;
}
 
 .account-forms ul li  {
    width: 100%;
}

.account-forms li a {
    background: #3b2b30;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5em 0em;
    font-weight: bold;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    gap: 10px; /* Adds spacing between icon and text */
}


.account-forms li a::before {
    content: "";
    background: url('https://lh3.googleusercontent.com/COxitqgJr1sJnIDe8-jiKhxDx1FrYbtRHKJ9z_hELisAlapwE9LUPh6fcXIfb5vwpbMl4xl9H9TRFPc5NOO8Sb3VSgIBrfRYvW6cUA');
    background-size: contain;
    background-repeat: no-repeat;
    width: 30px; /* Adjust the size of the icon */
    height: 30px;
    display: inline-block;
}

.account-forms li a:hover {
    background: #e6a97a; 
    color: #3b2b30;
    text-decoration: none;
}

/* form inputs */
.account-forms form p input:not([type="checkbox"]):not([type="radio"])  {
    width: 100%;
    border-radius: 5px;
    color: black!important;

    padding: 0.5em;
 }

 /* Target only <p> that contains an <input type="radio"> */
 .account-forms p:has(input[type="radio"]) {
    background-color: #f9f9f9; /* Light background */
    padding: 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 10px; /* Space between radio and text */
}

/* Style the radio button */
.account-forms p:has(input[type="radio"])  input[type="radio"] {
    accent-color: #007bff; /* Blue radio button */
    width: 18px;
    height: 18px;
}

.account-forms form p input[type="checkbox"] {
    width: 20px !important;
    height: 20px;

}

/* Style the label */
.account-forms p:has(input[type="radio"]) label {
    font-weight: bold;
    color: #333;
}

/* Style strong text inside this specific p */
.account-forms p:has(input[type="radio"]) strong {
    color: #28a745; /* Green for Verified & Primary */
    margin-left: 5px;
}