:root {
    --color-green: #474D3D;
    --color-red: #8C4A45;
    --color-darkerRed: #723c38;
    --color-gold: #a37f41;
    --color-darkGold: #7f6332;
    --color-tan: #F7F5E1;
    --color-purple: #3B2738;
    --color-lightGrey: #f2f2f2;
    --color-darkGrey: #e0e0e0;
    --navbar-height: 64px;
    --navbar-width: 124px;
    --footer-height: 80px;
    --navbar-bg-color: #474D3D;
    --navbar-text-color: #F7F5E1;
    --navbar-text-color-focus: #a37f41;
    --navbar-bg-contrast: #a37f41;
    --color-grey1: #f5f5f5;
    --color-grey2: #e1e1e1;
    --color-grey3: #cccccc;
    --color-grey4: #b8b8b8;
    --color-grey5: #a3a3a3;
    --color-grey6: #8f8f8f;
    --color-grey7: #7a7a7a;
    --color-grey8: #666666;
    --test-outline: transparent;
}

#page-container {
    position: relative;
    background-color: var(--color-tan);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    outline: 3px solid var(--test-outline);
}
#pageContent-wrap {
    flex: 1 0 auto;
    outline: 3px solid var(--test-outline);
}

#RenderBody {
    flex: 1 0 auto;
}

/* Terms and Policy */

.termsH {
    text-align: left;
}

.termsP {
    text-align: left;
}

#termsPage {
    width: 75%;
    transform: translate(18%, 0%);
}
/*Calendar dropdown tag*/
.tag-dropdown {
    position: relative;
    display: inline-block;
}

.tag-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.tag-dropdown:hover .tag-dropdown-content {
    display: block;
}

/*Profile*/
#profilePageContainer {
    flex-grow: 1;
    position: relative;
    left: 130px;
    height: auto;
    min-height: 100vh;
    width: calc(100% - 125px);
    background-color: var(--color-tan);
    outline: 3px solid var(--test-outline);
    padding-bottom: 80px; /* Adjust the value as needed */
}

#profile-picture {
    width: 20%; /* This will make the image responsive to the screen width */
    max-width: 150px; /* This will set a maximum width for the image */
    height: 20%; /* This maintains the aspect ratio */
    max-height: 150px;
    border-radius: 50%;
    object-fit: cover;
    display: block; /* This centers the image */
    margin: auto;
}

#manageTitle {
    color: var(--color-green);
    text-align: center;
    font-size: 36px;
}

#profileContainer {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around; /* Distribute items vertically with space in between */
}

.timeZoneDropDown {
    background-color: var(--color-tan);
    width: 100%;
    height: 25px;
    border-radius: 20px;
    color: var(--color-green);
}
/* Remove position, top, left properties from the following styles */
#profileTitle,
#usernameTitle,
#emailTitle,
#instrumentTitle {
    color: var(--color-green);
    text-align: left;
    width: 75%;
    font-size: 18px;
}

/* Adjust the button styles for better spacing */
#editProfileBtn,
#payoutSettingsBtn {
    color: var(--color-tan);
    text-decoration: none;
    background-color: var(--navbar-bg-color);
    box-shadow: transparent;
    border: 0px;
    text-align: center;
    font-family: 'Times New Roman', serif;
    padding: 10px;
    border-radius: 20px;
    font-size: 18px;
}
    #payoutSettingsBtn:hover, #editProfileBtn:hover {
        background-color: var(--color-gold);
        color: var(--color-tan);
        transition-duration: 0.5s;
    }
.profileDescription {
    color: var(--color-green);
    padding: 10px;
    box-sizing: border-box; /* Account for padding in width */
    overflow-y: auto; /* Add scrollbar if needed */
    word-break: break-all; /* Break words if needed */
    white-space: pre-wrap; /* Wrap text */
    margin: 0; /* Remove default margins */
    border: 1px solid #ccc;
    border-radius: 4px;
    display: block;
    width: 100%;
    height: 100px;
    white-space: pre-wrap;
    word-wrap: break-word;
    resize: vertical;
}

/* Add media query for responsiveness */
@media screen and (max-width: 700px) {
    #profilePageContainer {
            flex-grow: 1;
            position: relative;
            top: 50px;
            left: 0px;
            height: auto;
            min-height: 100vh;
            width: 100vw;
            background-color: var(--color-tan);
            outline: 3px solid var(--test-outline);
            padding-bottom: 80px; /* Adjust the value as needed */
            padding: 10px; /* Adjust padding for smaller screens */
        }

        #manageTitle {
            color: var(--color-green);
            text-align: center;
            font-size: 24px;
        }
    }
    /*Manage Users*/
    .manageUsersCont {
    justify-content: space-between;
    margin: auto;
    width: calc(100vw - var(--navbar-width)); /* Adjusts the width based on the navbar width */
    margin-left: var(--navbar-width); /* Moves the container over to the right by the width of the navbar */
    min-height: 100vh;
    background-color: var(--color-tan);
}

    #usersHeaderContainer {
        margin: auto;
        padding: 20px;
        text-align: center;
    }

    #usersHeader {
        margin: auto;
        margin-bottom: 0;
        font-size: 36px;
    }

    .manageUsersCont table {
        margin: auto;
        width: 100%;
        table-layout: fixed;
        border-spacing: 8px;
        min-height: 100px;
        height: auto;
    }

    .manageUsersCont th {
        padding: 5px;
        margin: 10px;
        color: black;
        min-height: 50px;
        text-align: center;
        vertical-align: top;
        border-radius: 5px;
        background-color: #A5A6A6;
    }

    .manageUsersCont td {
        padding: 5px;
        margin: 10px;
        text-align: center;
        min-height: 50px;
        vertical-align: top;
        border-radius: 5px;
        background-color: var(--color-darkGrey);
        white-space: normal;
        overflow: auto;
    }

        .manageUsersCont td:hover {
            background-color: var(--color-red);
            transition-duration: 1s;
        }

    .manageUsersCont tr {
        margin-bottom: 10px;
        min-height: 50px;
    }

    .userEditBtn {
        background-color: var(--color-green);
        border: none;
        color: var(--color-tan);
        padding: 10px 12px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
        cursor: pointer;
        border-radius: 20px;
    }

        .userEditBtn:hover {
            background-color: #7f6332;
            transition-duration: 0.5s;
        }

    .userRoles {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .userRole {
        color: var(--color-tan);
        background-color: #4C4E4E;
        padding: 3px 10px 3px 10px;
        border-radius: 5px;
    }

        .userRole:hover {
            background-color: var(--color-gold);
            transition-duration: 0.25s;
        }


@media screen and (max-width: 700px) {
    .manageUsersCont {
        justify-content: space-between;
        margin: auto;
        width: 100vw;
        min-height: 100vh;
        background-color: var(--color-tan);
    }
}

    /*Contact*/

    .hr {
        color: var(--color-green);
        border: 5px solid var(--color-green)
    }

    #contactContent {
        position: relative;
        min-height: 100vh;
        width: 100%;
        outline: 3px solid var(--test-outline);
    }

    #contact-container {
        min-height: 800px;
        text-align: center;
        background-color: var(--color-tan);
        outline: 3px solid var(--test-outline);
    }

    #contact-section1 {
        display: inline-block;
        top: +100px;
        height: 300px;
        width: 75%;
        position: relative;
        text-align: center;
        background-color: var(--color-tan);
        outline: 3px solid var(--test-outline);
    }

    #section1-title1 {
        width: 75%;
        margin: 50px auto;
        color: var(--color-green);
        text-align: center;
        font-family: 'Times New Roman', serif;
        font-size: 45px;
        outline: 3px solid var(--test-outline);
        position: relative;
    }

    #section1-title2 {
        width: 50%;
        margin: 30px auto;
        color: var(--color-green);
        text-align: center;
        font-family: 'Times New Roman', serif;
        font-size: 20px;
        outline: 3px solid var(--test-outline);
        position: relative;
    }

    #contact-discord-button-container {
        position: relative;
        top: 75px;
        outline: 3px solid var(--test-outline);
    }

    #contact-discord-button {
        padding: 10px 43px;
        text-decoration: none;
        background-color: var(--color-gold);
        border: 2px solid var(--color-gold);
        color: var(--color-tan);
        text-align: center;
        display: inline-block;
        font-size: 16px;
        transition-duration: 0.4s;
        cursor: pointer;
        outline: 3px solid var(--test-outline);
        border-radius: 30px;
    }

        #contact-discord-button:hover {
            background-color: var(--color-darkGold);
            border: 2px solid var(--color-darkGold);
            color: var(--color-tan);
        }


    @media (max-width: 765px) {
        #section1-title1 {
            font-size: 26px;
        }
    }

    /*Edit Apt*/

    #editAptCont {
        border-radius: 20px;
        min-width: 400px;
        width: 50%;
        color: var(--color-tan);
        margin: auto;
        padding: 20px 20px 20px 20px;
        background-color: var(--color-green);
        text-align: center;
    }

    /*Create Apt*/
    #createAptCont {
        border-radius: 20px;
        min-width: 300px;
        width: 50%;
        color: var(--color-tan);
        margin: 20px auto;
        padding: 20px 20px 20px 20px;
        background-color: var(--color-green);
        text-align: center;
    }

    .formTag {
        color: var(--color-tan);
        display: block;
        margin: 10px auto;
    }

        .formTag input, .formTag select, .formTag textarea {
            width: 100%;
            border: 2px solid var(--color-tan);
            border-radius: 5px;
            padding: 5px;
            color: var(--color-tan);
            background-color: var(--color-green);
            margin: auto;
        }

    .tag {
        width: 100%;
        border: 2px solid var(--color-tan);
        border-radius: 5px;
        padding: 5px;
        color: var(--color-tan);
        background-color: var(--color-green);
        margin: auto;
    }

    #createAptBtn {
        color: var(--color-tan);
        background-color: var(--color-gold);
        font-size: 20px;
        cursor: pointer;
        text-decoration: none;
        border: 0;
        border-radius: 5px;
        margin: 20px auto;
        padding: 5px 10px;
        display: block;
        outline: 0;
    }

    /*Edit Profile*/
#EditProfileCont {
    height: auto;
    min-height: 100vh;
    background-color: var(--color-tan);
}

    #saveProfileEditBtn {
        background-color: var(--color-gold);
        border: none;
        border-radius: 20px;
        padding: 10px;
        color: var(--color-tan);
    }

        #saveProfileEditBtn:hover {
            background-color: var(--color-darkGold);
            border: none;
            border-radius: 20px;
            padding: 10px;
            color: var(--color-tan);
            transition-duration: 0.5s;
        }

    /*Login*/

    #loginContainer {
        top: 100px;
        min-height: 750px;
        width: 100vw;
        height: 100vh;
        background-color: var(--color-tan);
    }

    #cont {
        border-radius: 20px;
        top: 250px;
        overflow: hidden;
        position: relative;
        left: 40%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: min(900px, 95vw);
        height: 550px;
        background: var(--color-tan);
    }

    #welcomeContainer {
        position: relative;
        left: 300px;
        width: 300px;
        top: 45px;
    }

    #cont2 {
        overflow: hidden;
        position: absolute;
        left: 640px;
        top: 0;
        width: 900px;
        height: 100%;
        padding-left: 260px;
        background: var(--color-green);
    }

    #info2 {
        overflow: hidden;
        z-index: 2;
        position: absolute;
        left: 0;
        top: 0;
        width: 260px;
        height: 100%;
        padding-top: 360px;
    }

    #text {
        z-index: 2;
        position: absolute;
        left: 0;
        top: 50px;
        width: 100%;
        padding: 0 20px;
        text-align: center;
        color: var(--color-tan);
    }

    #info2Btn {
        overflow: hidden;
        z-index: 0;
        width: 150px;
        height: 36px;
        margin: 0 auto;
        background-color: transparent;
        color: transparent;
        text-transform: uppercase;
        font-size: 15px;
        cursor: pointer;
        border-radius: 30px;
    }

    #signupBtn {
        background-color: var(--color-tan);
        color: var(--color-green);
        border: none;
        padding: 5px 36px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        z-index: 2;
        font-size: 15px;
        cursor: pointer;
        border-radius: 30px;
        transition-duration: 0.4s;
    }

        #signupBtn:hover {
            background-color: var(--color-gold);
            color: var(--color-tan)
        }

    h2 {
        width: 100%;
        font-size: 26px;
        text-align: center;
        color: var(--color-green);
    }


    label {
        display: block;
        width: 260px;
        margin: 25px auto 0;
        text-align: center;
        color: var(--color-green);
    }

        label span {
            font-size: 12px;
            color: #bababa;
            text-transform: uppercase;
            color: var(--color-green);
        }

    input {
        font-family: 'Times New Roman', serif;
        display: hidden;
        width: 100%;
        background: none;
        background-color: transparent;
        outline: none;
        color: var(--color-green);
        margin-top: 5px;
        padding-bottom: 5px;
        font-size: 16px;
        text-align: center;
        border: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.4);
    }

    #info1Btn {
        overflow: hidden;
        position: center;
        z-index: 0;
        width: 150px;
        height: 36px;
        margin: 0 auto;
        background-color: transparent;
        color: transparent;
        text-transform: uppercase;
        font-size: 15px;
        cursor: pointer;
        border-radius: 30px;
    }

    #button {
        background-color: var(--color-gold);
        color: var(--color-tan);
        border: none;
        padding: 10px 40px;
        font-family: 'Times New Roman', serif;
        text-transform: uppercase;
        z-index: 2;
        font-size: 15px;
        cursor: pointer;
        border-radius: 30px;
        transition-duration: 0.4s;
    }

        #button:hover {
            background-color: var(--color-green);
            color: var(--color-tan)
        }


    @media (max-width: 765px) {

        #cont2 {
            overflow: hidden;
            position: absolute;
            left: 300px;
            top: 500px;
            width: 300px;
            height: 450px;
            padding-left: 260px;
            background: var(--color-green);
            border-radius: 20px;
        }

        #info2 {
            overflow: hidden;
            z-index: 2;
            position: absolute;
            left: 25px;
            top: 0;
            width: 260px;
            height: 100%;
            padding-top: 360px;
        }

        #loginContainer {
            width: 100%;
            height: 1150px;
        }

        #cont {
            border-radius: 20px;
            top: 250px;
            overflow: hidden;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: min(900px, 95vw);
            height: 950px;
            background: var(--color-tan);
        }
    }

    /*Register*/
    #registerContainer {
        width: 100vw;
        height: 100vh;
        min-height: 750px;
        background-color: var(--color-tan);
    }

    #cont1 {
        border-radius: 20px;
        top: 250px;
        overflow: hidden;
        position: relative;
        left: 40%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: min(900px, 95vw);
        height: 550px;
        background: var(--color-tan);
    }

    #regForm {
        position: relative;
        left: 300px;
        width: 300px;
        top: 45px;
    }

    #reg1Btn {
        overflow: hidden;
        position: center;
        z-index: 0;
        width: 150px;
        height: 36px;
        margin: 0 auto;
        background-color: transparent;
        color: transparent;
        text-transform: uppercase;
        font-size: 15px;
        cursor: pointer;
        border-radius: 30px;
    }


    #cont3 {
        overflow: hidden;
        position: absolute;
        left: 640px;
        top: 0;
        width: 900px;
        height: 100%;
        padding-left: 260px;
        background: var(--color-green);
    }

    #info3 {
        overflow: hidden;
        z-index: 2;
        position: absolute;
        left: 0;
        top: 0;
        width: 260px;
        height: 100%;
        padding-top: 360px;
    }

    #text3 {
        z-index: 2;
        position: absolute;
        left: 0;
        top: 50px;
        width: 100%;
        padding: 0 20px;
        text-align: center;
        color: var(--color-tan);
    }

    #info3Btn {
        overflow: hidden;
        position: center;
        z-index: 0;
        width: 150px;
        height: 36px;
        margin: 0 auto;
        background-color: transparent;
        color: transparent;
        text-transform: uppercase;
        font-size: 15px;
        cursor: pointer;
        border-radius: 30px;
    }

    #signinBtn {
        background-color: var(--color-tan);
        color: var(--color-green);
        border: none;
        padding: 5px 36px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        z-index: 2;
        font-size: 15px;
        cursor: pointer;
        border-radius: 30px;
        transition-duration: 0.4s;
    }

        #signinBtn:hover {
            background-color: var(--color-gold);
            color: var(--color-tan)
        }

    h2 {
        width: 100%;
        font-size: 26px;
        text-align: center;
        color: var(--color-green);
    }

    label {
        display: block;
        width: 260px;
        margin: 25px auto 0;
        text-align: center;
        color: var(--color-green);
    }

        label span {
            font-size: 12px;
            color: #bababa;
            text-transform: uppercase;
            color: var(--color-green);
        }

    input {
        font-family: 'Times New Roman', serif;
        display: hidden;
        width: 100%;
        background: none;
        background-color: transparent;
        outline: none;
        color: var(--color-green);
        margin-top: 5px;
        padding-bottom: 5px;
        font-size: 16px;
        text-align: center;
        border: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.4);
    }

    #terms {
        color: var(--color-green);
        text-align: center;
    }

    #termsLink {
        color: var(--color-gold);
    }

#errorMsg {
    z-index: 2;
    position: absolute;
    left: 15%;
    top: 200%;
    width: 85%;
    padding: 0 20px;
    text-align: left;
    color: #ff3333;
}

    @media (max-width: 765px) {

        #cont3 {
            overflow: hidden;
            position: absolute;
            left: 300px;
            top: 575px;
            width: 300px;
            height: 450px;
            padding-left: 260px;
            background: var(--color-green);
            border-radius: 20px;
        }

        #info3 {
            overflow: hidden;
            z-index: 2;
            position: absolute;
            left: 25px;
            top: 0;
            width: 260px;
            height: 100%;
            padding-top: 360px;
        }

        #registerContainer {
            width: 100%;
            height: 1250px;
        }

        #cont1 {
            border-radius: 20px;
            top: 250px;
            overflow: hidden;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: min(900px, 95vw);
            height: 1050px;
            background: var(--color-tan);
        }
    }

    /*Info*/

    #infoPageContainer {
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* This helps keep the footer at the bottom */
        align-items: stretch;
        position: relative;
        width: calc(100vw - var(--navbar-width)); /* Adjusts the width based on the navbar width */
        margin-left: var(--navbar-width); /* Moves the container over to the right by the width of the navbar */
        min-height: 100vh;
        background-color: var(--color-tan);
        outline: 3px solid var(--test-outline);
        box-sizing: border-box;
        padding-bottom: 80px;
        padding-top: 20px;
    }


    /*Section 1*/
    #sectionOne {
        height: auto;
        outline: 3px solid var(--test-outline);
    }

    #S1C1 {
        position: relative;
        outline: 3px solid var(--test-outline);
    }

    #S1T1C {
        position: relative;
        outline: 3px solid var(--test-outline);
    }

    #S1T2C {
        position: relative;
        color: var(--color-green);
        text-align: left;
        left: 12.5%;
        width: 75%;
        font-size: 18px;
        outline: 3px solid var(--test-outline);
    }

    #S1T3C {
        position: relative;
        outline: 3px solid var(--test-outline);
    }

    #S1T1 {
        position: relative;
        color: var(--color-green);
        text-align: center;
        width: 100%;
        font-size: 36px;
        outline: 3px solid var(--test-outline);
    }

    #S1T2 {
    }

    /*sectionTwo*/
    #sectionTwo {
        height: auto;
        outline: 3px solid var(--test-outline);
    }

    #S2C1 {
        position: relative;
        outline: 3px solid var(--test-outline);
    }

    #S2T1C {
        position: relative;
        outline: 3px solid var(--test-outline);
    }

    #S2T2C {
        position: relative;
        color: var(--color-green);
        text-align: left;
        left: 12.5%;
        width: 75%;
        font-size: 18px;
        outline: 3px solid var(--test-outline);
    }

    #S2T1 {
        position: relative;
        color: var(--color-green);
        text-align: center;
        width: 100%;
        font-size: 36px;
        outline: 3px solid var(--test-outline);
    }

    #S2T2 {
    }

    /*sectionThree*/
    #sectionThree {
        height: 100%;
        outline: 3px solid var(--test-outline);
    }

    #S3C1 {
        position: relative;
        color: var(--color-green);
        text-align: left;
        left: 12.5%;
        width: 75%;
        font-size: 36px;
        outline: 3px solid var(--test-outline);
    }

    #S3T1C {
        position: relative;
        outline: 3px solid var(--test-outline);
    }

    #S3T2C {
        position: relative;
        color: var(--color-green);
        text-align: left;
        font-size: 18px;
        outline: 3px solid var(--test-outline);
    }

    #S3T1 {
        position: relative;
        color: var(--color-green);
        text-align: center;
        width: 100%;
        font-size: 36px;
        outline: 3px solid var(--test-outline);
    }

    #S3T2 {
        position: relative;
        outline: 3px solid var(--test-outline);
    }

    /* Media Queries */
    @media screen and (max-width: 768px) {

        #infoPageContainer {
            top: 50px;
            width: 100vw;
            margin-left: 0;
            height: 100%;
            background-color: var(--color-tan);
            outline: 3px solid var(--test-outline);
            padding-bottom: 80px; /* Adjust the value as needed */
            box-sizing: border-box; /* Include padding in element's total width */
            display: flex;
            flex-direction: column;
            justify-content: space-between; /* This helps keep the footer at the bottom */
            align-items: center; /* Center horizontally */
            text-align: center; /* Center text horizontally */
        }

        #sectionOne,
        #sectionTwo,
        #sectionThree {
            height: auto;
            width: 80%;
            display: flex;
            flex-direction: column;
            justify-content: center; /* Center vertically */
            align-items: center; /* Center horizontally */
            text-align: center; /* Center text horizontally */
        }

        #S1C1,
        #S1T1C,
        #S1T2C,
        #S1T3C,
        #S2C1,
        #S2T1C,
        #S2T2C,
        #S3C1,
        #S3T1C,
        #S3T2C {
            left: 0;
            width: 100%;
            font-size: 14px;
        }
    }

    /*Admin Edit*/

    #removeRoleBtn {
        background-color: var(--color-gold);
        border: none;
        color: var(--color-tan);
        padding: 10px 43px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        cursor: pointer;
        border-radius: 20px;
    }

        #removeRoleBtn:hover {
            background-color: #7f6332;
            transition-duration: 0.5s;
        }

    #adminEditCancelBtn {
        background-color: var(--color-gold);
        border: none;
        color: var(--color-tan);
        padding: 5px 43px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        cursor: pointer;
        border-radius: 20px;
    }

        #adminEditCancelBtn:hover {
            background-color: #7f6332;
            transition-duration: 0.5s;
        }

    /*Pricing*/

#page-content {
    position: relative;
    height: 1000px;
    width: 100%;
    background-color: var(--color-tan);
    outline: 3px solid var(--test-outline);
}

#payment-wrap {
    position: relative;
    text-align: center;
    top: +64px;
    height: 1000px;
    width: calc(100vw - var(--navbar-width)); /* Adjusts the width based on the navbar width */
    margin-left: var(--navbar-width); /* Moves the container over to the right by the width of the navbar */
    outline: 3px solid var(--test-outline);
    background-color: var(--color-tan);
}

@media screen and (max-width: 768px) {
    #payment-wrap {
        position: relative;
        text-align: center;
        width: 100vw;
        margin-left: 0;
        top: +64px;
        height: 1000px;
        outline: 3px solid var(--test-outline);
        background-color: var(--color-tan);
    }
}

    /* Sections */
    /* Section1 */
    #payment-section1 {
        display: inline-block;
        width: 40%;
        position: relative;
        height: 50px;
        background-color: var(--color-tan);
        margin: 30px auto;
        color: var(--color-purple);
        text-align: center;
        font-family: 'Times New Roman', serif;
        font-size: 45px;
        outline: 3px solid transparent;
    }

    /* Section2 */
    #payment-section2 {
        position: relative;
        height: 300px;
        text-align: center;
        margin: auto;
        outline: 3px solid var(--test-outline);
    }

    /* Section3 */
    #payment-section3 {
        display: inline-block;
        width: 40%;
        position: relative;
        top: -12px;
        height: 50px;
        outline: 3px solid var(--test-outline);
        background-color: var(--color-tan);
        margin: 15px auto;
        color: var(--color-purple);
        text-align: center;
        font-family: 'Times New Roman', serif;
        font-size: 28px;
        outline: 3px solid var(--test-outline);
    }

    /* Section4 */
    #payment-section4 {
        position: relative;
        height: 50px;
        top: -25px;
        margin: auto;
        width: 40%;
        outline: 3px solid var(--test-outline);
        background-color: var(--color-tan);
        color: var(--color-purple);
        text-align: center;
        font-family: 'Times New Roman', serif;
        font-size: 16px;
        outline: 3px solid var(--test-outline);
    }

    /* Section5 */
    #payment-section5 {
        position: relative;
        height: 300px;
        text-align: center;
        margin: auto;
        outline: 3px solid var(--test-outline);
    }

    /* Card1 */
    #card1 {
        display: inline-block;
        position: relative;
        vertical-align: middle;
        height: 250px;
        width: 200px;
        margin: 10px;
        background-color: var(--color-grey1);
        outline: 3px solid var(--test-outline);
    }

    #card1-heading {
        position: relative;
        height: 50px;
        top: 15px;
        margin: auto;
        width: 40%;
        outline: 3px solid var(--test-outline);
        color: var(--color-purple);
        text-align: center;
        font-family: 'Times New Roman', serif;
        font-size: 24px;
        outline: 3px solid var(--test-outline);
    }

    #card1-price {
        position: relative;
        height: 50px;
        margin: auto;
        width: 40%;
        outline: 3px solid var(--test-outline);
        color: var(--color-purple);
        text-align: center;
        font-family: 'Times New Roman', serif;
        font-size: 32px;
        outline: 3px solid var(--test-outline);
    }

    #card1-content {
        position: relative;
        height: 50px;
        margin: auto;
        width: 60%;
        outline: 3px solid var(--test-outline);
        color: var(--color-purple);
        text-align: center;
        font-family: 'Times New Roman', serif;
        font-size: 18px;
        outline: 3px solid var(--test-outline);
    }

    #card1-button-container {
        position: relative;
        top: 40px;
        outline: 3px solid var(--test-outline);
    }

    #card1-button {
        padding: 10px 43px;
        border: transparent;
        text-decoration: none;
        background-color: var(--color-green);
        border: transparent;
        color: var(--color-tan);
        text-align: center;
        display: inline-block;
        font-size: 16px;
        transition-duration: 0.4s;
        cursor: pointer;
        outline: 3px solid var(--test-outline);
        border-radius: 20px;
    }

        #card1-button:hover {
            background-color: var(--color-gold);
            color: var(--color-tan);
        }

    /* Card2 */
    #card2 {
        display: inline-block;
        position: relative;
        vertical-align: middle;
        height: 250px;
        width: 200px;
        margin: 10px;
        background-color: var(--color-grey2);
        outline: 3px solid var(--test-outline);
    }

    #card2-heading {
        position: relative;
        height: 50px;
        top: 15px;
        margin: auto;
        width: 40%;
        outline: 3px solid var(--test-outline);
        color: var(--color-purple);
        text-align: center;
        font-family: 'Times New Roman', serif;
        font-size: 24px;
        outline: 3px solid var(--test-outline);
    }

    #card2-price {
        position: relative;
        height: 50px;
        margin: auto;
        width: 40%;
        outline: 3px solid var(--test-outline);
        color: var(--color-purple);
        text-align: center;
        font-family: 'Times New Roman', serif;
        font-size: 32px;
        outline: 3px solid var(--test-outline);
    }

    #card2-content {
        position: relative;
        height: 50px;
        margin: auto;
        width: 60%;
        outline: 3px solid var(--test-outline);
        color: var(--color-purple);
        text-align: center;
        font-family: 'Times New Roman', serif;
        font-size: 18px;
        outline: 3px solid var(--test-outline);
    }

    #card2-button-container {
        position: relative;
        top: 40px;
        outline: 3px solid var(--test-outline);
    }

    #card2-button {
        padding: 10px 43px;
        border: transparent;
        text-decoration: none;
        background-color: var(--color-green);
        color: var(--color-tan);
        text-align: center;
        display: inline-block;
        font-size: 16px;
        transition-duration: 0.4s;
        cursor: pointer;
        outline: 3px solid var(--test-outline);
        border-radius: 20px;
    }

        #card2-button:hover {
            background-color: var(--color-gold);
            color: var(--color-tan);
        }

    /* Card3 */
    #card3 {
        display: inline-block;
        position: relative;
        vertical-align: middle;
        height: 250px;
        width: 200px;
        margin: 10px;
        background-color: var(--color-grey3);
        outline: 3px solid var(--test-outline);
    }

    #card3-heading {
        position: relative;
        height: 50px;
        top: 15px;
        margin: auto;
        width: 40%;
        outline: 3px solid var(--test-outline);
        color: var(--color-purple);
        text-align: center;
        font-family: 'Times New Roman', serif;
        font-size: 24px;
        outline: 3px solid var(--test-outline);
    }

    #card3-price {
        position: relative;
        height: 50px;
        margin: auto;
        width: 40%;
        outline: 3px solid var(--test-outline);
        color: var(--color-purple);
        text-align: center;
        font-family: 'Times New Roman', serif;
        font-size: 32px;
        outline: 3px solid var(--test-outline);
    }

    #card3-content {
        position: relative;
        height: 50px;
        margin: auto;
        width: 60%;
        outline: 3px solid var(--test-outline);
        color: var(--color-red);
        text-align: center;
        font-family: 'Times New Roman', serif;
        font-size: 18px;
        outline: 3px solid var(--test-outline);
    }

    #card3-button-container {
        position: relative;
        top: 40px;
        outline: 3px solid var(--test-outline);
    }

    #card3-button {
        padding: 10px 43px;
        border: transparent;
        text-decoration: none;
        background-color: var(--color-green);
        color: var(--color-tan);
        text-align: center;
        display: inline-block;
        font-size: 16px;
        transition-duration: 0.4s;
        cursor: pointer;
        outline: 3px solid var(--test-outline);
        border-radius: 20px;
    }

        #card3-button:hover {
            background-color: var(--color-gold);
            color: var(--color-tan);
        }

    /* Card4 */
    #card4 {
        display: inline-block;
        position: relative;
        vertical-align: middle;
        height: 250px;
        width: 200px;
        margin: 10px;
        background-color: var(--color-grey4);
        outline: 3px solid var(--test-outline);
    }

    #card4-heading {
        position: relative;
        height: 50px;
        top: 15px;
        margin: auto;
        width: 60%;
        outline: 3px solid var(--test-outline);
        color: var(--color-purple);
        text-align: center;
        font-family: 'Times New Roman', serif;
        font-size: 24px;
        outline: 3px solid var(--test-outline);
    }

    #card4-price {
        position: relative;
        height: 50px;
        margin: auto;
        width: 40%;
        outline: 3px solid var(--test-outline);
        color: var(--color-purple);
        text-align: center;
        font-family: 'Times New Roman', serif;
        font-size: 32px;
        outline: 3px solid var(--test-outline);
    }

    #card4-content {
        position: relative;
        height: 50px;
        margin: auto;
        width: 60%;
        outline: 3px solid var(--test-outline);
        color: var(--color-purple);
        text-align: center;
        font-family: 'Times New Roman', serif;
        font-size: 18px;
        outline: 3px solid var(--test-outline);
    }

    #card4-button-container {
        position: relative;
        top: 40px;
        outline: 3px solid var(--test-outline);
    }

    #card4-button {
        padding: 10px 43px;
        border: transparent;
        text-decoration: none;
        background-color: var(--color-gold);
        color: var(--color-tan);
        text-align: center;
        display: inline-block;
        font-size: 16px;
        transition-duration: 0.4s;
        cursor: pointer;
        outline: 3px solid var(--test-outline);
        border-radius: 20px;
    }

        #card4-button:hover {
            background-color: var(--color-darkGold);
            color: var(--color-tan);
        }

    /* Card5 */
    #card5 {
        display: inline-block;
        position: relative;
        height: 250px;
        width: 200px;
        margin: 10px;
        background-color: var(--color-grey5);
        outline: 3px solid var(--test-outline);
    }

    #card5-heading {
        position: relative;
        height: 50px;
        top: 15px;
        margin: auto;
        width: 60%;
        outline: 3px solid var(--test-outline);
        color: var(--color-grey1);
        text-align: center;
        font-family: 'Times New Roman', serif;
        font-size: 24px;
        outline: 3px solid var(--test-outline);
    }

    #card5-price {
        position: relative;
        height: 50px;
        margin: auto;
        width: 40%;
        outline: 3px solid var(--test-outline);
        color: var(--color-grey1);
        text-align: center;
        font-family: 'Times New Roman', serif;
        font-size: 32px;
        outline: 3px solid var(--test-outline);
    }

    #card5-content {
        position: relative;
        height: 50px;
        margin: auto;
        width: 60%;
        outline: 3px solid var(--test-outline);
        color: var(--color-grey1);
        text-align: center;
        font-family: 'Times New Roman', serif;
        font-size: 18px;
        outline: 3px solid var(--test-outline);
    }

    #card5-button-container {
        position: relative;
        top: 40px;
        outline: 3px solid var(--test-outline);
    }

    #card5-button {
        padding: 10px 43px;
        border: transparent;
        text-decoration: none;
        background-color: var(--color-tan);
        color: var(--color-green);
        text-align: center;
        display: inline-block;
        font-size: 16px;
        transition-duration: 0.4s;
        cursor: pointer;
        outline: 3px solid var(--test-outline);
        border-radius: 20px;
    }

        #card5-button:hover {
            background-color: var(--color-gold);
            color: var(--color-tan);
        }

    /* Card6 */
    #card6 {
        display: inline-block;
        position: relative;
        height: 250px;
        width: 200px;
        margin: 10px;
        background-color: var(--color-grey6);
        outline: 3px solid var(--test-outline);
    }

    #card6-heading {
        position: relative;
        height: 50px;
        top: 15px;
        margin: auto;
        width: 60%;
        outline: 3px solid var(--test-outline);
        color: var(--color-grey1);
        text-align: center;
        font-family: 'Times New Roman', serif;
        font-size: 24px;
        outline: 3px solid var(--test-outline);
    }

    #card6-price {
        position: relative;
        height: 50px;
        margin: auto;
        width: 40%;
        outline: 3px solid var(--test-outline);
        color: var(--color-grey1);
        text-align: center;
        font-family: 'Times New Roman', serif;
        font-size: 32px;
        outline: 3px solid var(--test-outline);
    }

    #card6-content {
        position: relative;
        height: 50px;
        margin: auto;
        width: 60%;
        outline: 3px solid var(--test-outline);
        color: var(--color-grey1);
        text-align: center;
        font-family: 'Times New Roman', serif;
        font-size: 18px;
        outline: 3px solid var(--test-outline);
    }

    #card6-button-container {
        position: relative;
        top: 40px;
        outline: 3px solid var(--test-outline);
    }

    #card6-button {
        padding: 10px 43px;
        border: transparent;
        text-decoration: none;
        background-color: var(--color-tan);
        color: var(--color-green);
        text-align: center;
        display: inline-block;
        font-size: 16px;
        transition-duration: 0.4s;
        cursor: pointer;
        outline: 3px solid var(--test-outline);
        border-radius: 20px;
    }

        #card6-button:hover {
            background-color: var(--color-gold);
            color: var(--color-tan);
        }

    /* Card7 */
    #card7 {
        display: inline-block;
        position: relative;
        height: 250px;
        width: 200px;
        margin: 10px;
        background-color: var(--color-grey7);
        outline: 3px solid var(--test-outline);
    }

    #card7-heading {
        position: relative;
        height: 50px;
        top: 15px;
        margin: auto;
        width: 60%;
        outline: 3px solid var(--test-outline);
        color: var(--color-grey1);
        text-align: center;
        font-family: 'Times New Roman', serif;
        font-size: 24px;
        outline: 3px solid var(--test-outline);
    }

    #card7-price {
        position: relative;
        height: 50px;
        margin: auto;
        width: 40%;
        outline: 3px solid var(--test-outline);
        color: var(--color-grey1);
        text-align: center;
        font-family: 'Times New Roman', serif;
        font-size: 32px;
        outline: 3px solid var(--test-outline);
    }

    #card7-content {
        position: relative;
        height: 50px;
        margin: auto;
        width: 60%;
        outline: 3px solid var(--test-outline);
        color: var(--color-grey1);
        text-align: center;
        font-family: 'Times New Roman', serif;
        font-size: 18px;
        outline: 3px solid var(--test-outline);
    }

    #card7-button-container {
        position: relative;
        top: 40px;
        outline: 3px solid var(--test-outline);
    }

    #card7-button {
        padding: 10px 43px;
        border: transparent;
        text-decoration: none;
        background-color: var(--color-tan);
        color: var(--color-green);
        text-align: center;
        display: inline-block;
        font-size: 16px;
        transition-duration: 0.4s;
        cursor: pointer;
        outline: 3px solid var(--test-outline);
        border-radius: 20px;
    }

        #card7-button:hover {
            background-color: var(--color-gold);
            color: var(--color-tan);
        }

    /* Card8 */
    #card8 {
        display: inline-block;
        position: relative;
        height: 250px;
        width: 200px;
        margin: 10px;
        background-color: var(--color-grey8);
        outline: 3px solid var(--test-outline);
    }

    #card8-heading {
        position: relative;
        height: 50px;
        top: 15px;
        margin: auto;
        width: 60%;
        outline: 3px solid var(--test-outline);
        color: var(--color-tan);
        text-align: center;
        font-family: 'Times New Roman', serif;
        font-size: 24px;
        outline: 3px solid var(--test-outline);
    }

    #card8-price {
        position: relative;
        height: 50px;
        margin: auto;
        width: 40%;
        outline: 3px solid var(--test-outline);
        color: var(--color-tan);
        text-align: center;
        font-family: 'Times New Roman', serif;
        font-size: 32px;
        outline: 3px solid var(--test-outline);
    }

    #card8-content {
        position: relative;
        height: 50px;
        margin: auto;
        width: 60%;
        outline: 3px solid var(--test-outline);
        color: var(--color-tan);
        text-align: center;
        font-family: 'Times New Roman', serif;
        font-size: 18px;
        outline: 3px solid var(--test-outline);
    }

    #card8-button-container {
        position: relative;
        top: 40px;
        outline: 3px solid var(--test-outline);
    }

    #card8-button {
        padding: 10px 43px;
        border: transparent;
        text-decoration: none;
        background-color: var(--color-gold);
        color: var(--color-tan);
        text-align: center;
        display: inline-block;
        font-size: 16px;
        transition-duration: 0.4s;
        cursor: pointer;
        outline: 3px solid var(--test-outline);
        border-radius: 20px;
    }

        #card8-button:hover {
            background-color: var(--color-darkGold);
            color: var(--color-tan);
        }

    /* Dynamic Stuff*/

    @media screen and (max-width: 920px) {
        #payment-wrap {
            position: relative;
            text-align: center;
            top: +64px;
            height: 1400px;
            outline: 3px solid var(--test-outline);
            background-color: var(--color-tan);
        }

        #payment-section2 {
            position: relative;
            height: 500px;
            text-align: center;
            margin: auto;
            outline: 3px solid var(--test-outline);
        }

        #payment-section5 {
            position: relative;
            height: 500px;
            text-align: center;
            margin: auto;
            outline: 3px solid var(--test-outline);
        }
    }

    @media screen and (max-width: 920px) {
        #payment-section3 {
            display: inline-block;
            width: 75%;
            position: relative;
            top: 20px;
            height: 50px;
            outline: 3px solid var(--test-outline);
            background-color: var(--color-tan);
            margin: 15px auto;
            color: var(--color-purple);
            text-align: center;
            font-family: 'Times New Roman', serif;
            font-size: 28px;
            outline: 3px solid var(--test-outline);
        }

        #payment-section4 {
            position: relative;
            height: 50px;
            top: 0px;
            margin: auto;
            width: 75%;
            outline: 3px solid var(--test-outline);
            background-color: var(--color-tan);
            color: var(--color-purple);
            text-align: center;
            font-family: 'Times New Roman', serif;
            font-size: 16px;
            outline: 3px solid var(--test-outline);
        }
    }

    @media screen and (max-width: 460px) {
        #payment-wrap {
            position: relative;
            text-align: center;
            top: +64px;
            height: 2600px;
            outline: 3px solid var(--test-outline);
            background-color: var(--color-tan);
        }

        #payment-section2 {
            position: relative;
            height: 1100px;
            text-align: center;
            margin: auto;
            outline: 3px solid var(--test-outline);
        }

        #payment-section5 {
            position: relative;
            height: 1100px;
            text-align: center;
            margin: auto;
            outline: 3px solid var(--test-outline);
        }
    }

    /*Home*/

    #indexContent {
        position: relative;
        height: auto;
        width: 100%;
        outline: 3px solid var(--test-outline);
    }

    /* Section1 */
    #section1 {
        position: relative;
        background-color: var(--color-tan);
    }

    #main-logo-img {
        display: block;
        max-width: 500px;
        min-width: 300px;
        height: auto;
        margin: 0px auto 0px auto;
        width: 50%;
        outline: 3px solid var(--test-outline);
    }

    #slogan-heading-container {
        position: relative;
        outline: 3px solid var(--test-outline);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
    }

    #slogan-heading {
        max-width: 100%;
        margin: auto;
        color: var(--color-green);
        text-align: center;
        font-family: 'Times New Roman', serif;
        font-size: 45px;
        outline: 3px solid var(--test-outline);
    }

    #hooking-heading-container {
        position: relative;
        outline: 3px solid var(--test-outline);
        margin-top: 20px;
    }

    #hooking-heading {
        width: 50%;
        margin: auto;
        color: var(--color-red);
        text-align: center;
        font-family: 'Times New Roman', serif;
        font-size: 30px;
        outline: 3px solid var(--test-outline);
    }

    #before-button-title-container {
        position: relative;
        outline: 3px solid var(--test-outline);
        margin-top: 20px;
    }

    #before-button-title {
        width: 40%;
        margin: 10px auto;
        color: var(--color-green);
        text-align: center;
        font-family: 'Times New Roman', serif;
        font-size: 18px;
        outline: 3px solid var(--test-outline);
    }

    #section1-buttons-container {
        position: relative;
        text-align: center;
        outline: 3px solid var(--test-outline);
    }

    .section1-button-discord,
    .section1-button-getStarted {
        background-color: var(--color-red);
        border: none;
        color: var(--color-tan);
        padding: 10px 43px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        cursor: pointer;
        border-radius: 20px;
        margin-bottom: 20px;
    }

        .section1-button-discord:hover,
        .section1-button-getStarted:hover {
            background-color: var(--color-darkerRed);
            transition-duration: 0.5s;
        }

    .section1-button-register {
        background-color: var(--color-gold);
        border: none;
        color: var(--color-tan);
        padding: 10px 60px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 24px;
        cursor: pointer;
        border-radius: 40px;
        margin-bottom: 5px;
    }

        .section1-button-register:hover {
            background-color: var(--color-darkGold);
            transition-duration: 0.5s;
        }

    @media screen and (max-width: 700px) {

        #before-button-title {
            width: 80%;
            
        }

        .section1-button-register {
            padding: 7px 40px;
        }

        #slogan-heading {
            font-size: 30px;
        }

        #hooking-heading {
            font-size: 20px;
        }
    }

    /* Section2 */
    #section2 {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        align-items: flex-start;
        text-align: center;
        min-height: 500px;
        height: auto;
        background-color: var(--color-lightGrey);
        outline: 3px solid var(--test-outline);
    }

    #section2-content1, #section2-content2 {
        box-sizing: border-box;
        flex-basis: 40%;
        margin: auto;
        text-align: center;
        outline: 3px solid var(--test-outline);
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #section2-title1 {
        color: var(--color-green);
        text-align: left;
        font-family: 'Times New Roman', serif;
        font-size: 20px;
        outline: 3px solid var(--test-outline);
    }

    #section2-title1-container {
        position: relative;
        outline: 3px solid var(--test-outline);
    }

    #section2-title2 {
        color: var(--color-green);
        text-align: left;
        font-family: 'Times New Roman', serif;
        font-size: 40px;
        outline: 3px solid var(--test-outline);
    }

    #section2-title2-container {
        position: relative;
        outline: 3px solid var(--test-outline);
    }

    #section2-title3 {
        color: var(--color-green);
        text-align: Left;
        font-family: 'Times New Roman', serif;
        font-size: 16px;
        outline: 3px solid var(--test-outline);
    }

    #section2-title3-container {
        position: relative;
        outline: 3px solid var(--test-outline);
    }

    #section2-title4 {
        color: var(--color-green);
        text-align: left;
        font-family: 'Times New Roman', serif;
        font-size: 30px;
        outline: 3px solid var(--test-outline);
    }

    #section2-title4-container {
        position: relative;
        outline: 3px solid var(--test-outline);
    }

    #section2-title5 {
        color: var(--color-green);
        text-align: left;
        font-family: 'Times New Roman', serif;
        font-size: 18px;
        outline: 3px solid var(--test-outline);
    }

    #section2-title5-container {
        position: relative;
        outline: 3px solid var(--test-outline);
    }

    #section2-title6-container {
        text-align: center;
        position: relative;
        column-count: 2;
        height: 100%;
        outline: 3px solid var(--test-outline);
    }

    #section2-title6-list {
        color: var(--color-green);
        text-align: left;
        font-family: 'Times New Roman', serif;
        font-size: 14px;
        outline: 3px solid var(--test-outline);
    }

    @media screen and (max-width: 700px) {
        
        #section2 {
            flex-direction: column;
            align-items: center;
        }

        #section2-content1, #section2-content2 {
            flex-basis: 80%;
            margin-top: 50px;
        }

        #section2-title1 {
            font-size: 16px;
        }

        #section2-title2 {
            font-size: 24px;
        }

        #section2-title3 {
            font-size: 16px;
        }

        #section2-title4 {
            font-size: 24px;
        }

        #section2-title5 {
            font-size: 16px;
        }

        #section2-title6-list {
            font-size: 16px;
        }
    }

    /* Section3 */
    #section3 {
        display: flex;
        justify-content: space-around;
        align-items: center;
        text-align: center;
        height: auto;
        padding: 50px 0px;
        background-color: var(--color-darkGrey);
        outline: 3px solid var(--test-outline);
    }

    #section3-content1, #section3-content2 {
        flex: 1;
        outline: 3px solid var(--test-outline);
        padding: 50px;
    }

    #section3-title1 {
        color: var(--color-purple);
        text-align: left;
        font-family: 'Times New Roman', serif;
        font-size: 16px;
        outline: 3px solid var(--test-outline);
    }

    #section3-title2 {
        color: var(--color-purple);
        text-align: left;
        font-family: 'Times New Roman', serif;
        font-size: 36px;
        outline: 3px solid var(--test-outline);
    }

    #section3-title3 {
        color: var(--color-purple);
        text-align: left;
        font-family: 'Times New Roman', serif;
        font-size: 14px;
        outline: 3px solid var(--test-outline);
    }

    #section3-image {
        max-width: 100%;
        height: 100%;
        background-image: url('path-to-your-image');
        background-size: cover;
        background-position: center;
    }

    @media screen and (max-width: 700px) {
        #section3 {
            flex-direction: column; /* stack the children vertically on small screens */
            padding: 20px 0px;
        }

        #section3-content1, #section3-content2 {
            width: 100%;
        }

        #section3-title1 {
            color: var(--color-purple);
            text-align: left;
            font-family: 'Times New Roman', serif;
            font-size: 16px;
            outline: 3px solid var(--test-outline);
        }

        #section3-title2 {
            color: var(--color-purple);
            text-align: left;
            font-family: 'Times New Roman', serif;
            font-size: 24px;
            outline: 3px solid var(--test-outline);
        }

        #section3-title3 {
            color: var(--color-purple);
            text-align: left;
            font-family: 'Times New Roman', serif;
            font-size: 16px;
            outline: 3px solid var(--test-outline);
        }

        #section3-image {
            width: 80vw;
            height: 60vh;
            object-fit: cover;
            object-position: center;
        }
    }

    /* Section4 */
    #section4 {
        display: flex;
        justify-content: space-around;
        align-items: center;
        text-align: center;
        height: auto;
        padding: 75px 0;
        background-color: var(--color-red);
        outline: 3px solid var(--test-outline);
    }

    #section4-content1, #section4-content2 {
        flex: 1;
        outline: 3px solid var(--test-outline);
        padding: 20px;
    }

    #section4-image {
        width: 100%;
        height: 100%;
        max-height: 500px;
        max-width: 300px;
        background-image: url('path-to-your-image');
        background-size: cover;
        background-position: center;
    }

    #section4-title1 {
        color: var(--color-tan);
        font-family: 'Times New Roman', serif;
        font-size: 16px;
        outline: 3px solid var(--test-outline);
    }

    #section4-title2 {
        color: var(--color-tan);
        text-align: left;
        font-family: 'Times New Roman', serif;
        font-size: 32px;
        outline: 3px solid var(--test-outline);
    }

    #section4-title3 {
        color: var(--color-tan);
        text-align: left;
        font-family: 'Times New Roman', serif;
        font-size: 16px;
        outline: 3px solid var(--test-outline);
    }

    #section4-title4 {
        color: var(--color-tan);
        text-align: left;
        height: 100px;
        font-family: 'Times New Roman', serif;
        font-size: 14px;
        outline: 3px solid var(--test-outline);
    }
    /* Responsive styles */
    @media screen and (max-width: 700px) {
        #section1, #section2, #section3, #section4 {
            flex-direction: column;
            align-items: center;
        }

        #section2-content1, #section2-content2,
        #section3-content1, #section3-content2,
        #section4-content1, #section4-content2 {
            width: 80%;
            margin-top: 50px;
        }
    }

    /* Section5 */
    #section5 {
        position: relative;
        height: auto;
        text-align: center;
        background-color: var(--color-lightGrey);
        padding: 10px;
        outline: 3px solid var(--test-outline);
    }

    #section5-title1,
    #section5-title2,
    #section5-title3,
    #section5-title4,
    #section5-title5 {
        color: var(--color-purple);
        text-align: center;
        font-family: 'Times New Roman', serif;
        width: 40%;
        margin: 0 auto;
        padding: 0;
        outline: 3px solid var(--test-outline);
    }

    #section5-title1-container,
    #section5-title2-container,
    #section5-title3-container,
    #section5-title4-container,
    #section5-title5-container {
        position: relative;
        text-align: center;
        outline: 3px solid var(--test-outline);
    }

    #section5-title1 {
        font-size: 18px;
    }

    #section5-title2 {
        font-size: 36px;
    }

    #section5-title3,
    #section5-title4 {
        font-size: 16px;
    }

    #section5-title5 {
        font-size: 18px;
    }

    #section5-title6 {
        position: relative;
        color: var(--color-purple);
        text-align: center;
        font-family: 'Times New Roman', serif;
        font-size: 24px;
        margin: 0;
        padding: 0;
        outline: 3px solid var(--test-outline);
    }

    #discord-button-container {
        position: relative;
        outline: 3px solid var(--test-outline);
    }

    #discord-button {
        padding: 10px 43px;
        text-decoration: none;
        background-color: var(--color-gold);
        color: var(--color-tan);
        text-align: center;
        display: inline-block;
        font-size: 16px;
        transition-duration: 0.4s;
        cursor: pointer;
        outline: 3px solid var(--test-outline);
        border-radius: 30px;
    }

        #discord-button:hover {
            background-color: var(--color-darkGold);
            color: var(--color-tan);
        }

    @media screen and (max-width: 900px) {
        #section5 {
            height: auto;
        }

        #section5-title3,
        #section5-title4 {
            width: 80%; /* Updated */
            margin: 0 auto;
        }
    }

    @media screen and (max-width: 700px) {
        #section5 {
            height: auto;
        }
    }

    @media screen and (max-width: 600px) {
        #section5 {
            height: auto;
        }

        #section5-title1,
        #section5-title2,
        #section5-title3,
        #section5-title4,
        #section5-title5 {
            width: 90%; /* Updated */
            margin: 0 auto;
        }
    }

    /*Calendars*/
    .calendarCont {
        justify-content: space-between;
        margin: 0px 0px 0px 125px;
        width: calc(100% - 125px);
        min-height: 100vh;
        background-color: var(--color-tan);
    }

        .calendarCont table {
            width: 100%;
            table-layout: fixed;
            border-spacing: 8px;
            min-height: 100px;
            height: auto;
        }

        .calendarCont th {
            padding: 5px;
            margin: 10px;
            color: black;
            min-height: 50px;
            text-align: center;
            vertical-align: top;
            border-radius: 5px;
            background-color: #A5A6A6;
        }

            .calendarCont th:hover {
            }

        .calendarCont td {
            padding: 5px;
            margin: 10px;
            text-align: center;
            min-height: 50px;
            vertical-align: top;
            border-radius: 5px;
            background-color: var(--color-darkGrey);
        }

            .calendarCont td:hover {
                background-color: var(--color-red);
                transition-duration: 1s;
            }

        .calendarCont tr {
            margin-bottom: 10px;
            min-height: 50px;
        }

    #calendar-navigation {
        display: flex;
        position: relative;
        justify-content: center;
    }

    #CalendarWeeklyHeading {
        padding: 20px;
        text-align: center;
    }

        #CalendarWeeklyHeading h2 {
            margin-bottom: 0;
            font-size: 36px;
        }

    #timeSlot {
        height: auto;
        border-radius: 5px;
        font-size: 12px;
        color: var(--color-tan);
        margin: 0 0 5px 0;
        background-color: #4C4E4E;
    }

    #timeSlotApt {
        border-radius: 5px;
        padding: 0 5px 0 5px;
        max-width: 90%;
        max-width: 60%;
        width: fit-content;
        margin: 10px auto;
        color: var(--color-tan);
        background-color: #E8E8E8;
    }

        #timeSlotApt:hover {
            background-color: var(--color-gold);
            transition-duration: 0.25s;
        }

    .clearfix::after {
        content: "";
        display: table;
        clear: both;
    }

    #aptTag {
        color: black;
        text-decoration: none;
        font-size: 14px;
        cursor: pointer;
    }

        #aptTag:hover {
        }

    #adminAptTag {
        color: black;
        text-decoration: none;
        font-size: 14px;
        cursor: pointer;
    }

    #previousWeek {
        position: absolute;
        left: 0px;
    }

    #nextWeek {
        position: absolute;
        right: 0px;
    }

    input[type="submit"] {
        background-color: var(--color-gold);
        border: none;
        color: var(--color-tan);
        padding: 10px 43px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        cursor: pointer;
        border-radius: 20px;
    }

        input[type="submit"]:hover {
            background-color: #7f6332;
            transition-duration: 0.5s;
        }

    #CalendarChange {
        display: flex;
        position: relative;
        padding: 5px;
        height: 25px;
    }

    #dailyCalendar {
        background-color: var(--color-green);
        position: absolute;
        left: 0;
        border: none;
        color: var(--color-tan);
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
        cursor: pointer;
        border-radius: 20px;
    }

    #monthlyCalendar {
        background-color: var(--color-green);
        border: none;
        position: absolute;
        right: 0;
        color: var(--color-tan);
        padding: 10px 12px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
        cursor: pointer;
        border-radius: 20px;
    }

    #deleteAptButton {
        color: var(--color-tan);
        background-color: var(--color-green);
        font-size: 10px;
        min-width: 40px;
        cursor: pointer;
        border: 0;
        border-radius: 5px;
        padding: 3px;
        outline: 0;
    }

        #deleteAptButton:hover {
            background-color: var(--color-red);
            transition-duration: 0.25s;
        }

    #editAptButton {
        color: var(--color-tan);
        background-color: var(--color-green);
        font-size: 10px;
        min-width: 40px;
        cursor: pointer;
        border: 0;
        border-radius: 5px;
        padding: 3px;
        outline: 0;
    }

        #editAptButton:hover {
            background-color: var(--color-red);
            transition-duration: 0.25s;
        }

    .editAndDelete {
        display: flex;
        flex-direction: column;
        margin-bottom: 5px;
    }

    #monthlyAptTag {
        color: var(--color-tan);
        background-color: var(--color-green);
        font-size: 12px;
        min-width: 40px;
        text-decoration: none;
        cursor: pointer;
        border: 0;
        border-radius: 5px;
        padding: 3px 10px 3px 10px;
        outline: 0;
    }

        #monthlyAptTag:hover {
            background-color: var(--color-gold);
            transition-duration: 0.25s;
        }


    #calendar2cont {
        justify-content: space-between;
        width: 100vw;
        height: 100vh;
        min-height: 100vh;
        background-color: var(--color-tan);
    }

    #previousDay {
        position: absolute;
        left: 0px;
    }

    #nextDay {
        position: absolute;
        right: 0px;
    }

    #dailyAptCont {
        border-radius: 20px;
        width: fit-content;
        margin: 20px auto;
        padding: 20px 20px 5px 20px;
        background-color: var(--color-green);
    }

    #dailyAptTag {
        color: var(--color-tan);
        border-radius: 20px;
        max-width: 75vw;
        min-width: 50vw;
        font-size: 20px;
        text-align: center;
        padding: 10px;
        margin: 0 0 20px 0;
        height: auto;
        background-color: dimgrey;
    }

        #dailyAptTag:hover {
            background-color: var(--color-darkerRed);
            transition-duration: 0.5s;
        }

    #dailyAptSubmit {
        color: var(--color-tan);
        background-color: var(--color-gold);
        font-size: 20px;
        cursor: pointer;
        text-decoration: none;
        border: 0;
        border-radius: 5px;
        padding: 5px 10px;
        outline: 0;
    }

        #dailyAptSubmit:hover {
            background-color: #7f6332;
            transition-duration: 0.5s;
        }

    #confirmApt {
        font-size: 20px;
        margin: 20px 0px 20px 0px;
    }

    #aptConfirmHeading {
        font-size: 26px;
        text-align: center;
    }

    @media screen and (max-width: 700px) {
        .calendarCont {
            justify-content: space-between;
            margin: 50px 0px;
            min-height: 100vh;
            width: 100vw;
            background-color: var(--color-tan);
        }

        .editAndDelete {
            display: flex;
            flex-direction: column;
            margin-bottom: 5px;
        }
        #deleteAptButton {
            color: var(--color-tan);
            background-color: var(--color-green);
            font-size: 10px;
            min-width: 15px;
            font-size: 6.5px;
            cursor: pointer;
            border: 0;
            border-radius: 5px;
            padding: 3px;
            outline: 0;
        }

            #deleteAptButton:hover {
                background-color: var(--color-red);
                transition-duration: 0.25s;
            }

        #editAptButton {
            color: var(--color-tan);
            background-color: var(--color-green);
            font-size: 10px;
            min-width: 15px;
            cursor: pointer;
            border: 0;
            border-radius: 5px;
            padding: 3px;
            outline: 0;
        }

            #editAptButton:hover {
                background-color: var(--color-red);
                transition-duration: 0.25s;
            }

        #timeSlot {
            height: auto;
            border-radius: 2px;
            font-size: 4px;
            color: var(--color-tan);
            padding: 2px;
            margin: 0 0 5px 0;
            background-color: #4C4E4E;
        }

        #CalendarWeeklyHeading {
            padding: 20px;
            text-align: center;
        }

            #CalendarWeeklyHeading h2 {
                margin-bottom: 0;
                font-size: 18px;
                padding: 10px;
            }

        #aptTag {
            color: black;
            text-decoration: none;
            font-size: 6px;
            cursor: pointer;
        }
        #adminAptTag {
            color: black;
            text-decoration: none;
            font-size: 6px;
            cursor: pointer;
        }
        input[type="submit"] {
            background-color: var(--color-gold);
            border: none;
            color: var(--color-tan);
            padding: 10px 15px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 12px;
            cursor: pointer;
            border-radius: 20px;
        }

        .calendarCont th {
            padding: 5px;
            margin: 10px;
            color: black;
            font-size: 8px;
            min-height: 50px;
            text-align: center;
            vertical-align: top;
            border-radius: 5px;
            background-color: #A5A6A6;
        }

        #timeSlotApt {
            border-radius: 5px;
            padding: 0px;
            max-width: 100%;
            width: 100%;
            margin: 10px auto;
            color: var(--color-tan);
            background-color: #E8E8E8;
        }
    }

/* Mobile comfort overrides */
#createAptCont,
#editAptCont {
    width: min(700px, 92vw);
    min-width: 0;
}

#usersTableContainer {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#usersTable {
    min-width: 680px;
}

#payment-wrap,
#payment-section2,
#payment-section5 {
    height: auto;
}

#payment-wrap {
    min-height: calc(100vh - 64px);
    padding-bottom: 18px;
}

#payment-section2,
#payment-section5 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

@media screen and (max-width: 765px) {
    #loginContainer,
    #registerContainer {
        height: auto;
        min-height: 100vh;
        padding: 70px 0 24px;
    }

    #cont,
    #cont1 {
        left: 50%;
        top: 0;
        transform: translate(-50%, 0);
        height: auto;
        min-height: 0;
        padding: 20px 0;
        overflow: visible;
    }

    #welcomeContainer,
    #regForm {
        left: 0;
        top: 0;
        width: min(360px, 92vw);
        margin: 0 auto;
    }

    #cont2,
    #cont3 {
        position: relative;
        left: 0;
        top: 0;
        width: min(360px, 92vw);
        height: auto;
        margin: 18px auto 0;
        padding: 16px;
        border-radius: 16px;
    }

    #info2,
    #info3 {
        position: static;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
        padding-top: 0;
        overflow: visible;
    }

    #text,
    #text3 {
        position: static;
        left: 0;
        top: 0;
        width: 100%;
        padding: 0;
        margin-bottom: 12px;
        text-align: center;
    }

    #info2Btn,
    #info3Btn {
        width: 100%;
        height: auto;
        overflow: visible;
        text-align: center;
        margin-top: 8px;
    }

    #errorMsg {
        position: static;
        left: 0;
        top: 0;
        width: 100%;
        padding: 0;
        margin-top: 8px;
    }
}

@media screen and (max-width: 700px) {
    .calendarCont,
    .manageUsersCont,
    #profilePageContainer,
    #infoPageContainer,
    #payment-wrap {
        width: 100%;
        margin-left: 0;
        box-sizing: border-box;
    }

    #payment-section1,
    #payment-section3,
    #payment-section4 {
        width: 92%;
        height: auto;
    }

    #payment-section1 {
        font-size: 32px;
        line-height: 1.2;
        margin: 16px auto;
    }

    #payment-section3 {
        font-size: 24px;
        margin-top: 18px;
    }

    #payment-section4 {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .calendarCont {
        margin: 56px 0 0;
        padding: 0 8px 16px;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .calendarCont table {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
    }

    .calendarCont th,
    .calendarCont td {
        padding: 4px;
        font-size: 11px;
        vertical-align: top;
        overflow-wrap: anywhere;
        word-break: break-word;
        max-width: 0;
    }

    #calendar-navigation {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    #previousWeek,
    #nextWeek,
    #previousDay,
    #nextDay {
        position: static;
    }

    #timeSlot {
        font-size: 10px;
        border-radius: 6px;
        padding: 4px;
    }

    #timeSlotApt {
        padding: 4px;
        border-radius: 8px;
        width: 100%;
        margin: 4px 0;
    }

    #aptTag,
    #adminAptTag {
        font-size: 10px;
        line-height: 1.35;
    }

    .calendarCont th {
        font-size: 10px;
    }

    #editAptButton,
    #deleteAptButton {
        min-width: 58px;
        font-size: 11px;
        padding: 5px 6px;
    }

    #dailyAptTag {
        min-width: 0;
        max-width: none;
        font-size: 16px;
        line-height: 1.35;
    }
}

/* Pricing, appointment, and profile polish */
#payment-wrap {
    top: 64px;
    height: auto !important;
    min-height: calc(100vh - 64px);
    padding: 12px 12px 100px;
    box-sizing: border-box;
}

#payment-section1,
#payment-section3,
#payment-section4 {
    height: auto !important;
}

#payment-section2,
#payment-section5 {
    height: auto !important;
    align-items: stretch;
    gap: 14px;
    margin-bottom: 14px;
}

#card1, #card2, #card3, #card4, #card5, #card6, #card7, #card8 {
    height: auto !important;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 8px 10px 14px;
    box-sizing: border-box;
}

#card1-content, #card2-content, #card3-content, #card4-content,
#card5-content, #card6-content, #card7-content, #card8-content {
    height: auto !important;
    min-height: 44px;
}

#card1-button-container, #card2-button-container, #card3-button-container, #card4-button-container,
#card5-button-container, #card6-button-container, #card7-button-container, #card8-button-container {
    margin-top: auto;
    top: 0 !important;
}

.create-appointment-page {
    padding-bottom: 22px;
}

.create-appointment-card {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}

.timezone-note {
    margin: 0 0 14px;
    font-size: 14px;
    color: #e7ddc6;
}

.profile-photo-display,
.profile-photo-preview {
    width: 136px !important;
    height: 136px !important;
    max-width: 136px !important;
    max-height: 136px !important;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-gold);
    background-color: #ecead7;
}

.profile-photo-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.profile-photo-label {
    margin-bottom: 4px;
}

.profile-photo-input {
    max-width: 360px;
}

.photo-help-text {
    color: #e7ddc6;
    font-size: 12px;
}

@media screen and (max-width: 700px) {
    #payment-wrap {
        top: 56px;
        padding: 10px 8px 90px;
    }

    #card1, #card2, #card3, #card4, #card5, #card6, #card7, #card8 {
        width: min(280px, 92vw);
        margin: 6px auto;
    }

    .profile-photo-display,
    .profile-photo-preview {
        width: 112px !important;
        height: 112px !important;
        max-width: 112px !important;
        max-height: 112px !important;
    }
}

/* Global anti-overlap/mobile safety overrides */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

#page-content,
#payment-content,
#loginContainer,
#registerContainer,
#infoPageContainer,
#contactContent,
#contact-container {
    height: auto !important;
    min-height: 100vh;
}

#cont,
#cont1 {
    width: min(900px, 95vw) !important;
    max-width: 95vw;
    height: auto !important;
}

#cont2,
#cont3,
#welcomeContainer,
#regForm {
    max-width: 100%;
}

#profilePageContainer,
.manageUsersCont,
.calendarCont,
#payment-wrap {
    overflow-x: hidden;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
    height: auto;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

h1, h2, h3, h4, h5, h6, p, a, label, td, th, li {
    overflow-wrap: anywhere;
}

@media (max-width: 765px) {
    #cont2,
    #cont3,
    #info2,
    #info3,
    #text,
    #text3 {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    #info2Btn,
    #info3Btn {
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }
}

/* Profile page redesign */
#profilePageContainer {
    padding: 88px 20px 36px;
    box-sizing: border-box;
}

#profileContainer {
    max-width: 1120px;
    margin: 20px auto 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

#leftSectionProfile,
#rightSectionProfile {
    background: linear-gradient(165deg, rgba(71, 77, 61, 0.97), rgba(59, 39, 56, 0.96));
    color: var(--color-tan);
    border-radius: 18px;
    padding: 22px 20px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

#leftSectionProfile h3,
#rightSectionProfile h3 {
    color: #e8d7aa;
    width: 100%;
    margin: 12px 0 4px;
}

.profileItem {
    color: #f6f2de;
    background: rgba(247, 245, 225, 0.09);
    border: 1px solid rgba(247, 245, 225, 0.2);
    border-radius: 10px;
    padding: 10px 12px;
    margin: 0 0 10px;
}

#editProfileBtn,
#payoutSettingsBtn {
    width: 100%;
    max-width: 260px;
}

@media screen and (max-width: 700px) {
    #profilePageContainer {
        padding: 66px 12px 24px;
    }

    #profileContainer {
        grid-template-columns: 1fr;
        max-width: 560px;
    }
}

#EditProfileCont {
    padding: 78px 16px 28px;
    box-sizing: border-box;
}

#EditProfileCont #createAptCont {
    width: min(860px, 96vw);
    background: linear-gradient(165deg, rgba(71, 77, 61, 0.97), rgba(59, 39, 56, 0.96));
    border: 1px solid rgba(247, 245, 225, 0.2);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
}

@media screen and (max-width: 700px) {
    #EditProfileCont {
        padding: 60px 10px 20px;
    }
}

/* Create appointment visual builder */
.event-builder-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1.05fr) minmax(280px, 1fr);
    gap: 18px;
    align-items: start;
}

.event-builder-left,
.event-builder-right {
    background: rgba(247, 245, 225, 0.08);
    border: 1px solid rgba(247, 245, 225, 0.18);
    border-radius: 14px;
    padding: 14px;
}

.event-detail-box {
    background: rgba(247, 245, 225, 0.07);
    border: 1px solid rgba(247, 245, 225, 0.2);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
}

.event-form-panel {
    background: rgba(247, 245, 225, 0.08);
    border: 1px solid rgba(247, 245, 225, 0.22);
    border-radius: 12px;
    padding: 14px;
}

.event-form-panel .formTag {
    margin: 10px 0 6px;
    text-align: left;
}

.event-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

#event-month-title {
    margin: 0;
    color: var(--color-tan);
    font-size: 20px;
}

.event-nav-btn {
    background: var(--color-gold);
    color: var(--color-tan);
    border: none;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    cursor: pointer;
}

.event-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 12px;
}

.event-day-header {
    text-align: center;
    color: #e8d7aa;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 0;
}

.event-day-cell {
    border: 1px solid rgba(247, 245, 225, 0.25);
    background: rgba(247, 245, 225, 0.08);
    color: var(--color-tan);
    border-radius: 8px;
    min-height: 36px;
    cursor: pointer;
}

.event-day-cell.is-empty {
    background: transparent;
    border-color: transparent;
    cursor: default;
}

.event-day-cell.is-today {
    border-color: var(--color-gold);
}

.event-day-cell.is-selected {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-tan);
    font-weight: bold;
}

.event-time-block h4 {
    margin: 0 0 8px;
    color: #e8d7aa;
}

.event-time-slots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
}

.event-time-chip {
    border: 1px solid rgba(247, 245, 225, 0.22);
    background: rgba(247, 245, 225, 0.08);
    color: var(--color-tan);
    border-radius: 8px;
    padding: 6px 4px;
    cursor: pointer;
}

.event-time-chip.is-selected {
    background: var(--color-gold);
    border-color: var(--color-gold);
}

.event-selection-summary {
    margin-top: 12px;
    border-radius: 10px;
    background: rgba(247, 245, 225, 0.08);
    border: 1px solid rgba(247, 245, 225, 0.2);
    padding: 10px 12px;
    color: var(--color-tan);
}

.event-selection-summary p {
    margin: 6px 0 0;
}

.event-description {
    min-height: 150px;
    resize: vertical;
}

.event-tag-select {
    min-height: 86px;
}

.event-input {
    width: 100%;
    border-radius: 10px;
    border: 1px solid #cbc7b1;
    padding: 10px 12px;
    background: #ffffff;
    color: #2f2f2f;
}

.event-input:focus {
    outline: 2px solid var(--color-gold);
    outline-offset: 1px;
}

.event-recurring-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 0;
}

.repeat-inline-google {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.repeat-simple-row {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.repeat-main-label {
    color: var(--color-tan);
    font-size: 15px;
}

.repeat-fields {
    margin-top: 10px;
    display: grid;
    grid-template-columns: auto 90px minmax(150px, 1fr) auto 90px auto;
    gap: 8px;
    align-items: center;
}

.repeat-fields.is-hidden {
    display: none;
}

.repeat-label,
.repeat-tail {
    color: #e8d7aa;
    font-size: 13px;
}

.repeat-summary-text {
    margin: 8px 0 0;
    color: #e8d7aa;
    font-size: 14px;
}

.event-inline-field-label {
    color: #e8d7aa;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.repeat-every-number,
.repeat-occurrences-number {
    width: 88px !important;
    text-align: center;
}

.repeat-type-select {
    min-width: 170px;
}

.repeat-inline-label {
    color: var(--color-tan);
    font-size: 14px;
}

#repeat-summary-row {
    justify-content: flex-start;
}

#repeat-summary-text {
    color: #e8d7aa;
    margin: 0;
}

.event-builder-right select.formTag,
.event-builder-right input.formTag,
.event-builder-right textarea.formTag {
    color: var(--color-tan);
    background-color: rgba(71, 77, 61, 0.95);
    border: 1px solid rgba(247, 245, 225, 0.35);
}

.event-builder-right select.formTag option {
    color: #f7f5e1;
    background-color: #474d3d;
}

.recurring-inline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.visually-hidden-input {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media screen and (max-width: 980px) {
    .event-builder-grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 520px) {
    .event-time-slots {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .repeat-inline-google {
        gap: 6px;
    }

    .repeat-type-select {
        min-width: 0;
        width: 100%;
    }

    .repeat-fields {
        grid-template-columns: 1fr 1fr;
    }

    .repeat-label,
    .repeat-tail {
        grid-column: 1 / -1;
    }

    .recurring-inline {
        grid-template-columns: 1fr;
    }
}

/* Pricing text overlap protection */
#card1-heading, #card2-heading, #card3-heading, #card4-heading, #card5-heading, #card6-heading, #card7-heading, #card8-heading,
#card1-price, #card2-price, #card3-price, #card4-price, #card5-price, #card6-price, #card7-price, #card8-price,
#card1-content, #card2-content, #card3-content, #card4-content, #card5-content, #card6-content, #card7-content, #card8-content {
    position: static !important;
    top: auto !important;
    height: auto !important;
    width: auto !important;
    min-height: 0;
    margin: 0 0 8px;
    padding: 0 6px;
    line-height: 1.35;
    text-align: center;
}

#card1-heading p, #card2-heading p, #card3-heading p, #card4-heading p, #card5-heading p, #card6-heading p, #card7-heading p, #card8-heading p,
#card1-price p, #card2-price p, #card3-price p, #card4-price p, #card5-price p, #card6-price p, #card7-price p, #card8-price p,
#card1-content p, #card2-content p, #card3-content p, #card4-content p, #card5-content p, #card6-content p, #card7-content p, #card8-content p {
    margin: 0;
}

#card1-content, #card2-content, #card3-content, #card4-content,
#card5-content, #card6-content, #card7-content, #card8-content {
    flex: 1 1 auto;
    display: block;
}