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

    .flexbox-item-1 {
        background-color: white;
}
        .flexbox-item-center {
            background-color: white;
            position: relative;
            width: 100%;
            height: 450px;
}

        .image3 {
            width: 100%;
            height: 75%;
            object-fit: cover; /* This property ensures the image covers the container without stretching */
}
   
        .profile-pic-container {
            text-align: left;
           
}

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

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

}

.flexbox-container {
    display: flex;
    position: relative;
    z-index: 1;
}

    .fixed-header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #ffffff; /* Set the background color of the fixed header */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow for a subtle effect */
}

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

        .flexbox-item-topl {
            position: relative;
            width: 83%;
            height: 85px;
            background-color: white;

} 

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

        .flexbox-item-topc {
            position: relative;
            width: 2%;
            margin: 0 auto;
            height: 85px;
            background-color: white;
            text-align: right;
            padding: 0%;
} 

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

        .flexbox-item-topr {
            position: relative;
            width: 15%;
            margin: 0 auto;
            height: 85px;
            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: 20%; /* Adjust the horizontal position as needed */
            border-left: 2px solid black; /* Adjust the color and width as needed */
    }  
}         

        /* 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: 50%; /* Position 15% from the top of the window */
            left: 60%;
            right: 0;
}
        .image2 {
            max-width: 100%;
            position: absolute;
            top: 5%;
            left: 3%;
            width: 90%;
            height: 95%;
}

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

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

        .flexbox-item-left2 {
            background-color: white;
            position: relative;
            width: 83%;
            height: 1000px;
}
        
        .flexbox-item-center2 {
            position: relative;
            width: 2%;
            margin: 0 auto;
            height: 1000px;
            background-color: white;
            text-align: right;
            padding: 0%;
}           
    
        .flexbox-item-right2 {
            position: relative;
            width: 15%;
            height: 1000px;
            background-color: white;
            text-align: center;
            padding: 0%;

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

        .image_recentnews {
            max-width: 100%;
            position: absolute;
            top: 13%;
            left: 50%;
            width: 35%;
            height: 5%;
}

        .image_upcomingevents {
            max-width: 100%;
            position: absolute;
            top: 21%;
            left: 50%;
            width: 35%;
            height: 5%;
}

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

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

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

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

}    

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

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


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