/*======================
HERO TITLE
======================*/

.hero-title-vertical {

    writing-mode: vertical-rl;
    text-orientation: mixed;

    position: absolute;

    top: 50%;
    left: 45%;

    transform: translateY(-50%);

    margin: 0;

    font-size: clamp(80px, 8vw, 160px);

    line-height: 0.9;

    z-index: 10;
}

/* ==========================================
   HERO TITLE ROTATED
========================================== */

.text-rotated {

    position: absolute;
    top: 50%;
    left: 42%;

    transform: translate(-50%, -50%) rotate(-90deg);

    white-space: nowrap;

    font-size: clamp(48px, 4vw, 80px);

    line-height: 1;

    font-weight: 700;
}

/* ==========================================
   TABLET
========================================== */

@media (max-width: 1024px) {

    .text-rotated {

        left: 45%;

        font-size: 14vh !important;
    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px) {

    .text-rotated {

        position: relative !important;

        top: auto;
        left: auto;

        transform: none;

        white-space: normal;

        text-align: center;

        font-size: clamp(32px, 8vw, 48px) !important;

        line-height: 1.1;

        padding: 0 20px;
    }

}