.flexbox-container-inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Distribute space between items */
    align-items: center;
    width: 100%;
    height: 90%;
    z-index: 1;
}

.flexbox-container-inner .content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    overflow: hidden;
    z-index: 2;
}
.button-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 5%; /* Push the button to the bottom */
    overflow: hidden;
    z-index: 1;
}

.flexbox-container-inner h3{
    color: rgb(154,202,60);
    font-size: 2em;
    margin:0;
    margin-top: 8%;

    text-shadow: 
    -0.5px -0.5px 0 black,   /* Top-left */
    0.5px -0.5px 0 black,    /* Top-right */
    -0.5px 0.5px 0 black,    /* Bottom-left */
    0.5px 0.5px 0 black;     /* Bottom-right */
    text-decoration: none;
}
.flexbox-container-inner a {
    text-decoration: none;
}
.flexbox-container-inner a:hover{
    color: #8d0000;
    transition: transform 0.3s ease;
    text-shadow: 
    -0.5px -0.5px 0 white,   /* Top-left */
    0.5px -0.5px 0 white,    /* Top-right */
    -0.5px 0.5px 0 white,    /* Bottom-left */
    0.5px 0.5px 0 white;     /* Bottom-right */
    text-decoration: none; /* Remove underline */
}

.flexbox-container-inner a:active, a:visited{
    color: inherit; /* Ensure the link color inherits from its parent */
    text-decoration: none; /* Remove underline */
}

.flexbox-container-inner p{
    width: 80%;
    left:10%;
    color: white;
    font-size: 1em;
    margin: 0 auto; /* Center the text block horizontally */
    margin-top: 1em; /* Add some margin to separate from the heading */
    text-align: left; /* Align text to the left */
    text-shadow: 
    -0.5px -0.5px 0 black,   /* Top-left */
    0.5px -0.5px 0 black,    /* Top-right */
    -0.5px 0.5px 0 black,    /* Bottom-left */
    0.5px 0.5px 0 black;     /* Bottom-right */
}

.flexbox-container-inner img {
    margin: 0;
    margin-top: 2em;
    width: auto;
    height: 70%;
    border-radius: 50%; /* Ensures the image is circular */
    z-index: 2;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4); /* Uniform shadow for a circular shape */
    object-fit: cover;
    margin-bottom: 1em;
}


.btn2 {
    position: relative;
    padding: 0.5em 2em; /* Default padding */
    background-color: #ffc400;
    color: #000000;
    border: none;
    border-radius: 25px; /* Rounded button */
    cursor: pointer;
    font-size: 1.2em;
    font-weight: bold;
    width: 100%;
    max-width: 300px; /* Match input field width */
    height: auto;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */
    margin-top: 1.5em; /* Add some margin to separate from input fields */
    text-shadow: 
        -0.5px -0.5px 0 white,   /* Top-left */
        0.5px -0.5px 0 white,    /* Top-right */
        -0.5px 0.5px 0 white,    /* Bottom-left */
        0.5px 0.5px 0 white;     /* Bottom-right */
    text-align: center; /* Center the text within the button */
    line-height: 1.2em; /* Adjust line height for better vertical alignment */
}

.btn2:hover {
    background-color: #ff9900;
    transform: translateY(-2px); /* Slight lift on hover */
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3); /* Stronger shadow on hover */
}

.btn2:active {
    transform: translateY(0); /* Revert on click */
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); /* Revert shadow on click */
}

@media (max-width: 932px){
    .flexbox-container-inner h3{
        margin-top: 1em;
        font-size: 1.4em;
    }
    .flexbox-container-inner p{
        font-size: 0.9em;
    }
    .btn2 {
        padding: 1.1em 1em; /* Adjusted padding for smaller screens */
        font-size: 1em; /* Adjust font size */
        width: calc(100% - 2em); /* Adjust width to compensate for padding */
        max-width: 300px; /* Ensure max-width stays consistent */
        box-sizing: border-box; /* Ensure padding is included in width */
    }
}

@media (max-width: 768px){
    .flexbox-container-inner h3{
        margin-top: 1em;
        font-size: 1.2em;
    }
    .flexbox-container-inner p{
        font-size: 0.6em;
        padding-bottom: 50%;
    }
    .flexbox-container-inner img{
        height: 70%;
    }
    .btn2 {
        padding: 0.8em 1em; /* Adjusted padding for smaller screens */
        font-size: 0.8em; /* Adjust font size */
        width: calc(100% - 6em); /* Adjust width to compensate for padding */
        max-width: 300px; /* Ensure max-width stays consistent */
        box-sizing: border-box; /* Ensure padding is included in width */
    }
}
@media (max-width: 564px){
    .flexbox-container-inner h3{
        margin-top: 0.5em;
        font-size: 1.2em;
    }
    .flexbox-container-inner img{
        margin-top: 1em;
    }
    .flexbox-container-inner p{
        font-size: 0.55em;
        padding-bottom: 50%;
    }
    .btn2 {
        padding: 0.6em 1em; /* Adjusted padding for smaller screens */
        font-size: 0.6em; /* Adjust font size */
        width: calc(100% - 6em); /* Adjust width to compensate for padding */
        max-width: 300px; /* Ensure max-width stays consistent */
        box-sizing: border-box; /* Ensure padding is included in width */
    }
}
@media (max-width: 380px){
    .flexbox-container-inner p{
        font-size: 0.50em;
        padding-bottom: 50%;
    }
}