h1
{
    padding: 26px 0px;
}

.FeaturedHolder
{
    padding: 40px 0px;
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 26px;
    justify-items: center;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.FeaturedElement
{
    height: 310px;
    width: 80.8%;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.FeaturedElementTextHolder
{
    padding: 24px 22px;
    /* Allow the text column to flex and shrink when space is tight.
       min-width: 0 is required so children can overflow/shrink inside flexbox. */
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
}

.FeaturedElementTextHolder h2
{
    color: white;
    font-family: var(--PrimaryFont);
    font-size: 3.8rem;
    line-height: 1.0;
    text-align: left;
}

.FeaturedElementTextHolder h3
{
    color: rgba(255, 255, 255, 0.801);
    font-size: 1.8rem;
    text-align: left;
}

.FeaturedElementTextHolder p
{
    color: white;
    font-size: 1.4rem;
    font-weight: 100;
    text-align: left;
}

.FeaturedElementImage
{
    width: 34%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
    box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.247);
}

.FeaturedElementVideo
{
    /* Give the video column priority: fixed flex-basis and no shrinking.
       This prevents the text column from forcing the video to collapse.
       The container preserves a 16:9 aspect ratio.
    */
    flex: 0 0 50%; /* fixed width equal to the image column */
    height: 100%;
    aspect-ratio: 16 / 9; /* ensure the video keeps 16:9 */
    overflow: hidden;
    position: relative;
    box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.247);
    background-color: black;
    display: block;
}

.FeaturedElementVideo iframe
{
    /* Make the iframe fill the container. Using absolute positioning
       gives a predictable 'cover' area inside an overflow-hidden parent. */
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    width: 100%;
    height: 100%;
    border: none;

    /* Prevent any interaction with the video (clicks, hover, focus) */
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;

    /* Mobile/touch: avoid any touch handling */
    touch-action: none;
}

.ViewProjectButton
{
    width: 120px;
    height: 40px;
    background-color: var(--SiteColorOne);
    border-radius: 26px;
    position: absolute;
    bottom: 20px;
}

.ViewProjectButton p
{
    color: white;
    text-align: center;
    line-height: 40px;
}

.ViewProjectButton:hover
{
    background-color: black;
}

.ReelYTEmbed
{
    aspect-ratio: var(--YTAspect);
    width:min(100%, min(840px, 90vh*(var(--YTAspect))));
    margin: 40px auto;
    display: block;
    border-style: none;
    background-color: var(--SiteColorOne);
}

.AboutMeSection
{
    margin: 0;
    padding: 90px 0px 70px 0px;
    width: 100%;
    background-color: black;
}

.AboutMeSection h2
{
    padding: 0px 0 40px 0;
    color: white;
    font-family: var(--PrimaryFont);
    font-size: 6.8rem;
    font-weight: 400;
    text-align: center;
    line-height: 0;
}

.AboutMeQuoteTitle
{
    margin: 40px auto 0px auto;
    color: white;
    font-style: normal;
    font-size: 2.0rem;
    text-align: center;
}

.AboutMeText
{
    margin: 30px auto 0px auto;
    width: 74%;
    color: white;
    font-size: 1.6rem;
}