.flexbox-container {
    display: flex;
}

    .flexbox-item {
            background-color: white;
}

        .flexbox-item-left {
            background-color: white;
            position: relative;
            width: 65%;
            height: 250px;
}

            /* Style for the horizontal left black line */
            .black-line-Horizontal-left {
                background-color: black;
                height: 2px; /* Adjust the thickness of the line if needed */
                position: absolute;
                top: 53%; /* Position 15% from the top of the window */
                left: 0;
                right: 88%;
}

            /*Style for logo */
            .image {
                max-width: 100%;
                position: absolute;
                top: 22%;
                left: 12.5%;
                width: 38%;
                height: 65%;
}

            /* Style for the horizontal right black line */
            .black-line-Horizontal-right {
                background-color: black;
                height: 2px; /* Adjust the thickness of the line if needed */
                position: absolute;
                top: 53%; /* Position 15% from the top of the window */
                left: 36.5%;
                right: 0;
}

        .flexbox-item-center {
            position: relative;
            width: 15%;
            margin: 0 auto;
            height: 250px;
            background-color: white;
            text-align: right;
            padding: 0%;
        
            /* Add a vertical line using ::before pseudo-element */
            &::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%; /* Adjust the horizontal position as needed */
            border-left: 2px solid black; /* Adjust the color and width as needed */
    }
}

            /* Style for the horizontal line */
            .black-line-Horizontal-middle {
                background-color: #000;
                height: 2px;
                position: absolute;
                top: 53%; /* Position 15% from the top of the window */
                left: 0;
                right: 0;
}

            .image2 {
                max-width: 100%;
                position: absolute;
                top: 35.5%;
                left: 2.5%;
                width: 95%;
                height: 35%;
}

            /* Style for the vertical black line */
            .black-line-Vertical {
                background-color: black;
                width: 2px; /* Adjust the thickness of the line if needed */
                position: absolute;
                align-items: center;  
}

        .flexbox-item-right {
            position: relative;
            width: 20%;
            height: 250px;
            background-color: white;
            text-align: right;
            padding: 0%;
}
    
            /* Style for the horizontal line */
            .black-line-Horizontal {
                background-color: #000;
                height: 2px;
                position: absolute;
                top: 53%; /* Position 15% from the top of the window */
                left: 0;
                right: 0;
}

.flexbox-container-2 {
    display: flex;
}

    .flexbox-item-2 {
        background-color: white;
}

        .flexbox-item-left2 {
            background-color: white;
            position: relative;
            width: 70%;
            height: 1000px;
}
            
            .social-icons a {
                color: #000;
                font-size: 24px;
                margin-right: 15px;
                text-decoration: none;
}

        .flexbox-item-center2 {
            position: relative;
            width: 5%;
            margin: 0 auto;
            height: 1000px;
            background-color: white;
            text-align: right;
            padding: 0%;

             /* Add a vertical line using ::before pseudo-element */
            &::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%; /* Adjust the horizontal position as needed */
            border-left: 2px solid black; /* Adjust the color and width as needed */
    }
}    
        .flexbox-item-right2 {
            position: relative;
            width: 25%;
            height: 1000px;
            background-color: white;
            text-align: center;
            padding: 0%;
}

/* Login php 2 level containers */
.flexbox-container-3 {
    display: flex;
}

    .flexbox-item-3 {
        background-color: white;
}

        .flexbox-item-left3 {
            background-color: white;
            position: relative;
            width: 70%;
            height: 1000px;
            text-align: center;
}

            #first-name{
                height: 40px;
                width: 85%;
                border-radius: 4px;
                border:solid 1px #bbb;
                padding: 4px;
                font-size: 14px;
}

            #last-name{
                height: 40px;
                width: 85%;
                border-radius: 4px;
                border:solid 1px #bbb;
                padding: 4px;
                font-size: 14px;
}

            #email{
                height: 40px;
                width: 85%;
                border-radius: 4px;
                border:solid 1px #bbb;
                padding: 4px;
                font-size: 14px;
            }
          
            #email-login{
                height: 40px;
                width: 35%;
                border-radius: 4px;
                border:solid 1px #bbb;
                padding: 4px;
                font-size: 14px;
            }

            #text{
                height: 40px;
                width: 85%;
                border-radius: 4px;
                border:solid 1px #bbb;
                padding: 4px;
                font-size: 14px;
            }

            #artist-known-as-name{
                height: 40px;
                width: 85%;
                border-radius: 4px;
                border:solid 1px #bbb;
                padding: 4px;
                font-size: 14px;
            }

            #venue-known-as-name{
                height: 40px;
                width: 85%;
                border-radius: 4px;
                border:solid 1px #bbb;
                padding: 4px;
                font-size: 14px;
            }

            #company-known-as-name{
                height: 40px;
                width: 85%;
                border-radius: 4px;
                border:solid 1px #bbb;
                padding: 4px;
                font-size: 14px;
            }

            #password{
                height: 40px;
                width: 85%;
                border-radius: 4px;
                border:solid 1px #bbb;
                padding: 4px;
                font-size: 14px;
            }

            #password-login{
                height: 40px;
                width: 35%;
                border-radius: 4px;
                border:solid 1px #bbb;
                padding: 4px;
                font-size: 14px;
            }

            #confirm_password{
                height: 40px;
                width: 85%;
                border-radius: 4px;
                border:solid 1px #bbb;
                padding: 4px;
                font-size: 14px;
            }
          
            #button{
                width: 85%;
                height: 40px;
                border-radius: 4px;
                font-weight: bold;
                border: none;
                background-color: black;
                color: white;
            }

            #button-login{
                width: 35%;
                height: 40px;
                border-radius: 4px;
                font-weight: bold;
                border: none;
                background-color: black;
                color: white;
            }
          
            #forgot-password-link {
                color: black;
                text-decoration: none;
                font-size: 14px;
                margin-right: 10px;
                padding: .5%;
                font-weight: bold;
            }
            
            #signup-link {
                color: black;
                text-decoration: none;
                font-size: 14px;
                padding: .5%;
                font-weight: bold;
            }
            
            #Already-Account {
                color: black;
                text-decoration: none;
                font-size: 14px;
                margin-right: 20px;
                padding: .5%;
                font-weight: bold;
            } 

        .flexbox-item-center3 {
            position: relative;
            width: 5%;
            margin: 0 auto;
            height: 1000px;
            background-color: white;
            text-align: right;
            padding: 0%;

             /* Add a vertical line using ::before pseudo-element */
            &::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%; /* Adjust the horizontal position as needed */
            border-left: 2px solid black; /* Adjust the color and width as needed */
    }
}    
        .flexbox-item-right3 {
            position: relative;
            width: 25%;
            height: 1000px;
            background-color: white;
            text-align: center;
            padding: 0%;
}

/* Login php 2 level containers */
.flexbox-container-R3 {
    display: flex;
}

    .flexbox-item-R3 {
        background-color: white;
}

        .flexbox-item-leftR3 {
            background-color: white;
            position: relative;
            width: 23.1%;
            height: 1000px;
            text-align: center;
            margin-right: 0px; /* Adjust the margin as needed for the space between elements */
}

        .flexbox-item-leftR32 {
            background-color: white;
            position: relative;
            width: 23.49%;
            height: 1000px;
            text-align: center;
            margin-right: 0px; /* Adjust the margin as needed for the space between elements */
}

        .flexbox-item-leftR321 {
            background-color: white;
            position: relative;
            width: 23.33%;
            height: 1000px;
            text-align: center;
            margin-right: 0px; /* Adjust the margin as needed for the space between elements */           
}

        .flexbox-item-centerR3 {
            position: relative;
            width: 5%;
            margin: 0 auto;
            height: 1000px;
            background-color: white;
            text-align: right;
            padding: 0%;

             /* Add a vertical line using ::before pseudo-element */
            &::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%; /* Adjust the horizontal position as needed */
            border-left: 2px solid black; /* Adjust the color and width as needed */
    }
}    
        .flexbox-item-rightR3 {
            position: relative;
            width: 25%;
            height: 1000px;
            background-color: white;
            text-align: center;
            padding: 0%;
}

.flexbox-container-governance {
    display: flex;
}

    .flexbox-item-governance {
        background-color: white;
}

        .flexbox-item-left-governance {
            background-color: white;
            position: relative;
            width: 70%;
            height: 1000px;
}

        .image3 {
            width: 100%;
            height: 350px;
            object-fit: cover; /* This property ensures the image covers the container without stretching */
}

        .profile-pic-container {
            text-align: left;
}

        .image4 {
            width: 125px;
            height: 125px;
            border-radius: 50%;
            border: 2px solid white;
            object-fit: cover;
            margin-top: -50%; /* Adjust margin as needed */
            margin-left: 1%;
}

        .profile-name {
            font-size: 15px; /* Adjust font size as needed */
            font-weight: bold;
            color: black;
            margin-left: 3%;

}

        .flexbox-item-center-governance {
            position: relative;
            width: 5%;
            margin: 0 auto;
            height: 1000px;
            background-color: white;
            text-align: right;
            padding: 0%;

            /* Add a vertical line using ::before pseudo-element */
            &::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%; /* Adjust the horizontal position as needed */
            border-left: 2px solid black; /* Adjust the color and width as needed */
    }
}    

        .flexbox-item-right-governance {
            position: relative;
            width: 25%;
            height: 1000px;
            background-color: white;
            text-align: center;
            padding: 0%;
}

.flexbox-container-blank {
    display: flex;
}

    .flexbox-item-blank {
        background-color: white;
}

        .flexbox-item-left-blank {
            background-color: white;
            position: relative;
            width: 70%;
            height: 400px;
}

        .flexbox-item-center-blank {
            position: relative;
            width: 5%;
            margin: 0 auto;
            height: 400px;
            background-color: white;
            text-align: right;
            padding: 0%;

            /* Add a vertical line using ::before pseudo-element */
            &::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%; /* Adjust the horizontal position as needed */
            border-left: 2px solid black; /* Adjust the color and width as needed */
    }
}    

        .flexbox-item-right-blank {
            position: relative;
            width: 25%;
            height: 400px;
            background-color: white;
            text-align: center;
            padding: 0%;
}


/* Define media queries for responsive design */
@media (max-width: 768px) {
/* Add styles for screens smaller than 768px */
    .image-container {
        padding: 10px;
    }
}

/* Apply specific styling to the recent news link */
a.underline-color {
    text-decoration: none; /* Remove underline */
    color: black; /* Change color to black */

}

#footer-container {
    display: flex;
    justify-content: space-between; /* Aligns elements to the left and right edges */
    align-items: center; /* Vertically centers elements within the container */
    font-size: 14px;
    color: #555; /* Adjust the color to your preference */
    margin-top: 10px; /* Adjust the margin as needed */
}
    #copyright {
        flex-grow: 1; /* Allows the "powered by" span to grow and fill available space */
}