/* Media Queries */
@media (max-width: 1120px) {
    .speaking-heading {
        width: 50%;
    }
}

@media (max-width: 1060px) {
    .role {
        height: auto;
        padding-bottom: 2.5rem;
    }

    .card {
        height: 380px;
    }
}

@media (max-width: 992px) {

    .role-heading,
    .work-heading,
    .focus-heading,
    .connect-heading {
        width: 50%;
    }

    .work-card {
        width: 30%;
    }

    .newsletter input {
        width: 50%;
    }

    .newsletter button {
        width: 20%;
    }
}

@media (max-width: 900px) {
    .speaking {
        height: auto;
    }

    .role-heading,
    .work-heading,
    .focus-heading,
    .speaking-heading,
    .connect-heading {
        width: 80%;
    }
}

@media (max-width: 850px) {
    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: linear-gradient(to top right, var(--color-primary-hover) 25%, var(--color-primary-light) 85%);
        ;
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
    }

    .nav-menu.active {
        display: flex;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .language-switcher {
        position: absolute;
        top: 50%;
        right: 60px;
        transform: translateY(-50%);
    }

    .language-switcher .lang-link {
        font-size: 13px;
        padding: 3px 6px;
    }

    .grid-container,
    .grid {
        display: flex;
        flex-direction: column-reverse;
        gap: 2rem;
    }

    .card {
        width: 90%;
        height: auto;
        padding: 16px 16px 16px 16px;
    }

    .work {
        height: auto;
    }

    .work-card-container {
        height: auto;
    }

    .work-heading {
        margin-bottom: 5rem;
    }

    .work-cards {
        display: flex;
        flex-direction: column;
        height: auto;
        width: auto;
        padding-bottom: 3rem;
    }

    .work-card {
        width: 90%;
        height: auto;
        margin: 1rem 0;
    }
}

@media (max-width: 768px) {

    .face-box-card {
        width: 75px;
        height: 75px;
    }

    .face-box-card p {
        font-size: .8rem;
        transform: rotate(45deg);
    }

    .front {
        transform: translateZ(37px);
    }

    .back {
        transform: translateZ(-37px) rotateY(180deg);
    }

    .right {
        transform: translateX(37px) rotateY(90deg);
    }

    .left {
        transform: translateX(-37px) rotateY(-90deg);
    }

    .top {
        transform: translateY(-37px) rotateX(90deg);
    }

    .bottom {
        transform: translateY(37px) rotateX(-90deg);
    }

    #toastBox {
        width: 100%;
        display: flex;
        justify-content: center;
        left: 0;
        border-radius: 0;
    }

    .countdown {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
    }
}

@media (max-width: 550px) {

    .role-heading,
    .work-heading,
    .focus-heading,
    .speaking-heading,
    .connect-heading {
        width: 90%;
    }

    .focus {
        height: auto;
    }

    .focus-cards-container {
        padding-bottom: 3rem;
        margin-bottom: 0;
    }

    .focus-card {
        height: auto;
    }
}

@media (max-width: 480px) {
    body {
        background: linear-gradient(135deg, #12162bff 0%, var(--color-primary-dark) 100%);
    }

    /* Navigation */
    .main-nav,
    .nav-menu {
        background: linear-gradient(135deg,
                hsl(230, 41%, 12%),
                hsl(230, 20%, 7%));
    }

    .nav-menu {
        border-top: 1px solid var(--color-text-secondary);
    }

    .nav-container {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }

    .logo {
        animation: lights 5s 750ms linear infinite;
    }

    .mobile-menu-toggle {
        margin-top: 1rem;
    }

    .mobile-menu-toggle span {
        position: relative;
        left: 1rem;
    }

    .language-switcher {
        position: absolute;
        top: 1rem;
        right: 1rem;
    }

    /* Hero */
    .hero {
        width: 100%;
        height: auto;
        padding: 2rem 1rem;
        background-image: url("../images/me.png");
    }

    .hero h1 {
        width: 100%;
        font-size: 1.8rem;
        text-align: start;
    }

    .hero-subtitle {
        width: 70%;
        font-size: 1rem;
        background: none !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .hero-cta {
        width: 80%;
    }

    .hero-cta span {
        font-size: 1rem;
    }

    .face-container {
        visibility: hidden;
        display: none;
    }

    .scroll-icon {
        display: none;
        visibility: hidden;
    }

    /* Role */
    .role {
        width: 100%;
        height: auto;
        padding: 2rem 1rem;
        background: transparent;
    }

    .role-heading {
        width: 100%;
        font-size: 1.8rem;
        padding: .5rem 1rem;
    }

    .grid .card .icon {
        display: none;
        visibility: hidden;
    }

    .grid .card h4 {
        font-size: 1rem;
        text-align: center;
    }

    .grid .card p {
        font-size: .9rem;
        text-align: center;
    }

    /* Work */
    .work {
        width: 100%;
        height: auto;
        padding: 2rem 1rem;
    }

    .work-card-container {
        width: 100%;
        height: auto;
        padding: 0;
        margin: 0;
    }

    .work-cards {
        padding: 0;
    }

    .work-card-container h2 {
        width: 100%;
        font-size: 1.8rem;
        padding: .5rem 1rem;
        position: relative;
        top: 0;
        margin-bottom: 1rem;
    }

    .work-card h4 {
        font-size: 1rem;
    }

    .work-card p {
        font-size: .9rem;
    }

    /* Focus */
    .focus {
        width: 100%;
        height: auto;
        padding: 2rem 1rem;
        background: transparent
    }

    .focus-heading {
        width: 100%;
        font-size: 1.8rem;
        padding: .5rem 1rem;
        position: relative;
        top: 0;
        margin-bottom: 2rem;
    }

    .focus-cards-container {
        padding: 0;
        margin: 0;
    }

    .focus-card {
        padding: 1rem;
    }

    .focus-card .icon-container {
        display: none;
        visibility: hidden;
    }

    .focus-card p strong {
        font-size: 1rem;
    }

    .focus-card p {
        font-size: .9rem;
        text-align: end;
    }

    /* Speaking */
    .speaking {
        width: 100%;
        height: auto;
        padding: 2rem 1rem;
        background: linear-gradient(135deg, #12162bff 0%, var(--color-primary-dark) 100%);
    }

    .speaking-heading {
        width: 100%;
        font-size: 1.8rem;
        padding: .5rem 1rem;
        position: relative;
        top: 0;
        margin-bottom: 2rem;
    }

    .speaking-subtitle {
        width: 100%;
        padding: 0;
    }

    .speaking-subtitle h3 {
        font-size: 1rem;
    }

    .speaking-subtitle ul li,
    .speaking-subtitle p {
        font-size: .9rem;
    }

    .btn-speaking {
        text-align: center;
    }

    .btn-anchor {
        margin: 0;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* Connect */
    .connect {
        width: 100%;
        height: auto;
        padding: 2rem 1rem;
        background: url("/assets/images/bgInverseDk.webp");
    }

    .connect-heading {
        width: 100%;
        font-size: 1.8rem;
        padding: .5rem 1rem;
        position: relative;
        top: 0;
        margin-bottom: 2rem;
    }

    .connect-subtitle {
        padding: 0;
        margin: 0;
    }

    .connect-subtitle h3 {
        font-size: 1rem;
    }

    .connect-subtitle p {
        font-size: .9rem;
    }

    .connect-subtitle .company {
        padding: 5px;
        display: block;
        text-align: end;
        font-weight: var(--font-weight-medium);
    }

    .newsletter {
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .newsletter h3 {
        font-size: .9rem;
        text-align: center;
    }

    .newsletter h3 strong {
        font-size: 1rem;
    }

    .newsletter input {
        width: 100%;
        display: block;
    }

    .newsletter button {
        position: static;
        display: block;
        width: 100%;
        font-size: .9rem;
    }

    .main-footer {
        background: linear-gradient(135deg,
                hsl(230, 41%, 12%),
                hsl(230, 20%, 7%));
    }

    .footer-services a {
        display: block;
    }

    .footer-services span {
        writing-mode: vertical-lr
    }

    .footer-section h3 {
        font-size: 1rem;
    }

    .footer-section ul li {
        font-size: .9rem;
    }

    /* About Page */
    .hero-about-container h1 {
        font-size: 1.8rem;
    }

    .hero-about-container h3 {
        font-size: 1rem;
    }

    .hero-about-container p {
        font-size: .9rem;
    }
}

@keyframes lights {
    0% {
        color: hsl(230, 40%, 80%);
        text-shadow:
            0 0 1em hsla(320, 100%, 50%, 0.2),
            0 0 0.125em hsla(320, 100%, 60%, 0.3),
            -1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
            1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
    }

    30% {
        color: hsl(230, 80%, 90%);
        text-shadow:
            0 0 1em hsla(320, 100%, 50%, 0.5),
            0 0 0.125em hsla(320, 100%, 60%, 0.5),
            -0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
            0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
    }

    40% {
        color: hsl(230, 100%, 95%);
        text-shadow:
            0 0 1em hsla(320, 100%, 50%, 0.5),
            0 0 0.125em hsla(320, 100%, 90%, 0.5),
            -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2),
            0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
    }

    70% {
        color: hsl(230, 80%, 90%);
        text-shadow:
            0 0 1em hsla(320, 100%, 50%, 0.5),
            0 0 0.125em hsla(320, 100%, 60%, 0.5),
            0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
            -0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
    }

    100% {
        color: hsl(230, 40%, 80%);
        text-shadow:
            0 0 1em hsla(320, 100%, 50%, 0.2),
            0 0 0.125em hsla(320, 100%, 60%, 0.3),
            1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
            -1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
    }
}