* {
    box-sizing: border-box;
}

body {
    /*background: #00405E;*/
    /*background: radial-gradient(at left bottom, #00405E, #B5CA8C);*/
}

html {
    scroll-behavior: smooth;
}

.selectionMenu {
    width: 100%;
    display: grid;
    /*grid-template-columns: 1fr 1fr 1fr 1fr;*/
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    column-gap: 0.5rem;
    grid-row-gap: 0.5rem;
    font-family: 'Roboto', sans-serif;
}

.previousAppUpload {
    display: grid;
    grid-template-columns: 1fr; /* Single column by default */
    column-gap: 0.5rem; /* Space between elements inside the card */
    /* Visual Card Styling */
    background-color: #ffffff;
    border-radius: 1rem; /* Rounded corners */
    padding: 1.5rem; /* Space inside the card */
    /* The "Lifted" Effect */
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
    border: 0.12rem solid #78a22f; /* Subtle border for definition */
    overflow: hidden; /* Crops anything that tries to poke out */
    word-wrap: break-word; /* Forces long text to wrap to the next line */
    max-width: 100%;
}

/* Just to make the items visible */
.selectionBoxes {
    display: grid;
    grid-template-columns: 1fr; /* Single column by default */
    column-gap: 0.5rem; /* Space between elements inside the card */
    /* Visual Card Styling */
    background-color: #ffffff;
    border-radius: 1rem; /* Rounded corners */
    padding: 1.5rem; /* Space inside the card */
    /* The "Lifted" Effect */
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
    border: 0.12rem solid #e0e0e0; /* Subtle border for definition */
    overflow: hidden; /* Crops anything that tries to poke out */
    word-wrap: break-word; /* Forces long text to wrap to the next line */
    max-width: 100%;
}

    .selectionBoxes:hover {
        transform: translateY(-0.3rem) rotateX(2deg) rotateY(2deg);
        box-shadow: 0 0.5rem 1.3rem rgba(180, 201, 139, 1), 0 1rem 2rem rgba(180, 201, 139, 1), 0 1.4rem 2.4rem rgba(180, 201, 139, 1), 0 1.5rem 3.1rem rgba(180, 201, 139, 1);
    }

#eastM:hover {
    transform: translateY(-0.3rem) rotateX(2deg) rotateY(2deg);
    box-shadow: 0 0.25rem 1rem rgba(96, 4, 37, 0.1), 0 0.5rem 1rem rgba(96, 4, 37, 0.5), 0 0.7rem 1.2rem rgba(96, 4, 37, 0.5), 0 0.75rem 1.5rem rgba(96, 4, 37, 0.1);
}

#westM:hover {
    transform: translateY(-0.3rem) rotateX(2deg) rotateY(2deg);
    box-shadow: 0 0.25rem 1rem rgba(12, 89, 165, 0.1), 0 0.5rem 1rem rgba(12, 89, 165, 0.5), 0 0.7rem 1.2rem rgba(12, 89, 165, 0.5), 0 0.75rem 1.5rem rgba(12, 89, 165, 0.1);
}

#newcomerstown:hover {
    transform: translateY(-0.3rem) rotateX(2deg) rotateY(2deg);
    box-shadow: 0 0.25rem 1rem rgba(239, 98, 30, 0.1), 0 0.5rem 1rem rgba(239, 98, 30, 0.5), 0 0.7rem 1.2rem rgba(239, 98, 30, 0.5), 0 0.75rem 1.5rem rgba(239, 98, 30, 0.1);
}

#southernLocal:hover {
    transform: translateY(-0.3rem) rotateX(2deg) rotateY(2deg);
    box-shadow: 0 0.25rem 1rem rgba(79, 2, 158, 0.1), 0 0.5rem 1rem rgba(79, 2, 158, 0.5), 0 0.7rem 1.2rem rgba(79, 2, 158, 0.5), 0 0.75rem 1.5rem rgba(79, 2, 158, 0.1);
}

#newLex:hover {
    transform: translateY(-0.3rem) rotateX(2deg) rotateY(2deg);
    box-shadow: 0 0.25rem 1rem rgba(246, 100, 1, 0.1), 0 0.5rem 1rem rgba(246, 100, 1, 0.5), 0 0.7rem 1.2rem rgba(246, 100, 1, 0.5), 0 0.75rem 1.5rem rgba(246, 100, 1, 0.1);
}

#northernLocal:hover {
    transform: translateY(-0.3rem) rotateX(2deg) rotateY(2deg);
    box-shadow: 0 0.25rem 1rem rgba(204, 0, 1, 0.1), 0 0.5rem 1rem rgba(204, 0, 1, 0.5), 0 0.7rem 1.2rem rgba(204, 0, 1, 0.5), 0 0.75rem 1.5rem rgba(204, 0, 1, 0.1);
}

#preschoolPartners:hover {
    transform: translateY(-0.3rem) rotateX(2deg) rotateY(2deg);
    box-shadow: 0 0.25rem 1rem rgba(120, 162, 47, 0.1), 0 0.5rem 1rem rgba(120, 162, 47, 0.5), 0 0.7rem 1.2rem rgba(120, 162, 47, 0.5), 0 0.75rem 1.5rem rgba(120, 162, 47, 0.1);
}


.title {
    text-align: center;
    font-family: 'Roboto', sans-serif;
    background-color: #003f5e;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid;
    border-radius: 1rem;
    font-size: 1rem;
    width: 100%;
}

.titleBar2 {
    background-color: #b4c98b;
    font-family: 'Roboto', sans-serif;
    color: white;
    display: flex;
    border: solid;
    border-radius: 1rem;
    padding: 0.5rem; /* Space inside the card */
    width: 100%;
    align-items: center;
    font-size: 1rem;
    justify-content: center;
}

.titleBar2Blue {
    background-color: #003f5e;
    font-family: 'Roboto', sans-serif;
    color: white;
    display: flex;
    border: solid;
    border-radius: 1rem;
    padding: 0.5rem; /* Space inside the card */
    width: 100%;
}

#nextSectionButton:hover {
    transform: translateY(-0.2rem) rotateX(2deg) rotateY(2deg);
}

#space1 {
    background-color: #003f5e;
}

#space2 {
    background-color: #b4c98b;
    /*background: #00405E;*/
    /*background: radial-gradient(at right top, #00405E, #B5CA8C);*/
}

.forgotPasswordTag {
    text-decoration: none; /* Removes the bottom line */
    color: darkgray;
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
}

    .forgotPasswordTag:hover {
        text-decoration: none; /* Removes the bottom line */
        color: darkgray;
        font-size: 1rem;
        transform: translateY(-0.3rem) rotateX(2deg) rotateY(2deg);
    }

.aButton {
    /* Critical: allows the link to have width, height, and padding */
    display: inline-block;
    /* Remove the default underline */
    text-decoration: none;
    /* The rest is the same as a button */
    font-family: 'Roboto', sans-serif;
    padding: 0.4rem 1rem;
    background-color: #78a22f;
    color: white;
    border: none;
    border-radius: 0.4rem;
    font-weight: bold;
    font-size: 1.2rem;
    transition: background 0.2s;
}

.uploadButton {
    /* Critical: allows the link to have width, height, and padding */
    display: inline-block;
    /* Remove the default underline */
    text-decoration: none;
    /* The rest is the same as a button */
    font-family: 'Roboto', sans-serif;
    padding: 0.4rem 1rem;
    background-color: #003f5e;
    color: white;
    border: none;
    border-radius: 0.4rem;
    font-weight: bold;
    font-size: 1rem;
    transition: background 0.2s;
}

.completeButton {
    /* Critical: allows the link to have width, height, and padding */
    display: inline-block;
    /* Remove the default underline */
    text-decoration: none;
    /* The rest is the same as a button */
    font-family: 'Roboto', sans-serif;
    padding: 0.4rem 1rem;
    background-color: #78a22f;
    color: #003f5e;
    border: none;
    border-radius: 0.4rem;
    font-weight: bold;
    font-size: 1.5rem;
    transition: background 0.2s;
}

.aButton:hover {
    background-color: #003f5e;
}

.completeButton:hover {
    background: #003f5e;
    color: white;
}

.uploadButton:hover {
    background-color: #78a22f;
}

.generalInfoOLD {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 0.5rem;
    grid-row-gap: 0.5rem;
    font-family: 'Roboto', sans-serif;
}

.generalInfo {
    width: 100%;
    display: grid;
    /*grid-template-columns: 1fr 1fr 1fr 1fr;*/
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    column-gap: 0.5rem;
    grid-row-gap: 0.5rem;
    font-family: 'Roboto', sans-serif;
}

.generalInfoComponent {
    display: grid;
    grid-template-columns: 1fr; /* Single column by default */
    column-gap: 0.5rem; /* Space between elements inside the card */
    /* Visual Card Styling */
    background-color: #ffffff;
    border-radius: 1rem; /* Rounded corners */
    padding: 1.5rem; /* Space inside the card */
    /* max-width: 28rem;  Standard card width */
    /* The "Lifted" Effect */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 0.12rem solid #e0e0e0; /* Subtle border for definition */
    overflow: hidden; /* Crops anything that tries to poke out */
    word-wrap: break-word; /* Forces long text to wrap to the next line */
    max-width: 100%;
}

.generalInfo2 {
    display: grid;
    grid-template-columns: 0.25fr 1fr 1fr 1fr 0.25fr;
    column-gap: 0.5rem;
    grid-row-gap: 0.5rem;
    font-family: 'Roboto', sans-serif;
}

.generalInfo2component {
    display: grid;
    grid-template-columns: 1fr; /* Single column by default */
    column-gap: 0.2rem; /* Space between elements inside the card */
    grid-row-gap: 0.1rem;
    /* Visual Card Styling */
    background-color: #ffffff;
    border-radius: 1rem; /* Rounded corners */
    padding: 1rem; /* Space inside the card */
    max-width: 28rem; /* Standard card width */
    /* The "Lifted" Effect */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 0.12rem solid #e0e0e0; /* Subtle border for definition */
}

/* Target the input inside the ASP wrapper */
.checkboxes input {
    transform: scale(1); /* Makes it 50% larger */
    margin: 10px; /* Adds some "breathing room" around the scaled box */
    cursor: pointer;
}

/* Optional: Style the label text next to it */
.checkboxes label {
    font-size: 1rem;
    vertical-align: middle;
}

.textboxes {
    width: 100%; /* Fills the container */
    max-width: 37.5rem; /* Prevents it from getting absurdly long on big monitors */
    padding: 0.625rem 1rem;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    font-size: 1rem; /* Prevents auto-zoom on iPhones */
    box-sizing: border-box; /* Ensures padding doesn't push the box outside its container */
}

.logintextboxes {
    width: 500%; /* Fills the container */
    max-width: 15rem; /* Prevents it from getting absurdly long on big monitors */
    min-width: 0;
    padding: 0.625rem 1rem;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    font-size: 1rem; /* Prevents auto-zoom on iPhones */
    box-sizing: border-box; /* Ensures padding doesn't push the box outside its container */
}

.textboxes:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.radiobuttons input {
    transform: scale(1); /* Makes the circle 50% larger */
    margin-right: 10px;
    cursor: pointer;
    vertical-align: middle;
}

.radiobuttons label {
    font-size: 1rem;
    cursor: pointer;
    vertical-align: middle;
}

.parentGuardianInfoOLD {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: 0.5rem;
    grid-row-gap: 0.5rem;
    font-family: 'Roboto', sans-serif;
}

.parentGuardianInfo {
    width: 100%;
    display: grid;
    /*grid-template-columns: 1fr 1fr 1fr 1fr;*/
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    column-gap: 0.5rem;
    grid-row-gap: 0.5rem;
    font-family: 'Roboto', sans-serif;
}

.parentGuardianInfoComponents {
    display: grid;
    grid-template-columns: 1fr; /* Single column by default */
    column-gap: 0.2rem; /* Space between elements inside the card */
    grid-row-gap: 0.1rem;
    /* Visual Card Styling */
    background-color: #ffffff;
    border-radius: 1rem; /* Rounded corners */
    padding: 1rem; /* Space inside the card */
    max-width: 28rem; /* Standard card width */
    /* The "Lifted" Effect */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 0.12rem solid #e0e0e0; /* Subtle border for definition */
}

.custodyInformationOLD {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    column-gap: 0.5rem;
    grid-row-gap: 0.5rem;
    font-family: 'Roboto', sans-serif;
}


.custodyInformation {
    width: 100%;
    display: grid;
    /*grid-template-columns: 1fr 1fr 1fr 1fr;*/
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    column-gap: 0.5rem;
    grid-row-gap: 0.5rem;
    font-family: 'Roboto', sans-serif;
}

.custodyInformationComponent {
    display: grid;
    grid-template-columns: 1fr; /* Single column by default */
    column-gap: 0.2rem; /* Space between elements inside the card */
    grid-row-gap: 0.1rem;
    /* Visual Card Styling */
    background-color: #ffffff;
    border-radius: 1rem; /* Rounded corners */
    padding: 1rem; /* Space inside the card */
    max-width: 28rem; /* Standard card width */
    /*align-content: center; */
    place-content: center;
    /* The "Lifted" Effect */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 0.12rem solid #e0e0e0; /* Subtle border for definition */
}

.mainP2divOLD {
    /* clamp(MIN, PREFERRED, MAX) */
    /* Min: 20rem (~320px) for small phones */
    /* Preferred: 90% of the screen width */
    /* Max: 80rem (~1280px) to prevent it from getting too wide on ultrawide monitors */
    width: clamp(20rem, 90%, 100rem);
    /* Centers the div and adds 2rem of breathing room at the top/bottom */
    margin: 2rem auto;
    min-height: 100vh;
    align-content: start;
    place-items: center;
}

.mainP2div {
    /* clamp(MIN, PREFERRED, MAX) */
    width: clamp(20rem, 90%, 100rem);
    margin: 2rem auto;
    min-height: 100vh;
    /* 1. Ensure the container itself doesn't cause overflow */
    box-sizing: border-box;
    padding: 0 1rem; /* Adds a tiny safety buffer so cards don't touch screen edges */
    /* 2. Layout Logic */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the grid horizontally */
}

.mainLogindiv {
    /* clamp(MIN, PREFERRED, MAX) */
    /* Min: 20rem (~320px) for small phones */
    /* Preferred: 90% of the screen width */
    /* Max: 80rem (~1280px) to prevent it from getting too wide on ultrawide monitors */
    width: clamp(20rem, 90%, 90rem);
    /* Centers the div and adds 2rem of breathing room at the top/bottom */
    margin: 2rem auto;
    min-height: 100vh;
    align-content: start;
}


.relationship {
    display: grid;
    width: 100%;
    /*grid-template-columns: 1fr 1fr 1fr 1fr; */
    /*grid-template-rows: 1fr 1fr; */
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    column-gap: 5rem;
    grid-row-gap: 2rem;
    font-family: 'Roboto', sans-serif;
}

.relationshipInfoBoxOLD {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Single column by default */
    column-gap: 3.5rem; /* Space between elements inside the card */
    grid-row-gap: 0.1rem;
    /* Visual Card Styling */
    background-color: #ffffff;
    border-radius: 1rem; /* Rounded corners */
    padding: 0.7rem; /* Space inside the card */
    max-width: 28rem; /* Standard card width */
    align-content: center;
    /* The "Lifted" Effect */
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
    border: 0.12rem solid #e0e0e0; /* Subtle border for definition */
}

.relationshipInfoBox {
    display: grid;
    /* Uses auto-fit so it stacks on mobile but stays 2-col on desktop */
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    column-gap: 1.5rem;
    row-gap: 0.5rem;
    background-color: #ffffff;
    border-radius: 1rem;
    padding: 1rem;
    /* max-width: 24rem; */
    width: 100%; /* Important: let it shrink on mobile */
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
    border: 0.12rem solid #e0e0e0;
}

.incomeDescriptionBox {
    text-align: center;
    font-family: 'Roboto', sans-serif;
    background-color: #ffffff;
    color: black;
    align-items: center;
    justify-content: center;
    place-items: center;
    border: 0.12rem solid #e0e0e0; /* Subtle border for definition */
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
    border-radius: 1rem;
    font-size: 1rem;
    padding: 1rem;
    max-width: 100%;
}

.uploadBox {
    text-align: center;
    font-family: 'Roboto', sans-serif;
    background-color: #ffffff;
    color: black;
    align-items: center;
    justify-content: center;
    place-items: center;
    font-size: 1rem;
    padding: 1rem;
    max-width: 100%;
}

.centered-rbl {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    font-size: 1.2rem;
    gap: 15px; /* Adds space between items */
}

.incomeInformationOLD {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    column-gap: 0.8rem;
    grid-row-gap: 0.5rem;
    font-family: 'Roboto', sans-serif;
}

.incomeInformation {
    display: grid;
    width: 100%;
    /*grid-template-columns: 1fr 1fr 1fr 1fr; */
    /*grid-template-rows: 1fr 1fr; */
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    column-gap: 2rem;
    grid-row-gap: 2rem;
    font-family: 'Roboto', sans-serif;
}

.incomeInformationCard {
    display: grid;
    grid-template-columns: 1fr; /* Single column by default */
    column-gap: 0.5rem; /* Space between elements inside the card */
    /* Visual Card Styling */
    background-color: #ffffff;
    border-radius: 1rem; /* Rounded corners */
    padding: 1.5rem; /* Space inside the card */
    max-width: 100%; /* Standard card width */
    /* The "Lifted" Effect */
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
    border: 0.12rem solid #e0e0e0; /* Subtle border for definition */
}

.appCompleted {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
}

.imageBox {
    max-width: 15rem; /* Cannot be wider than its container */
    height: 15rem; /* Scale height proportionally to width */
    align-content: center;
    text-align: center;
}

img {
    max-width: 100%; /* Don't grow larger than the container */
    height: auto; /* Keep the original proportions (no squishing) */
    display: block; /* Removes the weird 3px gap at the bottom */
}