@media (max-width: 768px) {
    .hero-section {
        display: block;
        width: 100%;
        min-height: 100svh;
        overflow: hidden;
    }

    .hero-content {
        width: 100%;
        height: auto;
        min-height: unset;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: visible;
    }

    .hero-image {
        position: static;
        transform: none;
        width: 88%;
        max-width: 327px;
        height: 420px;
        margin-top: 48px;
    }

    .hero-naming {
        position: static;
        transform: none;
        width: 100%;
        max-width: 310px;
        text-align: center;
        margin-top: 32px;
        display: flex;
        flex-direction: column;
    }

    .name {
        width: 100%;
        order: 2;
    }

    .name h1 {
        font-size: 40px;
        white-space: normal;
        line-height: 1.1;
        text-align: center;
        font-weight: 100;
    }

    .designation h2 {
        font-size: 28px;
        margin: 8px 0;
        white-space: normal;
        line-height: 1.15;
        text-align: center;
        -webkit-text-stroke-width: 0;
        color: var(--highlight-main);
        order: 1;
        text-transform: uppercase;
    }

    .social-links {
        display: none;
    }

    .hero-location {
        display: block;
        order: 3;
        margin-top: 8px;
        font-size: 20px;
        color: var(--text-light);
        text-align: center;
    }


}