@font-face {
    font-family: 'Times New Roman';
    src: url('Fonts/Times New Roman Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Bold';
    src: url('Fonts/Helvetica Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --primary-color: #333333;
    --bg-color: #FFFFFF;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}

.canvas {
    position: relative;
    width: 1280px;
    height: 739px;
    background: var(--bg-color);
}

.frame-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    color: var(--primary-color);
}

.frame {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: var(--primary-color);
}

/* Desktop Styles */
.frame-17 {
    width: 100%;
    height: 79px;
    /* Reduced to height of name title only */
    left: 0;
    top: 97px;
}

.frame-name {
    width: 100%;
    height: 79px;
    padding: 0px 10px;
}

.title-main {
    width: 100%;
    height: auto;
    font-family: 'Times New Roman';
    font-weight: 700;
    font-size: 119.775px;
    line-height: 1.2;
    letter-spacing: -0.04em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.frame-previously {
    position: absolute;
    width: 808px;
    height: 31px;
    left: calc(50% - 808px/2);
    top: 214px;
    /* 97 (name top) + 79 (name height) + 38 (gap) = 214 */
    padding: 10px 10px;
}

.text-previously {
    font-family: 'Helvetica Bold', sans-serif;
    font-weight: 700;
    font-size: 43.292px;
    line-height: 50px;
    text-align: center;
}

.frame-18 {
    width: 554px;
    height: 16px;
    left: calc(50% - 554px/2);
    top: 293px;
    gap: 38px;
}

.frame-tiktok,
.frame-feelings {
    width: 458px;
    height: 39px;
}

.frame-feelings {
    width: 554px;
}

.text-brands {
    width: 100%;
    font-family: 'Helvetica Bold', sans-serif;
    font-weight: 700;
    font-size: 54.8365px;
    line-height: 75px;
    text-align: center;
    letter-spacing: -0.05em;
}

.frame-strategy {
    position: absolute;
    width: 975px;
    height: 110px;
    left: calc(50% - 975px/2 - 1.5px);
    top: 442px;
}

.text-strategy {
    width: 975px;
    height: 110px;
    font-family: 'Times New Roman';
    font-weight: 700;
    font-size: 98.1285px;
    line-height: 113px;
    letter-spacing: -0.02em;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: opacity 0.1s;
}

.text-strategy:hover .original-text,
.text-strategy.force-hover .original-text {
    display: none;
}

.text-strategy::after {
    content: "";
}

.text-strategy:hover::after,
.text-strategy.force-hover::after {
    content: attr(data-email);
    animation: blinker 0.35s step-end infinite;
}

.text-strategy:hover,
.text-strategy.force-hover {
    /* The animation is now moved to ::after to avoid flickering the transition logic if needed, 
       but user requested same flickering effect. Let's keep it consistent. */
    animation: blinker 0.35s step-end infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.frame-footer {
    position: absolute;
    width: 967px;
    height: 94px;
    left: calc(50% - 967px/2 - 0.5px);
    top: 573px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 52px;
    color: var(--primary-color);
}

.text-footer {
    font-family: 'Times New Roman';
    font-weight: 700;
    font-size: 51.9504px;
    line-height: 60px;
    text-align: center;
    letter-spacing: 0.01em;
}

.address {
    width: 423px;
}

.date {
    width: 492px;
}

/* Tablet Version (800px) */
@media screen and (max-width: 1279px) {
    .canvas {
        width: 800px;
        height: 755px;
    }

    .frame-17 {
        width: 753px;
        height: auto;
        top: 51px;
        left: calc(50% - 753px/2);
    }

    .frame-name {
        width: 753px;
        height: auto;
    }

    .title-main {
        width: 733px;
        height: auto;
        font-size: 74.8591px;
        line-height: 86px;
        white-space: normal;
    }

    .frame-previously {
        width: 330px;
        height: 50px;
        top: 247px;
        left: calc(50% - 330px/2);
    }

    .text-previously {
        font-size: 27.0575px;
        line-height: 31px;
    }

    .frame-18 {
        width: 464px;
        height: 83px;
        top: 327px;
        left: calc(50% - 464px/2);
        gap: 19px;
    }

    .frame-tiktok,
    .frame-feelings {
        width: 464px;
        height: 32px;
    }

    .text-brands {
        font-size: 44px;
        line-height: 47px;
    }

    .frame-strategy {
        width: 629px;
        height: 1px;
        top: 455px;
        left: calc(50% - 629px/2 - 0.5px);
    }

    .text-strategy {
        width: 609px;
        height: 41px;
        font-size: 61.3303px;
        line-height: 71px;
    }

    .frame-footer {
        width: 617px;
        height: 21px;
        top: 556px;
        left: calc(50% - 617px/2);
        gap: 45px;
        color: var(--primary-color);
    }

    .text-footer {
        font-size: 32.469px;
        line-height: 37px;
    }

    .address {
        width: 264px;
    }

    .date {
        width: 308px;
    }
}

/* Mobile Version (375px) - Now Vertically Centered as a Block */
@media screen and (max-width: 799px) {
    .canvas {
        width: 100%;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-bottom: 150px;
    }

    .frame-17,
    .frame-previously,
    .frame-18,
    .frame-strategy,
    .frame-footer {
        position: static;
        width: auto;
        height: auto;
    }

    .frame-name {
        width: 317px;
        height: auto;
        margin-bottom: 29px;
        /* Distance to Previously */
    }

    .title-main {
        width: 297px;
        height: auto;
        font-size: 50px;
        line-height: 45px;
        white-space: normal;
    }

    .frame-previously {
        width: 227px;
        height: 34px;
        margin-bottom: 29px;
        /* Distance to Brands */
    }

    .text-previously {
        width: 207px;
        height: 34px;
        font-size: 18px;
        line-height: 21px;
    }

    .frame-18 {
        width: 317px;
        height: 54px;
        margin-bottom: 34px;
        /* Distance to Strategy */
        gap: 10px;
    }

    .frame-tiktok,
    .frame-feelings {
        width: 317px;
        height: 22px;
    }

    .text-brands {
        font-size: 28px;
        line-height: 32px;
    }

    .frame-strategy {
        width: 358px;
        height: 23px;
        margin-bottom: 32px;
        /* Distance to Footer */
    }

    .text-strategy {
        width: 338px;
        height: 23px;
        font-size: 34px;
        line-height: 39px;
    }

    .text-strategy:hover::after,
    .text-strategy.force-hover::after {
        font-size: 25px;
        line-height: 23px;
    }

    .frame-footer {
        flex-direction: column;
        width: 190px;
        height: auto;
        gap: 7px;
        color: var(--primary-color);
    }

    .text-footer {
        width: 190px;
        height: 13px;
        font-size: 20px;
        line-height: 23px;
        text-align: center;
    }

    .address,
    .date {
        width: 190px;
    }
}